shakacode · kaizencodes · Apr 11, 2017 · Apr 11, 2017 · Apr 30, 2017 · May 1, 2017
diff --git a/.gitignore b/.gitignore
@@ -27,7 +27,7 @@ vendor/ruby
 .ruby-gemset
 
 # Generated js bundles
-/app/assets/webpack/
+/public/webpack/
 
 # Rubymine/IntelliJ
 .idea

diff --git a/Gemfile b/Gemfile
@@ -38,7 +38,9 @@ gem "sdoc", group: :doc
 # Use Rails Html Sanitizer for HTML sanitization
 gem "rails-html-sanitizer"
 
-gem "react_on_rails", "6.9.3"
+gem "react_on_rails", "8.0.0.beta.2"
+
+gem "webpacker_lite", "1.0.0"
 
 # See https://github.com/sstephenson/execjs#readme for more supported runtimes
 # mini_racer is probably faster than therubyracer

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -200,7 +200,7 @@ GEM
     rb-inotify (0.9.8)
       ffi (>= 0.5.0)
     rdoc (4.3.0)
-    react_on_rails (6.9.3)
+    react_on_rails (8.0.0.beta.2)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -288,6 +288,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webpacker_lite (1.0.0)
+      activesupport (>= 4.2)
+      multi_json (~> 1.2)
+      railties (>= 4.2)
     websocket (1.2.4)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
@@ -330,7 +334,7 @@ DEPENDENCIES
   rails
   rails-html-sanitizer
   rainbow
-  react_on_rails (= 6.9.3)
+  react_on_rails (= 8.0.0.beta.2)
   redis
   rspec-rails (~> 3)
   rspec-retry
@@ -344,6 +348,7 @@ DEPENDENCIES
   spring-commands-rspec
   uglifier
   web-console
+  webpacker_lite (= 1.0.0)
 
 RUBY VERSION
    ruby 2.4.1p111

diff --git a/Procfile.dev b/Procfile.dev
@@ -7,7 +7,7 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
+hot-assets: sh -c 'rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
 
 # Render static client assets
 rails-static-client-assets: sh -c 'yarn run build:dev:client'

diff --git a/Procfile.hot b/Procfile.hot
@@ -6,7 +6,7 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
+hot-assets: sh -c 'rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
 
 # Keep the JS fresh for server rendering. Remove if not server rendering
 rails-server-assets: sh -c 'yarn run build:dev:server'
diff --git a/Procfile.static b/Procfile.static
@@ -2,7 +2,7 @@
 rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
 
 # Build client assets, watching for changes.
-rails-client-assets: rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
+rails-client-assets: rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
 
 # Build server assets, watching for changes. Remove if not server rendering.
 rails-server-assets: yarn run build:dev:server
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -3,20 +3,13 @@
 <head>
   <title>RailsReactTutorial</title>
 
-  <%= env_stylesheet_link_tag(static: 'application_static',
-                              hot: 'application_non_webpack',
-                              media: 'all',
-                              'data-turbolinks-track' => "reload")  %>
+  <%= stylesheet_pack_tag(static: ['vendor-bundle', 'app-bundle'],
+                          media: 'all',
+                          'data-turbolinks-track': true) %>
 
-  <!-- These do not use turbolinks, so no data-turbolinks-track -->
-  <!-- This is to load the hot assets. -->
-  <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
-                                       'http://localhost:3500/app-bundle.js']) %>
+  <%= javascript_pack_tag('vendor-bundle', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('app-bundle', 'data-turbolinks-track': true) %>
 
-  <!-- These do use turbolinks -->
-  <%= env_javascript_include_tag(static: 'application_static',
-                                 hot: 'application_non_webpack',
-                                 'data-turbolinks-track' => "reload") %>
   <%= csrf_meta_tags %>
 </head>
 <body>

diff --git a/client/.babelrc b/client/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-2", "react"]
 }
diff --git a/client/package.json b/client/package.json
@@ -31,12 +31,12 @@
     "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:dev:client": "webpack -w --config webpack.client.rails.build.config.js",
-    "build:dev:server": "webpack -w --config webpack.server.rails.build.config.js",
+    "build:dev:client": "NODE_ENV=development webpack -w --config webpack.client.rails.build.config.js",
+    "build:dev:server": "NODE_ENV=development webpack -w --config webpack.server.rails.build.config.js",
     "build:server": "webpack --config webpack.server.rails.build.config.js",
