Update to 8.0.0 beta.2 using WebpackerLite

shakacode · May 11, 2017 · a2e2a92 · a2e2a92
1 parent 9c24b98
commit a2e2a92
Show file tree

Hide file tree

Showing 18 changed files with 259 additions and 273 deletions.
diff --git a/Gemfile b/Gemfile
@@ -38,9 +38,9 @@ gem "sdoc", group: :doc
 # Use Rails Html Sanitizer for HTML sanitization
 gem "rails-html-sanitizer"
 
-gem "react_on_rails", "7.0.0"
+gem "react_on_rails", "8.0.0.beta.2"
 
-gem "webpacker_lite", "0.0.4"
+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 (7.0.0)
+    react_on_rails (8.0.0.beta.2)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -288,7 +288,7 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker_lite (0.0.4)
+    webpacker_lite (1.0.0)
       activesupport (>= 4.2)
       multi_json (~> 1.2)
       railties (>= 4.2)
@@ -334,7 +334,7 @@ DEPENDENCIES
   rails
   rails-html-sanitizer
   rainbow
-  react_on_rails (= 7.0.0)
+  react_on_rails (= 8.0.0.beta.2)
   redis
   rspec-rails (~> 3)
   rspec-retry
@@ -348,7 +348,7 @@ DEPENDENCIES
   spring-commands-rspec
   uglifier
   web-console
-  webpacker_lite (= 0.0.4)
+  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 public/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 public/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,13 +3,12 @@
 <head>
   <title>RailsReactTutorial</title>
 
-  <%= javascript_pack_tag 'vendor' %>
-  <%= javascript_pack_tag 'app' %>
-
-  <!-- These do not use turbolinks, so no data-turbolinks-track -->
-  <!-- This is to load the hot assets. -->
-
+  <%= stylesheet_pack_tag(static: ['vendor-bundle', 'app-bundle'],
+                          media: 'all',
+                          'data-turbolinks-track': true) %>
 
+  <%= javascript_pack_tag('vendor-bundle', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('app-bundle', 'data-turbolinks-track': true) %>
 
   <%= csrf_meta_tags %>
 </head>

diff --git a/client/package.json b/client/package.json
@@ -68,9 +68,9 @@
     "immutable": "^3.8.1",
     "imports-loader": "^0.7.1",
     "intl": "^1.2.5",
-    "js-yaml": "^3.8.2",
     "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",
@@ -82,7 +82,7 @@
     "react-bootstrap": "^0.30.8",
     "react-dom": "^15.4.1",
     "react-intl": "^2.2.2",
-    "react-on-rails": "^7.0.0",
+    "react-on-rails": "8.0.0-beta.2",
     "react-redux": "^4.4.6",
     "react-router": "^3.0.0",
     "react-router-redux": "^4.0.7",
@@ -95,7 +95,8 @@
     "turbolinks": "^5.0.0",
     "url-loader": "^0.5.8",
     "webpack": "^2.3.3",
-    "webpack-manifest-plugin": "^1.1.0"
+    "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,11 +1,17 @@
 /* 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 { devServer: devServerConfig, publicPath } = require('./webpackConfigLoader.js');
+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);
 

diff --git a/client/webpack.client.base.config.js b/client/webpack.client.base.config.js
@@ -3,10 +3,15 @@
 
 // Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
 const webpack = require('webpack');
+
 const { resolve } = require('path');
 
 const ManifestPlugin = require('webpack-manifest-plugin');
-const { paths, publicPath } = require('./webpackConfigLoader.js');
+
+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';
@@ -18,7 +23,7 @@ module.exports = {
   entry: {
 
     // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
-    vendor: [
+    'vendor-bundle': [
       'babel-polyfill',
       'es5-shim/es5-shim',
       'es5-shim/es5-sham',
@@ -44,29 +49,25 @@ 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]-bundle.js',
+    filename: '[name].js',
     path: resolve('..', paths.output, paths.assets),
     pathinfo: true,
   },
 
   resolve: {
-    extensions: paths.extensions,
+    extensions: ['.js', '.jsx'],
     modules: [
-      paths.source,
-      paths.node_modules,
+      'client/app',
+      'client/node_modules',
     ],
   },
 
-  resolveLoader: {
-    modules: [paths.node_modules],
-  },
-
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
@@ -79,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',