Skip to content

Commit 390519b

Browse files
justin808justin808
authored
Upgrade react-webpack-rails-tutorial to Webpacker Lite (shakacode#395)
* Update babel-preset-stage-2 * No logging of redux for tests * Update WebpackerLite to 2.0.4
1 parent be73c02 commit 390519b

22 files changed

+433
-343
lines changed

Diff for: ‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ vendor/ruby
2727
.ruby-gemset
2828

2929
# Generated js bundles
30-
/app/assets/webpack/
30+
/public/webpack/
3131

3232
# Rubymine/IntelliJ
3333
.idea

Diff for: ‎.ruby-version

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.4.1
1+
ruby-2.4.1

Diff for: ‎Gemfile

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ gem "rails-html-sanitizer"
4040

4141
gem "react_on_rails", "8.0.0.beta.3"
4242

43+
gem "webpacker_lite", "2.0.4"
44+
4345
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
4446
# mini_racer is probably faster than therubyracer
4547
gem "mini_racer"

Diff for: ‎Gemfile.lock

+5
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,10 @@ GEM
288288
activemodel (>= 5.0)
289289
bindex (>= 0.4.0)
290290
railties (>= 5.0)
291+
webpacker_lite (2.0.4)
292+
activesupport (>= 4.2)
293+
multi_json (~> 1.2)
294+
railties (>= 4.2)
291295
websocket (1.2.4)
292296
websocket-driver (0.6.5)
293297
websocket-extensions (>= 0.1.0)
@@ -344,6 +348,7 @@ DEPENDENCIES
344348
spring-commands-rspec
345349
uglifier
346350
web-console
351+
webpacker_lite (= 2.0.4)
347352

348353
RUBY VERSION
349354
ruby 2.4.1p111

Diff for: ‎Procfile.dev

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
88

99
# Run the hot reload server for client development
10-
hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
10+
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'
1111

1212
# Render static client assets
1313
rails-static-client-assets: sh -c 'yarn run build:dev:client'

Diff for: ‎Procfile.hot

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
77

88
# Run the hot reload server for client development
9-
hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
9+
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'
1010

1111
# Keep the JS fresh for server rendering. Remove if not server rendering
1212
rails-server-assets: sh -c 'yarn run build:dev:server'

Diff for: ‎Procfile.static

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
33

44
# Build client assets, watching for changes.
5-
rails-client-assets: rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
5+
rails-client-assets: rm -rf public/webpack/development || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
66

77
# Build server assets, watching for changes. Remove if not server rendering.
88
rails-server-assets: yarn run build:dev:server

Diff for: ‎app/views/layouts/application.html.erb

+9-12
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,17 @@
33
<head>
44
<title>RailsReactTutorial</title>
55

6-
<%= env_stylesheet_link_tag(static: 'application_static',
7-
hot: 'application_non_webpack',
8-
media: 'all',
9-
'data-turbolinks-track' => "reload") %>
6+
<%= stylesheet_pack_tag('vendor-bundle',
7+
media: 'all',
8+
'data-turbolinks-track': true) %>
109

11-
<!-- These do not use turbolinks, so no data-turbolinks-track -->
12-
<!-- This is to load the hot assets. -->
13-
<%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
14-
'http://localhost:3500/app-bundle.js']) %>
10+
<%= stylesheet_pack_tag('app-bundle',
11+
media: 'all',
12+
'data-turbolinks-track': true) %>
13+
14+
<%= javascript_pack_tag('vendor-bundle', 'data-turbolinks-track': true) %>
15+
<%= javascript_pack_tag('app-bundle', 'data-turbolinks-track': true) %>
1516

16-
<!-- These do use turbolinks -->
17-
<%= env_javascript_include_tag(static: 'application_static',
18-
hot: 'application_non_webpack',
19-
'data-turbolinks-track' => "reload") %>
2017
<%= csrf_meta_tags %>
2118
</head>
2219
<body>

Diff for: ‎client/.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015", "stage-0", "react"]
2+
"presets": ["es2015", "stage-2", "react"]
33
}

Diff for: ‎client/app/bundles/comments/startup/clientRegistration.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import NavigationBarApp from './NavigationBarApp';
1717
addLocaleData([...en, ...de, ...ja, ...zh]);
1818

1919
ReactOnRails.setOptions({
20-
traceTurbolinks: TRACE_TURBOLINKS, // eslint-disable-line no-undef
20+
traceTurbolinks: process.env.TRACE_TURBOLINKS, // eslint-disable-line no-undef
2121
});
2222

