HMR to DLL

todo-app-production/.gitignore

@@ -25,4 +25,5 @@ npm-debug.log*
 node_modules
 
 # Generated js bundles
-/app/assets/webpack/*
+/app/assets/webpack/
+/app/assets/webpack-dll/

todo-app-production/Procfile.dev

@@ -1,4 +1,3 @@
 # https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server
-puma: REACT_ON_RAILS_ENV=HOT PORT=3000 bundle exec puma -C config/puma.rb
-webpack-hmr: rm app/assets/webpack/* || true && cd client && HOT_RAILS_PORT=3500 yarn start
-# webpack-server-bundle: cd client && yarn run build:server-bundle:dev:watch
+puma: PORT=3000 bundle exec puma -C config/puma.rb
+webpack-client-bundles: cd client && yarn start

todo-app-production/app/assets/javascripts/application.js

@@ -1,14 +1,7 @@
-// NOT USED
+// This file is used in production to server generated JS assets. In development mode, we use the Webpack Dev Server
+// to provide assets. This allows for hot reloading of the JS and CSS.
+// See app/helpers/application_helper.rb for how the correct assets file is picked based on the Rails environment.
+// Those helpers are used here: app/views/layouts/application.html.erb
 
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file. JavaScript code in this file should be added after the last require_* statement.
-//
-// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
-// about supported directives.
-//
+// This asset is located in app/assets/webpack-dll directory
+//= require vendor-client-bundle

todo-app-production/app/assets/stylesheets/application.scss

@@ -0,0 +1,3 @@
+// Webpack styles
+@import "vendor-client-bundle.css";
+@import "global-styles-client-bundle.css";

todo-app-production/app/helpers/application_helper.rb

@@ -1,3 +1,6 @@
 #:nodoc:
 module ApplicationHelper
+  def dry_run?
+    ENV["DRY_RUN"] == "true"
+  end
 end

todo-app-production/app/views/layouts/application.html.erb

@@ -9,14 +9,8 @@
       puts "ENV['REACT_ON_RAILS_ENV'] = #{ENV['REACT_ON_RAILS_ENV']}"
       puts "ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ"
     %>
-    <%= env_javascript_include_tag(hot: "http://lvh.me:3500/vendor-client-bundle.js") %>
-    <%= env_javascript_include_tag(hot: "http://lvh.me:3500/global-styles-client-bundle.js") %>
-    <%= env_stylesheet_link_tag(static: "application_static",
-                              media: "all",
-                              "data-turbolinks-track" => true) %>
-    <%= env_javascript_include_tag(static: "application_static",
-                                 hot: "application_hot",
-                                 "data-turbolinks-track" => true) %>
+    <%= stylesheet_link_tag("application", media: "all", "data-turbolinks-track" => true) %>
+    <%= javascript_include_tag("application", "data-turbolinks-track" => true) %>
     <!-- bundles yield their stylesheets and javascript here -->
     <%= yield :head %>
   </head>

todo-app-production/client/app/bundles/todosIndex/containers/AddTodoFormContainer.jsx

@@ -5,6 +5,6 @@ import AddTodoForm from '../components/AddTodoForm';
 import { editAddTodoForm } from '../actions/forms';
 import { addTodo } from '../actions/todos';
 
-const mapStateToProps = state => ({ text: state.AddTodoForm });
+const mapStateToProps = state => ({ text: state.addTodoForm });
 
 export default connect(mapStateToProps, { editAddTodoForm, addTodo })(AddTodoForm);

todo-app-production/client/app/bundles/todosIndex/reducers/index.js

@@ -14,7 +14,7 @@ import type { State as errorsState } from './errorsReducer';
 export type State = {
   todos: todosState,
   tempTodos: tempTodosState,
-  AddTodoForm: addTodoFormState,
+  addTodoForm: addTodoFormState,
   errors: errorsState,
 };
 

todo-app-production/client/package.json

@@ -18,24 +18,33 @@
     "build:all:prod": "yarn run build:client-bundles:prod & yarn run build:server-bundle:prod; wait",
     "build:all:rspec": "yarn run build:client-bundles:rspec & yarn run build:server-bundle:rspec; wait",
     "build:all:rspec:watch": "yarn run build:client-bundles:rspec:watch & yarn run build:server-bundle:rspec:watch; wait",
+    "build:client-bundles:dev:watch": "scripts/build:client-bundles:dev:watch",
     "build:client-bundles:prod": "scripts/build:client-bundles:prod",
     "build:client-bundles:rspec": "scripts/build:client-bundles:rspec",
-    "build:client-bundles:rspec:watch": "yarn run build:client-bundles:rspec -- --watch",
+    "build:client-bundles:rspec:watch": "scripts/build:client-bundles:rspec:watch",
+    "build:dll": "scripts/build:dll",
     "build:server-bundle:prod": "scripts/build:server-bundle:prod",
     "build:server-bundle:dev": "NODE_ENV=dev webpack --env.serverBundleDev --config webpack.config.babel.js",
     "build:server-bundle:dev:watch": "yarn run build:server-bundle:dev -- --watch",
     "build:server-bundle:rspec": "scripts/build:server-bundle:rspec",
     "build:server-bundle:rspec:watch": "yarn run build:server-bundle:rspec -- --watch",
     "check": "yarn run flow && yarn run test && yarn run lint",
+    "clear:assets": "rm -rf ../app/assets/webpack/*",
+    "clear:dll": "rm -rf ../app/assets/webpack-dll/*",
+    "clear:all": "yarn run clear:assets && yarn run clear:dll",
     "flow": "flow",
     "flow:all": "flow --show-all-errors",
-    "flow:update": "flow-typed update",
+    "flow:up": "rm -rf flow-typed && flow-typed install",
     "lint": "eslint --ext .js,.jsx .",
-    "prepush": "opt --in front-end-checks --exec 'npm run front-end-checks' && opt --in back-end-checks --exec 'npm run back-end-checks' && opt --in all-checks --exec 'npm run all-checks'",
-    "start": "NODE_ENV=dev babel-node server.js",
+    "postinstall": "yarn run build:dll",
+    "postuninstall": "yarn run build:dll",
+    "prod": "yarn run clear:all && yarn run build:client-bundles:prod:watch",
+    "start": "yarn run clear:assets && yarn run build:client-bundles:dev:watch",
     "storybook": "NODE_ENV=test start-storybook -p 9001 -c .storybook",
     "test": "NODE_ENV=test jest .*\\.test\\.js",
-    "test:watch": "yarn run test -- --watch"
+    "test:watch": "yarn run test -- --watch",
+    "up": "rm -rf node_modules && yarn",
+    "up:no-cache": "rm -rf node_modules && yarn cache clean && yarn"
   },
   "cacheDirectories": [
     "node_modules",
@@ -94,10 +103,8 @@
     "@kadira/storybook": "^2.35.3",
     "babel-jest": "^19.0.0",
     "babel-plugin-flow-react-proptypes": "^0.21.0",
-    "babel-plugin-react-transform": "2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.3.2",
     "babel-plugin-typecheck": "3.9.0",
-    "babel-preset-react-hmre": "1.1.1",
     "eslint": "^3.17.1",
     "eslint-config-shakacode": "^14.1.1",
     "eslint-import-resolver-webpack": "^0.8.0",
@@ -112,20 +119,16 @@
     "iflow-immutable": "1.0.32",
     "iflow-react-router": "^1.2.1",
     "iflow-redux-logger": "1.0.15",
-    "iflow-redux-thunk": "1.0.15",
     "jest": "^19.0.2",
     "jest-junit": "^1.3.0",
     "react-addons-perf": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",
-    "react-hot-loader": "3.0.0-beta.2",
     "react-test-renderer": "^15.4.2",
-    "react-transform-hmr": "1.0.4",
     "redux-devtools": "^3.3.2",
     "redux-devtools-chart-monitor": "^1.6.1",
     "redux-devtools-diff-monitor": "^5.0.5",
     "redux-devtools-dock-monitor": "^1.1.1",
-    "redux-logger": "^2.8.2",
-    "webpack-dev-server": "^2.4.1"
+    "redux-logger": "^2.8.2"
   },
   "peerDependencies": {
     "@kadira/storybook-addons": "^1.3.0"

todo-app-production/client/scripts/build:client-bundles:dev:watch

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+NODE_ENV=dev \
+$(yarn bin)/webpack \
+  --env=dev \
+  --config webpack.config.babel.js \
+  --watch

todo-app-production/client/scripts/build:client-bundles:prod

@@ -2,5 +2,5 @@
 
 NODE_ENV=production \
 $(yarn bin)/webpack \
-  --env.prod \
+  --env=prod \
   --config webpack.config.babel.js

todo-app-production/client/scripts/build:client-bundles:prod:watch

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+NODE_ENV=production \
+$(yarn bin)/webpack \
+  --env=prod \
+  --config webpack.config.babel.js \
+  --watch

todo-app-production/client/scripts/build:client-bundles:rspec

@@ -2,5 +2,5 @@
 
 NODE_ENV=test \
 $(yarn bin)/webpack \
-  --env.rspec \
+  --env=rspec \
   --config webpack.config.babel.js

todo-app-production/client/scripts/build:client-bundles:rspec:watch

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+NODE_ENV=test \
+$(yarn bin)/webpack \
+  --env=rspec \
+  --config webpack.config.babel.js \
+  --watch