@@ -8,22 +8,23 @@ Full tutorial can be found at: [Fast Rich Client Rails Development With Webpack
8
8
9
9
# Motivation
10
10
11
- 1 . Enable development of a JS client separate from Rails.
12
- 2 . Enable easily retrofitting such a JS framework into an existing Rails app.
13
- 3 . Enable the use of the JavaScript es6 transpiler.
14
- 4 . Enable easily using npm modules with a Rails application.
11
+ In no particular order:
12
+ 1 . Enable development of a JS client independently from Rails.
13
+ 2 . Easily enable use of npm modules with a Rails application.
14
+ 3 . Easily enable retrofitting such a JS framework into an existing Rails app.
15
+ 4 . Enable the use of the JavaScript ES6 transpiler.
15
16
16
- # Example of the following technologies
17
+ # Technologies involved
17
18
18
- 1 . React
19
- 2 . React-bootstrap
20
- 3 . Webpack with hot-reload
21
- 4 . Webpack ExtractTextPlugin
22
- 4 . es6-loader (es6 transpiler)
23
- 5 . Simultaneously working with Rails 4.2
24
- 6 . Deployable to Heroku
19
+ 1 . React 0.11 (for front-end app)
20
+ 2 . React-bootstrap 0.12
21
+ 3 . Webpack with hot-reload 1.4 (for local dev)
22
+ 4 . Webpack ExtractTextPlugin (to extract CSS out of JS bundle)
23
+ 4 . ES6 transpiler (es6-loader) 0.2
24
+ 5 . Rails 4.2 (for backend app)
25
+ 6 . Heroku (for deployment)
25
26
26
- # Running without Rails using Module Hot Replacement
27
+ # Javascript development without Rails using Hot Module Replacement (HMR)
27
28
28
29
Setup node and run the node server.
29
30
@@ -37,24 +38,26 @@ Point browser to [http://0.0.0.0:3000]().
37
38
Make sure to invoke your local copy of the webpack executable as opposed
38
39
to any globally installed webpack.
39
40
See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js
40
- In doubt you can run the following command:
41
+ If in doubt, run the following command:
41
42
```
42
43
$(npm bin)/webpack --config webpack.hot.config.js
43
44
```
44
45
45
46
Save a change to a JSX file and see it update immediately in the browser! Note,
46
47
any browser state still exists, such as what you've typed in the comments box.
47
- That's totally different than "Live Reload" which refreshes the browser.
48
+ That's totally different than [ Live Reload] ( http://livereload.com/ ) which refreshes
49
+ the browser.
48
50
49
- # Running with Rails
51
+ # Rails integration
50
52
51
- ## Build Rails bundles
52
- Run this command to have webpack build the Rails bundles in the Rails
53
- asset pipeline.
54
- Note that the Webpack ExtractTextPlugin is used so that two bundles are generated:
55
- - rails-bundle.js which gets copied to app/assets/javascripts
56
- - bootstrap-and-customizations.css which gets copied in app/assets/stylesheet
57
- Observe how the bundles are automatically re-generated whever your JSX changes.
53
+ ## Build JS/CSS bundles
54
+ Run this command to have webpack build the JS/CSS bundles and have them saved in the Rails
55
+ asset pipeline (app/assets).
56
+ The Webpack ExtractTextPlugin can optionally be used to extract the CSS out of
57
+ the JS bundle. The following bundles would then be generated:
58
+ - rails-bundle.js which gets saved to app/assets/javascripts
59
+ - bootstrap-and-customizations.css which gets saved in app/assets/stylesheets
60
+ Observe how the bundles are automatically re-generated whenever your JSX changes.
58
61
59
62
```
60
63
cd webpack
@@ -63,6 +66,9 @@ webpack -w --config webpack.rails.config.js
63
66
64
67
## Run Rails server
65
68
69
+ Once the JS/CSS bundled have been generated into the Rails asset pipeline, you can start
70
+ the Rails server.
71
+
66
72
```
67
73
cd <rails_project_name>
68
74
bundle install
@@ -71,9 +77,9 @@ rails s -p 4000
71
77
```
72
78
Point browser to [ http://0.0.0.0:4000 ] ( ) .
73
79
74
- It's important to run the rails server on different port than the node server.
80
+ It's important to run the Rails server on different port than the node server.
75
81
76
- # Webpack configuration files
82
+ # Webpack configuration
77
83
- ` webpack.hot.config.js ` : Used by server.js to run the demo express server.
78
84
- ` webpack.rails.config.js ` : Used to generate the Rails bundles.
79
85
- ` webpack.common.config.js ` : Common configuration file to minimize code duplication.
@@ -107,7 +113,7 @@ They work for both Rails and the Webpack Server!
107
113
108
114
# Deploying to Heroku
109
115
110
- In order to deploy to heroku, you'll need run this command once to set a custom
116
+ In order to deploy to heroku, you'll need to run this command once to set a custom
111
117
buildpack:
112
118
113
119
```
0 commit comments