Skip to content

Instantly share code, notes, and snippets.

@awesome
Created November 29, 2016 07:14
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save awesome/05a06cec3a627cde07787c0803b57fee to your computer and use it in GitHub Desktop.
Rails with React, Redux, ES6, Webpack, and Gulp
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment