Skip to content
Ruby on Rails, React, Webpack 4 boilerplate app.
Branch: master
Clone or download
Latest commit c53de4b May 25, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin Init rails Jan 30, 2017
config Remove obsolete method Apr 14, 2018
db Init rails Jan 30, 2017
lib Init rails Jan 30, 2017
log Init rails Jan 30, 2017
test Generate Home/index action Jan 30, 2017
tmp Init rails Jan 30, 2017
vendor/assets Init rails Jan 30, 2017
.dockerignore Add basic docker support Aug 6, 2017
.eslintrc Add support for prettier Sep 9, 2018
.nvmrc Update node to 10.15.2 Mar 3, 2019
.prettierrc Remove trailing comma Feb 17, 2019
.ruby-version Update ruby to 2.5.0 Dec 30, 2017
.stylelintrc Add stylelint configuration Feb 2, 2017
Dockerfile Update ruby to 2.5.0 Dec 30, 2017
Gemfile Update rails to 5.2.3 Mar 31, 2019
Gemfile.lock Update rails to 5.2.3 Mar 31, 2019 Add MIT license Feb 5, 2017 Remove redux references since it's no longer being used Mar 31, 2019
Rakefile Init rails Jan 30, 2017
package-lock.json Update npm dependencies May 25, 2019
webpack.config.base.js Add support for postcss-loader with autoprefixer and cssnano Dec 11, 2018
webpack.config.js Fix syntax Dec 11, 2018


This is a pure Ruby on Rails / React / Webpack 4 boilerplate app.


  • Ruby on Rails 5.2.x
  • React 16.x
  • Webpack 4.x
  • Babel 7.x
  • ESLint support
  • Prettier support
  • SASS and StyleLint support
  • Hashed filenames for production assets
  • Separate app and vendor JS bundles
  • Postgres compatibility
  • Using Rails default gems and NPM packages only

Exit Asset Pipeline, Enter Webpack

Why Webpack?
Webpack is a module bundler. It can bundle all JS files for usage in the browser, but can also transform / bundle / package any resource or frontend asset.
The NPM ecosystem is huge, and Webpack makes it available in the simplest way possible.
Webpack can support every modern JS app, using ES6 or CommonJS modules, or both, create a single or multiple bundles, and in general can be customized to accomplish any application requirement.

The frontend assets on this repository are placed on a more accessible directory, at front/js and front/css, rather than app/assets/javascripts and app/assets/stylesheets.
At any point, migration to a different backend (for example NodeJS) can be seamless since Webpack is running as a stand-alone bundler, there's absolutely no dependence to the Asset Pipeline or any other framework-specific module.


It's recommended to use Ruby 2.5.0 and NodeJS 10.15.x.

# install bundler if not available
gem install bundler

# install gem dependencies
bundle install

# install npm dependencies
npm install

# create the postgres databases
# update config/database.yml details if needed
rake db:create

# generate assets for development
npm run webpack

# start server
rails s

Webpack scripts

npm run webpack
Builds the assets for development mode.

npm run webpack:watch
Builds the assets for development mode, and rebuilds on every detected change.

npm run webpack:production
Builds the assets for production mode, output files are hashed.

Load assets in production from a custom root directory or URL

By default JS/CSS assets are being served from the public/dist directory. However in production it may be needed to serve assets from a CDN or an S3 bucket etc.
Simply override the Rails.application.config.assets.root_path property on the production environment to accomplish it.
Of course during the deployment script and after the npm run webpack-production command, public/dist/* output files should be copied to the target dir or infrastructure.

Run in Docker (optional)

Repository contains a basic Dockerfile for running the app in production mode.
Assets should be compiled first using webpack outside of the container.

# build docker image
docker build -t rails-react-boilerplate .

# run docker image
docker run -p 3000:3000 -e SECRET_KEY_BASE=abcd rails-react-boilerplate
You can’t perform that action at this time.