shakacode · justin808 · May 19, 2017 · May 19, 2017
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,9 @@ node_modules
 
 # Generated js bundles
 /public/assets/webpack/*
+# React on Rails
+npm-debug.log*
+node_modules
+
+# Generated js bundles
+/public/webpack/*
diff --git a/Gemfile b/Gemfile
@@ -56,3 +56,5 @@ end
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 gem 'mini_racer', platforms: :ruby
+
+
diff --git a/Procfile.dev b/Procfile.dev
@@ -1,2 +1,2 @@
 web: rails s -p 3000
-client: sh -c 'yarn run build:dev:client'
+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
@@ -1,4 +1,6 @@
 class HelloWorldController < ApplicationController
+  layout "hello_world"
+
   def index
     @hello_world_props = { name: "Stranger" }
   end

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:contact@shakacode.com).
+* [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/components/HelloWorld.jsx b/client/app/bundles/HelloWorld/components/HelloWorld.jsx
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class HelloWorld extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired, // this is passed from the Rails view
+  };
+
+  /**
+   * @param props - Comes from your rails view.
+   * @param _railsContext - Comes from React on Rails
+   */
+  constructor(props, _railsContext) {
+    super(props);
+
+    // How to set initial state in ES6 class syntax
+    // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
+    this.state = { name: this.props.name };
+  }
+
+  updateName = (name) => {
+    this.setState({ name });
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>
+          Hello, {this.state.name}!
+        </h3>
+        <hr />
+        <form >
+          <label htmlFor="name">
+            Say hello to:
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={this.state.name}
+            onChange={(e) => this.updateName(e.target.value)}
+          />
+        </form>
+      </div>
+    );
+  }
+}
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 HelloWorld from '../components/HelloWorld';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,37 @@
+{
+  "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",
+    "install-react-on-rails": "rm -rf node_modules/react-on-rails && npm i 'file:../../react_on_rails'"
+  },
+  "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": "file:../../react_on_rails",
+    "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,74 @@
+/* eslint comma-dangle: ["error",
+ {"functions": "never", "arrays": "only-multiline", "objects":
+ "only-multiline"} ] */
+
+const webpack = require('webpack');
+const { resolve } = require('path');
+const { env } = require('process');
+
+const ManifestPlugin = require('webpack-manifest-plugin');
+const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
+
+const configPath = resolve('..', 'config');
+const { devBuild, manifest, webpackOutputPath } = webpackConfigLoader(configPath);
+
+console.log("ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ");
+console.log("manifest, webpackOutputPath", manifest, webpackOutputPath);
+console.log("ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ");
+
+
+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: webpackOutputPath,
+  },
+
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+
+
+  plugins: [
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new ManifestPlugin({ fileName: manifest, 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
Expand Up		@@ -56,3 +56,5 @@ end
		gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

		gem 'mini_racer', platforms: :ruby