Rails with React, Redux, ES6, Webpack, and Gulp

react_rails_redux.sh

# Create rails app
gem install make_it_so
make_it_so rails <name>
rake db:create db:migrate db:test:prepare && rspec

# get NPM set up (make sure node is installed)
npm init
npm install --save babel-loader gulp webpack gulp-webpack react redux react-redux 
touch webpack.config.js
vim webpack.config.js

# webpack.config.js
var path = require('path'),
assets_path = path.join('app', 'assets', 'javascripts'),
client_path = path.join('client', 'assets', 'javascripts');

var config = {
  context: path.resolve(client_path),
  entry: ‘./entry.jsx',
  output: {
    filename: 'react_app.js',
    path: path.resolve(assets_path)
  },
  externals: {
    jquery: 'var jQuery'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    root: path.resolve(client_path)
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  }
};

module.exports = config;

# make client namespace for React files
mkdir client && cd client && mkdir assets && cd assets && mkdir javascripts && cd javascripts && touch entry.jsx

# set up gulp
touch gulpfile.js

# gulpfile.js
var gulp = require('gulp'),
  webpack = require('gulp-webpack’);

gulp.task("webpack", function() {
  return gulp.src("client/assets/javascripts/entry.jsx")
  .pipe(webpack(require("./webpack.config.js")))
  .pipe(gulp.dest("app/assets/javascripts/"));
});

gulp.task("watch", function() {
  gulp.watch(["client/assets/javascripts/**/*.js","client/assets/javascripts/**/*.jsx"], ["webpack"]);
});

gulp.task("default", ["watch"]);

# add some sort of div for react to render to
# app/views/home/index.html.erb :
div id=“react_app"

# make sure to add react_app (bundled from webpack) into the asset pipeline
app/assets/javascripts/application.js
//= react_app