Additional reading
    Additional details
    Contributor info
    Shakacode logoShakaCodeDeveloped by

    Copyright 2020 ShakaCode

    Recommended Project structure

    The React on Rails generator uses the standard rails/webpacker convention of this structure:

      ├── bundles:# Logical groups of files that can be used for code splitting
      │   └── hello-world-bundle.js
      ├── packs:# only webpack entry files here
      │   └── hello-world-bundle.js

    Per the example repo shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh, you should consider keeping your codebase mostly consistent with the defaults for rails/webpacker.

    Steps to convert from the generator defaults to use a /client directory for source code

    1. Move the directory:
    mv app/javascript client
    1. Edit your /config/webpacker.yml file. Change the default/source_path:
      source_path: client

    Moving node_modules from / to /client with a custom webpack setup.

    rails/webpacker probably doesn't support having your main node_modules directory under /client, so only follow these steps if you want to use your own webpack configuration.

    1. Move the /package.json to /client/package.json
    2. Create a /package.json that delegates to /client/package.json.
        "scripts": {
          "heroku-postbuild": "cd ./client && yarn"
    3. If your node_modules directory is not at the top level of the Rails project, then you will need to set the ENV value of WEBPACKER_CONFIG to the location of the config/webpacker.yml file per rails/webpacker PR 2561.

    CSS, Sass, Fonts, and Images

    Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!

    Here's a good discussion of this option: Why does Rails 6 include both Webpacker and Sprockets?.

    You have 2 basic choices:

    Simple Rails Way

    This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the sass-rails gem. Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.

    Advantages to the Simple Rails Way

    1. Much simpler! There's no changes really from your current processes.

    Using Webpack to Manage Styling Assets

    This technique involves customization of the webpack config files to generate CSS, image, and font assets.

    Directory structure

    1. /client/app/assets: Assets for CSS for client app.
    2. /client/app/assets/fonts and /client/app/assets/styles: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.

    Advantages to having Webpack Manage Styles

    1. You can use CSS modules, which is super compelling once you seen the benefits.
    2. You can use CSS in JS.
    3. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.