shakacode · jonathanphilippou · May 14, 2017 · May 14, 2017
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,9 @@
 
 # Ignore Byebug command history file.
 .byebug_history
+# React on Rails
+npm-debug.log*
+node_modules
+
+# Generated js bundles
+/public/webpack/*
diff --git a/Gemfile b/Gemfile
@@ -5,7 +5,9 @@ source 'https://rubygems.org'
 gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
 # Use sqlite3 as the database for Active Record
 
-gem "react_on_rails", path: "../react_on_rails"
+# gem "react_on_rails", path: "../react_on_rails"
+gem 'react_on_rails', '~>8.0.0.beta.2'
+
 
 gem 'sqlite3'
 # Use Puma as the app server
@@ -49,3 +51,6 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem 'mini_racer', platforms: :ruby
+gem 'webpacker_lite'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,13 +1,3 @@
-PATH
-  remote: ../react_on_rails
-  specs:
-    react_on_rails (6.6.0)
-      addressable
-      connection_pool
-      execjs (~> 2.5)
-      rails (>= 3.2)
-      rainbow (~> 2.1)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -48,7 +38,7 @@ GEM
       i18n (~> 0.7)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
-    addressable (2.5.0)
+    addressable (2.5.1)
       public_suffix (~> 2.0, >= 2.0.2)
     arel (7.1.4)
     builder (3.2.3)
@@ -76,6 +66,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    libv8 (5.3.332.38.5)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -88,6 +79,8 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
     mini_portile2 (2.1.0)
+    mini_racer (0.1.9)
+      libv8 (~> 5.3)
     minitest (5.10.1)
     multi_json (1.12.1)
     nio4r (2.0.0)
@@ -121,11 +114,18 @@ GEM
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rainbow (2.2.1)
+    rainbow (2.2.2)
+      rake
     rake (12.0.0)
     rb-fsevent (0.9.8)
     rb-inotify (0.9.8)
       ffi (>= 0.5.0)
+    react_on_rails (8.0.0.beta.2)
+      addressable
+      connection_pool
+      execjs (~> 2.5)
+      rails (>= 3.2)
+      rainbow (~> 2.1)
     sass (3.4.23)
     sass-rails (5.0.6)
       railties (>= 4.0.0, < 6)
@@ -161,6 +161,10 @@ GEM
       activemodel (>= 5.0)
       debug_inspector
       railties (>= 5.0)
+    webpacker_lite (1.0.0)
+      activesupport (>= 4.2)
+      multi_json (~> 1.2)
+      railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -174,9 +178,10 @@ DEPENDENCIES
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)
+  mini_racer
   puma (~> 3.0)
   rails (~> 5.0.0, >= 5.0.0.1)
-  react_on_rails!
+  react_on_rails (~> 8.0.0.beta.2)
   sass-rails (~> 5.0)
   spring
   spring-watcher-listen (~> 2.0.0)
@@ -185,6 +190,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console
+  webpacker_lite
 
 BUNDLED WITH
    1.14.5
diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,2 @@
+web: rails s -p 3000
+client: sh -c 'rm -rf public/webpack/* || true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'
diff --git a/app/controllers/hello_world_controller.rb b/app/controllers/hello_world_controller.rb
@@ -0,0 +1,7 @@
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end
diff --git a/app/views/hello_world/index.html.erb b/app/views/hello_world/index.html.erb
@@ -0,0 +1,3 @@
+<h1>Hello World</h1>
+<%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
+
diff --git a/app/views/layouts/hello_world.html.erb b/app/views/layouts/hello_world.html.erb
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ReactOnRailsWithWebpacker</title>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'main' %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>
diff --git a/client/.babelrc b/client/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-2", "react"]
+}
diff --git a/client/REACT_ON_RAILS_CLIENT_README.md b/client/REACT_ON_RAILS_CLIENT_README.md
@@ -0,0 +1,9 @@
+Client folder generated by the React on Rails gem.
+
+See documentation [at github.com/shakacode/react_on_rails](https://github.com/shakacode/react_on_rails) for details on how it is organized.
+
+If you need additional help, please consider:
+
+* [Our ShakaCode Forum for React on Rails](https://forum.shakacode.com/c/rails/reactonrails).
+* Joining our Slack discussion room by [emailing us a bit about you and your project](mailto:[email protected]).
+* [Hiring us](https://forum.shakacode.com/c/rails/reactonrails) for coaching and custom web application development for your project.
diff --git a/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx b/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+export const updateName = (text) => ({
+  type: HELLO_WORLD_NAME_UPDATE,
+  text,
+});
diff --git a/client/app/bundles/HelloWorld/components/HelloWorld.jsx b/client/app/bundles/HelloWorld/components/HelloWorld.jsx
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const HelloWorld = ({ name, updateName }) => (
+  <div>
+    <h3>
+      Hello, {name}!
+    </h3>
+    <hr />
+    <form >
+      <label htmlFor="name">
+        Say hello to:
+      </label>
+      <input
+        id="name"
+        type="text"
+        value={name}
+        onChange={(e) => updateName(e.target.value)}
+      />
+    </form>
+  </div>
+);
+
+HelloWorld.propTypes = {
+  name: PropTypes.string.isRequired,
+  updateName: PropTypes.func.isRequired,
+};
+
+export default HelloWorld;
diff --git a/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx b/client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+
+export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE';
diff --git a/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx b/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
@@ -0,0 +1,13 @@
+// Simple example of a React "smart" component
+
+import { connect } from 'react-redux';
+import HelloWorld from '../components/HelloWorld';
+import * as actions from '../actions/helloWorldActionCreators';
+
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state) => ({ name: state.name });
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
+export default connect(mapStateToProps, actions)(HelloWorld);
diff --git a/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx b/client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
@@ -0,0 +1,15 @@
+import { combineReducers } from 'redux';
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+const name = (state = '', action) => {
+  switch (action.type) {
+    case HELLO_WORLD_NAME_UPDATE:
+      return action.text;
+    default:
+      return state;
+  }
+};
+
+const helloWorldReducer = combineReducers({ name });
+
+export default helloWorldReducer;
diff --git a/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx b/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import configureStore from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
+
+// See documentation for https://github.com/reactjs/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+// railsContext provides contextual information especially useful for server rendering, such as
+// knowing the locale. See the React on Rails documentation for more info on the railsContext
+const HelloWorldApp = (props, _railsContext) => (
+  <Provider store={configureStore(props)}>
+    <HelloWorldContainer />
+  </Provider>
+);
+
+export default HelloWorldApp;
diff --git a/client/app/bundles/HelloWorld/startup/registration.jsx b/client/app/bundles/HelloWorld/startup/registration.jsx
@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorldApp from './HelloWorldApp';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorldApp,
+});
diff --git a/client/app/bundles/HelloWorld/store/helloWorldStore.jsx b/client/app/bundles/HelloWorld/store/helloWorldStore.jsx
@@ -0,0 +1,8 @@
+import { createStore } from 'redux';
+import helloWorldReducer from '../reducers/helloWorldReducer';
+
+const configureStore = (railsProps) => (
+  createStore(helloWorldReducer, railsProps)
+);
+
+export default configureStore;
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "react-webpack-rails-tutorial",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": "6.9.0",
+    "npm": "4.1.1"
+  },
+  "scripts": {
+    "build:test": "NODE_ENV=test webpack --config webpack.config.js",
+    "build:production": "NODE_ENV=production webpack --config webpack.config.js",
+    "build:development": "NODE_ENV=development webpack -w --config webpack.config.js"
+  },
+  "cacheDirectories": ["node_modules", "client/node_modules"],
+  "dependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^6.3.2",
+    "babel-runtime": "^6.23.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "es5-shim": "^4.5.9",
+    "expose-loader": "^0.7.3",
+    "imports-loader": "^0.7.1",
+    "js-yaml": "^3.8.2",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-on-rails": "8.0.0-beta.2",
+    "react-redux": "^5.0.4",
+    "redux": "^3.6.0",
+    "webpack": "^2.3.3",
+    "webpack-manifest-plugin": "^1.1.0"
+  },
+  "devDependencies": {
+  }
+}
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -0,0 +1,69 @@
+/* eslint comma-dangle: ["error",
+ {"functions": "never", "arrays": "only-multiline", "objects":
+ "only-multiline"} ] */
+
+const webpack = require('webpack');
+const { resolve } = require('path');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+
+const configPath = resolve('..', 'config', 'webpack');
+const { env, paths, publicPath } = webpackConfigLoader(configPath);
+
+const devBuild = env !== 'production';
+
+const config = {
+
+  context: resolve(__dirname),
+
+  entry: [
+    'es5-shim/es5-shim',
+    'es5-shim/es5-sham',
+    'babel-polyfill',
+    './app/bundles/HelloWorld/startup/registration',
+  ],
+
+  output: {
+    filename: 'webpack-bundle.js',
+    path: resolve('..', paths.output, paths.assets),
+  },
+
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+
+
+  plugins: [
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: require.resolve('react'),
+        use: {
+          loader: 'imports-loader',
+          options: {
+            shim: 'es5-shim/es5-shim',
+            sham: 'es5-shim/es5-sham',
+          }
+        },
+      },
+      {
+        test: /\.jsx?$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+};
+
+module.exports = config;
+
+if (devBuild) {
+  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
+  module.exports.devtool = 'eval-source-map';
+} else {
+  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		web: rails s -p 3000
		client: sh -c 'rm -rf public/webpack/* \|\| true && cd client && bundle exec rake react_on_rails:locale && yarn run build:development'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<h1>Hello World</h1>
		<%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/* eslint-disable import/prefer-default-export */

		export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE';