By Justin Gordon, http://www.railsonmaui.com
Full tutorial can be found at: Fast Rich Client Rails Development With Webpack and the ES6 Transpiler
Discussion forum regarding the tutorial
- Enable development of a JS client separate from Rails.
- Enable easily retrofitting such a JS framework into an existing Rails app.
- Enable the use of the JavaScript es6 transpiler.
- Enable easily using npm modules with a Rails application.
- React
- React-bootstrap
- Webpack with hot-reload
- Webpack ExtractTextPlugin
- es6-loader (es6 transpiler)
- Simultaneously working with Rails 4.2
- Deployable to Heroku
Setup node and run the node server.
npm install cd webpack && webpack --config webpack.hot.config.js node server.js
Point browser to http://0.0.0.0:3000.
Make sure to invoke your local copy of the webpack executable as opposed to any globally installed webpack. See https://github.com/webpack/extract-text-webpack-plugin/blob/master/example/webpack.config.js In doubt you can run the following command:
$(npm bin)/webpack --config webpack.hot.config.js
Save a change to a JSX file and see it update immediately in the browser! Note, any browser state still exists, such as what you've typed in the comments box. That's totally different than "Live Reload" which refreshes the browser.
Run this command to have webpack build the Rails bundles in the Rails asset pipeline. Note that the Webpack ExtractTextPlugin is used so that two bundles are generated:
- rails-bundle.js which gets copied to app/assets/javascripts
- bootstrap-and-customizations.css which gets copied in app/assets/stylesheet Observe how the bundles are automatically re-generated whever your JSX changes.
cd webpack webpack -w --config webpack.rails.config.js
cd <rails_project_name> bundle install rake db:setup rails s -p 4000
Point browser to http://0.0.0.0:4000.
It's important to run the rails server on different port than the node server.
webpack.hot.config.js
: Used by server.js to run the demo express server.webpack.rails.config.js
: Used to generate the Rails bundles.webpack.common.config.js
: Common configuration file to minimize code duplication.
The webpack.rails.config.js
file generates rails-bundle.js which is then included by the Rails asset pipeline.
- The Webpack server loads the images from the symlink of the app/assets/images directory.
- Since the images are not moved, Rails loads images via the normal asset pipeline features.
- The
image-url
sass helper takes care of mapping the correct directories for images. The image directory for the webpack server is configured by this line:
{ test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&imagePath=/assets/images"}
Run the following command in your development environment to invoke both Webpack and Rails.
bundle exec foreman start -f Procfile.dev
They work for both Rails and the Webpack Server!
In order to deploy to heroku, you'll need run this command once to set a custom buildpack:
heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git
This runs the two buildpacks in the .buildpacks
directory.