[WIP] Update with webpacker lite

[jonathanphilippou]

Here's my work so far, I'm trying to update the repo for the latest webpacker_lite and react_on_rails versions.

@justin808

---

This change is 

[justin808]

Reviewed 5 of 19 files at r1, 1 of 14 files at r3.
Review status: 6 of 19 files reviewed at latest revision, 14 unresolved discussions, some commit checks broke.

---

Gemfile, line 43 at r3 (raw file):

gem 'react_on_rails', path: '../react_on_rails'

gem 'webpacker_lite', path: '../webpacker_lite'

relative path is temporary WIP

---

client/package.json, line 34 at r3 (raw file):

    "build:production:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
    "build:production:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
    "build:client": "webpack --config webpack.client.rails.build.config.js",

build:test:client
build:test:server

like the others

---

client/package.json, line 38 at r3 (raw file):

"NODE_ENV=test yarn run build:client && NODE_ENV=test yarn run build:server",

yarn run build:test:client && yarn run build:server

---

client/package.json, line 39 at r3 (raw file):

    "build:server": "webpack --config webpack.server.rails.build.config.js",
    "build:test": "NODE_ENV=test yarn run build:client && NODE_ENV=test yarn run build:server",
    "build:production": "NODE_ENV=production yarn run build:production:client && yarn run build:production:server",

1. remove setting the env value, since called tasks do that

Should we add one for build:dev that is really all dev static? CC @robwise

---

client/package.json, line 42 at r3 (raw file):

    "hot-assets": "NODE_ENV=development babel-node server-rails-hot.js",
    "lint": "eslint --ext .js,.jsx .",
    "install-react-on-rails": "rm -rf node_modules/react-on-rails && npm i 'file:../../react_on_rails'"

Not sure if this one should be in the /CONTRIBUTING.md when we're finally ready?

This is for contributing...

Maybe add steps in react_on_rails /CONTRIBUTING.md for the steps for a big release.

This is really related to React on Rails development.

---

client/package.json, line 86 at r3 (raw file):

    "react-dom": "^15.4.1",
    "react-intl": "^2.2.2",
    "react-on-rails": "file:../../react_on_rails",

We'll have to remember to go to 8.0.0

---

client/server-rails-hot.js, line 20 at r3 (raw file):

const devServer = new WebpackDevServer(compiler, {
  proxy: {
    '*': `http://lvh.me:${hotReloadingPort}`,

i'm not 100% sure this lvh.me should not be hotReloadingUrl.

@kaizencodes had setup the proxy and the contentbase change. Doc are here:

• https://webpack.js.org/configuration/dev-server/#devserver-contentbase
• https://webpack.js.org/configuration/dev-server/#devserver-proxy

@kaizencodes Any idea?

Proxy should be for the api calls, so I would think that we want to proxy to localhost:3000 (wherever rails is running).

---

client/server-rails-hot.js, line 22 at r3 (raw file):

    '*': `http://lvh.me:${hotReloadingPort}`,
  },
  contentBase: hotReloadingUrl,

Not sure on this one -- this would be for any static images. Shouldn't be a URL. Should be the public public path probably, like ../public/webpack/development to get any images published from the CSS. Probably!

---

client/webpack.client.base.config.js, line 26 at r3 (raw file):

    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
    'vendor-bundle': [

changed to use -bundle so entry names match up with the new Wepacker Lite view helpers

Previously, we add the -bundle in the naming convention for the output, and then the -bundle is not in the manifest.json, so the view helper value for the output name would not match the file name in the public/webpack/XXXXX directory.

TODO: make sure this is in the docs for Webpacker Lite and React on Rails

---

client/webpack.client.base.config.js, line 107 at r3 (raw file):

          loader: 'url-loader',
          options: {
            name: '[name]-[hash].[ext]',

document how we always use the hash in the output names regardless of env

no reason not to, unless maybe at some point it seems to take more time in development or testing

---

client/webpack.client.express.config.js, line 28 at r3 (raw file):

  // this file is served directly by webpack
  filename: '[name].js',

this needs to documented for the migration

---

config/webpacker_lite.yml, line 16 at r3 (raw file):

  # Developer note: considering removing this option so it can ONLY be turned by using an ENV value.
  # Default is false, ENV 'HOT_RELOAD' will always override

ENV 'HOT_RELOAD=TRUE' (or 'FALSE') will always override

---

config/initializers/assets.rb, line 7 at r3 (raw file):

# Add folder with webpack generated assets to assets.paths
Rails.application.config.assets.paths << Rails.root.join("public", "webpack", Rails.env)

we should do a quick test if this is still needed

reason is that anything under public is included already!

if this is not needed here, then not needed in generator or react on rails /spec/dummy

---

config/initializers/react_on_rails.rb, line 89 at r3 (raw file):

  # For any asset matching this regex, non-digested symlink will be created
  # To disable symlinks set this parameter to nil.
  config.symlink_non_digested_assets_regex = nil

We could actually check if the generated_assets directory is under public and this value is non-nil:

1. Log warning message on rails server
2. set this value to nil so the symlinking is not done

---

Comments from Reviewable

[justin808]

Reviewed 2 of 19 files at r1, 11 of 14 files at r3.
Review status: all files reviewed at latest revision, 14 unresolved discussions, some commit checks broke.

---

Comments from Reviewable

[justin808]

Review status: all files reviewed at latest revision, 14 unresolved discussions, some commit checks broke.

---

client/server-rails-hot.js, line 20 at r3 (raw file):

Previously, justin808 (Justin Gordon) wrote…

i'm not 100% sure this lvh.me should not be hotReloadingUrl.

@kaizencodes had setup the proxy and the contentbase change. Doc are here:

• https://webpack.js.org/configuration/dev-server/#devserver-contentbase
• https://webpack.js.org/configuration/dev-server/#devserver-proxy

@kaizencodes Any idea?

Proxy should be for the api calls, so I would think that we want to proxy to localhost:3000 (wherever rails is running).

Ask @Judahmeek

---

Comments from Reviewable

[justin808]

See #395