Merge pull request shakacode#244 from shakacode/updates-to-hot-reloading

Fixed up the Procfile.static and Procfile.hot

Author: justin808

Diff for: Procfile.hot

@@ -7,7 +7,7 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s
 
 # Run the hot reload server for client development
-rails-assets: sh -c 'npm run build:dev:client:once && HOT_RAILS_PORT=3500 npm run hot-assets'
+hot-assets: sh -c 'rm app/assets/webpack/* || true && HOT_RAILS_PORT=3500 npm run hot-assets'
 
 # Keep the JS fresh for server rendering. Remove if not server rendering
 rails-server-assets: sh -c 'npm run build:dev:server'

Diff for: Procfile.static

@@ -1,8 +1,8 @@
 # Run Rails without hot reloading (static assets).
-rails: rails s
+rails: REACT_ON_RAILS_ENV= rails s
 
 # Build client assets, watching for changes.
-rails-client-assets: sh -c 'npm run build:dev:client'
+rails-client-assets: rm app/assets/webpack/* || true && npm run build:dev:client
 
 # Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: sh -c 'npm run build:dev:server'
+rails-server-assets: npm run build:dev:server

Diff for: app/assets/javascripts/application_static.js renamed to app/assets/javascripts/application_static.js.erb

@@ -6,8 +6,11 @@
 // These assets are located in app/assets/webpack directory
 // CRITICAL that webpack/vendor-bundle must be BEFORE turbolinks
 // since it is exposing jQuery and jQuery-ujs
-//= require vendor-bundle
-//= require app-bundle
+
+<% if ENV["REACT_ON_RAILS_ENV"] != "HOT" %>
+  <% require_asset "vendor-bundle" %>
+  <% require_asset "app-bundle" %>
+<% end %>
 
 // Non-webpack assets incl turbolinks
 //= require application_non_webpack

Diff for: app/assets/stylesheets/application_static.scss

@@ -0,0 +1,12 @@
+// These assets are located in app/assets/webpack directory, and are generated ONLY when static
+// assets are prepared (not for hot reloading assets).
+
+// Super important: This file is loaded even for hot loading only, so we need to be sure
+// that we don't reference the static generated CSS files.
+<% unless ENV["REACT_ON_RAILS_ENV"] == "HOT" %>
+  @import 'vendor-bundle';
+  @import 'app-bundle';
+<% end %>
+
+// Non-webpack assets
+@import 'application_non_webpack';

Diff for: app/assets/stylesheets/application_static.scss.erb

@@ -8,7 +8,8 @@
                               media: 'all',
                               'data-turbolinks-track' => true)  %>
 
-  <!-- These do not use turbolinks -->
+  <!-- These do not use turbolinks, so no data-turbolinks-track -->
+  <!-- This is to load the hot assets. -->
   <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
                                        'http://localhost:3500/app-bundle.js']) %>
 

Diff for: app/views/layouts/application.html.erb

@@ -16,6 +16,8 @@ module.exports = {
     // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
     vendor: [
       'babel-polyfill',
+      'es5-shim/es5-shim',
+      'es5-shim/es5-sham',
       'jquery',
     ],
 

Diff for: client/webpack.client.base.config.js

@@ -15,9 +15,8 @@ config.entry.app.push(
   'webpack/hot/only-dev-server'
 );
 
+// These are Rails specific
 config.entry.vendor.push(
-  'es5-shim/es5-shim',
-  'es5-shim/es5-sham',
   'jquery-ujs',
   'bootstrap-loader'
 );

Diff for: client/webpack.client.rails.hot.config.js

@@ -2,7 +2,7 @@
 
 jQuery and jQuery-ujs are not required within `app/assets/javascript/application.js` and have been moved under`/client` and are managed by npm. The modules are exposed via entry point by [client/webpack.client.base.config.js](client/webpack.client.base.config.js) and, for `jquery-ujs`, in the [client/webpack.client.rails.build.config.js](client/webpack.client.rails.build.config.js) and the [client/webpack.client.rails.hot.config.js](client/webpack.client.rails.hot.config.js).
 
-In `application_non_webpack.js` and `application_static.js`, it's critical that any libraries that depend on jQuery come after the inclusion
+In `application_non_webpack.js` and `application_static.js.erb`, it's critical that any libraries that depend on jQuery come after the inclusion
 of the Webpack bundle.
 
 Please refer to [Considerations for jQuery with Rails and Webpack](http://forum.shakacode.com/t/considerations-for-jquery-with-rails-and-webpack/344) for further info.