-    "build:test": "yarn run build:client && yarn run build:server",
-    "build:production": "yarn run build:production:client && yarn run build:production:server",
-    "hot-assets": "babel-node server-rails-hot.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",
+    "hot-assets": "NODE_ENV=development babel-node server-rails-hot.js",
     "lint": "eslint --ext .js,.jsx ."
   },
   "dependencies": {
@@ -51,22 +51,25 @@
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-2": "^0.2.0",
     "babel-runtime": "^6.23.0",
     "bootstrap-loader": "^2.0.0",
     "bootstrap-sass": "^3.3.7",
     "classnames": "^2.2.5",
+    "compression-webpack-plugin": "^0.3.2",
     "css-loader": "^0.28.0",
     "es5-shim": "^4.5.9",
     "estraverse": "^4.2.0",
     "expose-loader": "^0.7.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
+    "glob": "^7.1.1",
     "immutable": "^3.8.1",
     "imports-loader": "^0.7.1",
     "intl": "^1.2.5",
     "jquery": "^3.2.1",
     "jquery-ujs": "^1.2.2",
+    "js-yaml": "^3.8.2",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "marked": "^0.3.6",
@@ -78,7 +81,7 @@
     "react-bootstrap": "^0.30.8",
     "react-dom": "^15.4.1",
     "react-intl": "^2.2.2",
-    "react-on-rails": "^6.9.3",
+    "react-on-rails": "8.0.0-beta.1",
     "react-redux": "^4.4.6",
     "react-router": "^3.0.0",
     "react-router-redux": "^4.0.7",
@@ -90,7 +93,9 @@
     "style-loader": "^0.16.1",
     "turbolinks": "^5.0.0",
     "url-loader": "^0.5.8",
-    "webpack": "^2.3.3"
+    "webpack": "^2.3.3",
+    "webpack-manifest-plugin": "^1.1.0",
+    "webpack-merge": "^4.1.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.1",

diff --git a/client/server-rails-hot.js b/client/server-rails-hot.js
@@ -1,19 +1,25 @@
 /* eslint no-var: 0, no-console: 0, import/no-extraneous-dependencies: 0 */
 
 import webpack from 'webpack';
+
 import WebpackDevServer from 'webpack-dev-server';
 
 import webpackConfig from './webpack.client.rails.hot.config';
 
-const hotRailsPort = process.env.HOT_RAILS_PORT || 3500;
+const { resolve } = require('path');
+
+const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+
+const configPath = resolve('..', 'config', 'webpack');
+const { devServer: devServerConfig, publicPath } = webpackConfigLoader(configPath);
 
 const compiler = webpack(webpackConfig);
 
 const devServer = new WebpackDevServer(compiler, {
   proxy: {
-    '*': `http://lvh.me:${hotRailsPort}`,
+    '*': `http://lvh.me:${devServerConfig.port}`,
   },
-  publicPath: webpackConfig.output.publicPath,
+  publicPath,
   hot: true,
   inline: true,
   historyApiFallback: true,
@@ -29,9 +35,9 @@ const devServer = new WebpackDevServer(compiler, {
   },
 });
 
-devServer.listen(hotRailsPort, 'localhost', (err) => {
+devServer.listen(devServerConfig.port, 'localhost', (err) => {
   if (err) console.error(err);
   console.log(
-    `=> 🔥  Webpack development server is running on port ${hotRailsPort}`,
+    `=> 🔥  Webpack development server is running on port ${devServerConfig.port}`,
   );
 });
diff --git a/client/webpack.client.base.config.js b/client/webpack.client.base.config.js
@@ -3,19 +3,27 @@
 
 // Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
 const webpack = require('webpack');
-const path = require('path');
+
+const { resolve } = require('path');
+
+const ManifestPlugin = require('webpack-manifest-plugin');
+
+const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+
+const configPath = resolve('..', 'config', 'webpack');
+const { paths, publicPath } = webpackConfigLoader(configPath);
 
 const devBuild = process.env.NODE_ENV !== 'production';
 const nodeEnv = devBuild ? 'development' : 'production';
 
 module.exports = {
 
   // the project dir
-  context: __dirname,
+  context: resolve(__dirname),
   entry: {
 
     // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
-    vendor: [
+    'vendor-bundle': [
       'babel-polyfill',
       'es5-shim/es5-shim',
       'es5-shim/es5-sham',
@@ -41,17 +49,23 @@ module.exports = {
     ],
 
     // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
-    app: [
+    'app-bundle': [
       './app/bundles/comments/startup/clientRegistration',
     ],
   },
+
+  output: {
+    filename: '[name].js',
+    path: resolve('..', paths.output, paths.assets),
+    pathinfo: true,
+  },
+
   resolve: {
     extensions: ['.js', '.jsx'],
-    alias: {
-      libs: path.resolve(__dirname, 'app/libs'),
-      react: path.resolve(__dirname, 'node_modules/react'),
-      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
-    },
+    modules: [
+      'client/app',
+      'client/node_modules',
+    ],
   },
 
   plugins: [
@@ -66,7 +80,7 @@ module.exports = {
     new webpack.optimize.CommonsChunkPlugin({
 
       // This name 'vendor' ties into the entry definition
-      name: 'vendor',
+      name: 'vendor-bundle',
 
       // We don't want the default vendor.js name
       filename: 'vendor-bundle.js',
@@ -76,6 +90,11 @@ module.exports = {
       minChunks: Infinity,
 
     }),
+    new ManifestPlugin({
+      fileName: paths.manifest,
+      publicPath,
+      writeToFileEmit: true,
+    }),
   ],
 
   module: {
@@ -89,6 +108,8 @@ module.exports = {
         use: {
           loader: 'url-loader',
           options: {
+            publicPath,
+            name: '[name]-[hash].[ext]',
             limit: 10000,
           },
         },