Skip to content

Commit fb28f3f

Browse files
committed
Add comments; Do another pass on README
1 parent 3c59196 commit fb28f3f

File tree

3 files changed

+41
-37
lines changed

3 files changed

+41
-37
lines changed

README.md

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,23 @@ Full tutorial can be found at: [Fast Rich Client Rails Development With Webpack
88

99
# Motivation
1010

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.
1516

16-
# Example of the following technologies
17+
# Technologies involved
1718

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)
2526

26-
# Running without Rails using Module Hot Replacement
27+
# Javascript development without Rails using Hot Module Replacement (HMR)
2728

2829
Setup node and run the node server.
2930

@@ -37,24 +38,26 @@ Point browser to [http://0.0.0.0:3000]().
3738
Make sure to invoke your local copy of the webpack executable as opposed
3839
to any globally installed webpack.
3940
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:
4142
```
4243
$(npm bin)/webpack --config webpack.hot.config.js
4344
```
4445

4546
Save a change to a JSX file and see it update immediately in the browser! Note,
4647
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.
4850

49-
# Running with Rails
51+
# Rails integration
5052

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.
5861

5962
```
6063
cd webpack
@@ -63,6 +66,9 @@ webpack -w --config webpack.rails.config.js
6366

6467
## Run Rails server
6568

69+
Once the JS/CSS bundled have been generated into the Rails asset pipeline, you can start
70+
the Rails server.
71+
6672
```
6773
cd <rails_project_name>
6874
bundle install
@@ -71,9 +77,9 @@ rails s -p 4000
7177
```
7278
Point browser to [http://0.0.0.0:4000]().
7379

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.
7581

76-
# Webpack configuration files
82+
# Webpack configuration
7783
- `webpack.hot.config.js`: Used by server.js to run the demo express server.
7884
- `webpack.rails.config.js`: Used to generate the Rails bundles.
7985
- `webpack.common.config.js`: Common configuration file to minimize code duplication.
@@ -107,7 +113,7 @@ They work for both Rails and the Webpack Server!
107113

108114
# Deploying to Heroku
109115

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
111117
buildpack:
112118

113119
```

app/assets/stylesheets/_bootstrap-custom.scss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Customizations
1+
// Customizations - needs to be imported first!
22
@import "bootstrap-variables-customization";
33

44
// Core variables and mixins
@@ -31,10 +31,10 @@
3131
@import "bootstrap/pager";
3232
@import "bootstrap/labels";
3333
@import "bootstrap/badges";
34-
//@import "bootstrap/jumbotron";
34+
//@import "bootstrap/jumbotron"; // excluding as an example
3535
@import "bootstrap/thumbnails";
3636
@import "bootstrap/alerts";
37-
//@import "bootstrap/progress-bars";
37+
//@import "bootstrap/progress-bars"; // excluding as an example
3838
@import "bootstrap/media";
3939
@import "bootstrap/list-group";
4040
@import "bootstrap/panels";
@@ -43,13 +43,11 @@
4343
@import "bootstrap/close";
4444

4545
// Components w/ JavaScript
46-
@import "bootstrap/modals";
46+
@import "bootstrap/modals"; // excluding as an example
4747
@import "bootstrap/tooltip";
4848
@import "bootstrap/popovers";
49-
@import "bootstrap/carousel";
49+
@import "bootstrap/carousel"; // excluding as an example
5050

5151
// Utility classes
5252
@import "bootstrap/utilities";
5353
@import "bootstrap/responsive-utilities";
54-
55-
//@import "bootstrap-style-customizations";

webpack/bootstrap-sass.config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ module.exports = {
1212
'transition': true,
1313
'alert': true,
1414
'button': true,
15-
'carousel': false,
15+
'carousel': false, // excluding as an example
1616
'collapse': true,
1717
'dropdown': true,
18-
'modal': false,
18+
'modal': false, // excluding as an example
1919
'tooltip': true,
2020
'popover': true,
2121
'scrollspy': true,
@@ -51,10 +51,10 @@ module.exports = {
5151
"pager": true,
5252
"labels": true,
5353
"badges": true,
54-
"jumbotron": false,
54+
"jumbotron": false, // excluding as an example
5555
"thumbnails": true,
5656
"alerts": true,
57-
"progress-bars": false,
57+
"progress-bars": false, // excluding as an example
5858
"media": true,
5959
"list-group": true,
6060
"panels": true,

0 commit comments

Comments
 (0)