Webpack React On Rails

This gem was created in order to easily setup webpack on rails. The following guide was used in the creation of the gem: http://clarkdave.net/2015/01/how-to-use-webpack-with-rails/

Getting Started

Rails

Webpack React On Rails works with Rails 4.1 onwards, and Ruby 2.1 onwards. You can add it to your Gemfile with:

gem 'webpack_react_on_rails'

Run bundle to install the gem.

Next, run the generator to create the necessary files and setup the necessary configuration:

rails generate webpack_react_on_rails:install

The command will generate the following files and add the necesary configuration to application.rb and production.rb:

• ./package.json
• ./config/webpack/main.config.js
• ./config/webpack/development.config.js
• ./config/webpack/production.config.js
• ./config/webpack.rb

Now, add the line below to your application layout:

<%= webpack_manifest_script %>

Webpack

Add entries to main.config.js:

For example, adding the entry javascript file index.js:

entry: {
  index: './app/frontend/javascripts/index.js'
}

The same entry will be used for both development and production.

Run webpack using the following command:

node_modules/.bin/webpack --config ./config/webpack/development.config.js --watch --colors

Bundled assets will be located in the directory specified in:

config.output = {
  // this is our app/assets/javascripts directory, which is part of the Sprockets pipeline
  path: path.join(__dirname, '../../app', 'assets', 'javascript', 'bundle'),

  ...
};

For the example configuration Rails will serve assets from app/assets/javascripts/bundle

Production

Before deploying to Heroku, set the buildpack:

1. heroku buildpacks:clear
2. heroku buildpacks:set heroku/nodejs
3. heroku buildpacks:add heroku/ruby --index 2

View Helpers

For the given development and production webpack config:

Development:

config.output = {
  // this is our app/assets/javascripts directory, which is part of the Sprockets pipeline
  path: path.join(__dirname, '../../app', 'assets', 'javascript', 'bundle'),

  ...
};

Production:

config.output = {
  path: path.join(__dirname, '../../public', 'assets', 'bundle'),
  ...
};

Rails will serve bundled assets from public/assets/bundle in production and from app/assets/javascripts/bundle in development.

You can include your webpack bundled javascript using the view helper method:

In erb for the example configuration above:

<%= webpack_bundle_tag 'bundle/index' %>

You will need to add bundle/index.js to Rails.application.config.assets.precompile in config/initializers/assets.rb i.e.

Rails.application.config.assets.precompile += %w( bundle/index-bundle.js )

Issues:

If you find any issues, please create an Issue or PR, and I will address/review it as soon as possible.