2323
ReactOnRails.register({

Diff for: ‎client/app/libs/middlewares/loggerMiddleware.js

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
export default function logger({ getState }) {
44
return (next) => (action) => {
5+
// TODO: Replace this file with redux-logger and move this conditional to helper
6+
// TODO: where we're setting up the included middleware.
7+
if (process.env.NODE_ENV !== 'development') {
8+
return next(action);
9+
}
10+
511
console.log('will dispatch', action);
612

713
// Call the next dispatch method in the middleware chain.

Diff for: ‎client/package.json

+12-7
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@
3232
"build:production:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
3333
"build:production:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
3434
"build:client": "webpack --config webpack.client.rails.build.config.js",
35-
"build:dev:client": "webpack -w --config webpack.client.rails.build.config.js",
36-
"build:dev:server": "webpack -w --config webpack.server.rails.build.config.js",
35+
"build:dev:client": "NODE_ENV=development webpack -w --config webpack.client.rails.build.config.js",
36+
"build:dev:server": "NODE_ENV=development webpack -w --config webpack.server.rails.build.config.js",
3737
"build:server": "webpack --config webpack.server.rails.build.config.js",
38-
"build:test": "yarn run build:client && yarn run build:server",
39-
"build:production": "yarn run build:production:client && yarn run build:production:server",
40-
"hot-assets": "babel-node server-rails-hot.js",
38+
"build:test": "rm -rf ../public/webpack/test && NODE_ENV=test yarn run build:client && NODE_ENV=test yarn run build:server",
39+
"build:production": "rm -rf ../public/webpack/production && NODE_ENV=production yarn run build:production:client && yarn run build:production:server",
40+
"hot-assets": "NODE_ENV=development babel-node server-rails-hot.js",
4141
"lint": "eslint --ext .js,.jsx ."
4242
},
4343
"dependencies": {
@@ -52,22 +52,25 @@
5252
"babel-polyfill": "^6.23.0",
5353
"babel-preset-es2015": "^6.24.1",
5454
"babel-preset-react": "^6.24.1",
55-
"babel-preset-stage-0": "^6.24.1",
55+
"babel-preset-stage-2": "^6.24.1",
5656
"babel-runtime": "^6.23.0",
5757
"bootstrap-loader": "^2.0.0",
5858
"bootstrap-sass": "^3.3.7",
5959
"classnames": "^2.2.5",
60+
"compression-webpack-plugin": "^0.3.2",
6061
"css-loader": "^0.28.0",
6162
"es5-shim": "^4.5.9",
6263
"estraverse": "^4.2.0",
6364
"expose-loader": "^0.7.3",
6465
"extract-text-webpack-plugin": "^2.1.0",
6566
"file-loader": "^0.11.1",
67+
"glob": "^7.1.1",
6668
"immutable": "^3.8.1",
6769
"imports-loader": "^0.7.1",
6870
"intl": "^1.2.5",
6971
"jquery": "^3.2.1",
7072
"jquery-ujs": "^1.2.2",
73+
"js-yaml": "^3.8.2",
7174
"loader-utils": "^1.1.0",
7275
"lodash": "^4.17.4",
7376
"marked": "^0.3.6",
@@ -91,7 +94,9 @@
9194
"style-loader": "^0.16.1",
9295
"turbolinks": "^5.0.0",
9396
"url-loader": "^0.5.8",
94-
"webpack": "^2.3.3"
97+
"webpack": "^2.3.3",
98+
"webpack-manifest-plugin": "^1.1.0",
99+
"webpack-merge": "^4.1.0"
95100
},
96101
"devDependencies": {
97102
"babel-eslint": "^7.2.1",

Diff for: ‎client/server-rails-hot.js

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
/* eslint no-var: 0, no-console: 0, import/no-extraneous-dependencies: 0 */
22

33
import webpack from 'webpack';
4+
45
import WebpackDevServer from 'webpack-dev-server';
56

67
import webpackConfig from './webpack.client.rails.hot.config';
78

8-
const hotRailsPort = process.env.HOT_RAILS_PORT || 3500;
9+
const { resolve } = require('path');
10+
11+
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
12+
13+
const configPath = resolve('..', 'config');
14+
const { hotReloadingUrl, hotReloadingPort, hotReloadingHostname } = webpackConfigLoader(configPath);
915

1016
const compiler = webpack(webpackConfig);
1117

1218
const devServer = new WebpackDevServer(compiler, {
1319
proxy: {
14-
'*': `http://lvh.me:${hotRailsPort}`,
20+
'*': `http://lvh.me:${hotReloadingPort}`,
1521
},
16-
publicPath: webpackConfig.output.publicPath,
22+
contentBase: hotReloadingUrl,
1723
hot: true,
1824
inline: true,
1925
historyApiFallback: true,
@@ -29,9 +35,9 @@ const devServer = new WebpackDevServer(compiler, {
2935
},
3036
});
3137

32-
devServer.listen(hotRailsPort, 'localhost', (err) => {
38+
devServer.listen(hotReloadingPort, hotReloadingHostname, (err) => {
3339
if (err) console.error(err);
3440
console.log(
35-
`=> 🔥 Webpack development server is running on port ${hotRailsPort}`,
41+
`=> 🔥 Webpack development server is running on ${hotReloadingUrl}`,
3642
);
3743
});

Diff for: ‎client/webpack.client.base.config.js

+45-32
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,25 @@
33

44
// Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
55
const webpack = require('webpack');
6-
const path = require('path');
6+
const ManifestPlugin = require('webpack-manifest-plugin');
7+
const { resolve } = require('path');
8+
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
9+
10+
const configPath = resolve('..', 'config');
11+
const { manifest } = webpackConfigLoader(configPath);
712

813
const devBuild = process.env.NODE_ENV !== 'production';
9-
const nodeEnv = devBuild ? 'development' : 'production';
1014

1115
module.exports = {
1216

1317
// the project dir
14-
context: __dirname,
18+
context: resolve(__dirname),
1519
entry: {
20+
// This will contain the app entry points defined by
21+
// webpack.client.rails.hot.config and webpack.client.rails.build.config
1622

1723
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
18-
vendor: [
24+
'vendor-bundle': [
1925
'babel-polyfill',
2026
'es5-shim/es5-shim',
2127
'es5-shim/es5-sham',
@@ -25,56 +31,62 @@ module.exports = {
2531
// Below libraries are listed as entry points to be sure they get included in the
2632
// vendor-bundle.js. Note, if we added some library here, but don't use it in the
2733
// app-bundle.js, then we just wasted a bunch of space.
28-
'axios',
29-
'actioncable',
30-
'classnames',
31-
'immutable',
32-
'lodash',
33-
'marked',
34-
'react-bootstrap',
35-
'react-dom',
36-
'react-redux',
37-
'react-on-rails',
38-
'react-router-redux',
39-
'redux-thunk',
40-
'react-intl',
34+
// 'axios',
35+
// 'actioncable',
36+
// 'classnames',
37+
// 'immutable',
38+
// 'lodash',
39+
// 'marked',
40+
// 'react-bootstrap',
41+
// 'react-dom',
42+
// 'react-redux',
43+
// 'react-on-rails',
44+
// 'react-router-redux',
45+
// 'redux-thunk',
46+
// 'react-intl',
4147
],
4248

4349
// This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
44-
app: [
50+
'app-bundle': [
4551
'./app/bundles/comments/startup/clientRegistration',
4652
],
4753
},
54+
4855
resolve: {
4956
extensions: ['.js', '.jsx'],
5057
alias: {
51-
libs: path.resolve(__dirname, 'app/libs'),
52-
react: path.resolve(__dirname, 'node_modules/react'),
53-
'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
58+
libs: resolve(__dirname, 'app/libs'),
5459
},
60+
modules: [
61+
'client/app',
62+
'client/node_modules',
63+
],
5564
},
5665

5766
plugins: [
58-
new webpack.DefinePlugin({
59-
'process.env': {
60-
NODE_ENV: JSON.stringify(nodeEnv),
61-
},
67+
new webpack.EnvironmentPlugin({
68+
NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
69+
DEBUG: false,
6270
TRACE_TURBOLINKS: devBuild,
6371
}),
6472

6573
// https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
6674
new webpack.optimize.CommonsChunkPlugin({
6775

68-
// This name 'vendor' ties into the entry definition
69-
name: 'vendor',
76+
// This name 'vendor-bundle' ties into the entry definition
77+
name: 'vendor-bundle',
7078

7179
// We don't want the default vendor.js name
72-
filename: 'vendor-bundle.js',
73-
74-
// Passing Infinity just creates the commons chunk, but moves no modules into it.
75-
// In other words, we only put what's in the vendor entry definition in vendor-bundle.js
76-
minChunks: Infinity,
80+
filename: 'vendor-bundle-[hash].js',
7781

82+
minChunks(module) {
83+
// this assumes your vendor imports exist in the node_modules directory
84+
return module.context && module.context.indexOf('node_modules') !== -1;
85+
},
86+
}),
87+
new ManifestPlugin({
88+
fileName: manifest,
89+
writeToFileEmit: true
7890
}),
7991
],
8092

@@ -89,6 +101,7 @@ module.exports = {
89101
use: {
90102
loader: 'url-loader',
91103
options: {
104+
name: '[name]-[hash].[ext]',
92105
limit: 10000,
93106
},
94107
},

Diff for: ‎client/webpack.client.express.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ config.entry.app.push(
2525
config.output = {
2626

2727
// this file is served directly by webpack
28-
filename: '[name]-bundle.js',
28+
filename: '[name].js',
2929
path: __dirname,
3030
};
3131
config.plugins.unshift(

0 commit comments

Comments
 (0)