Created
November 29, 2016 07:14
Star
You must be signed in to star a gist
Rails with React, Redux, ES6, Webpack, and Gulp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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