Change env_javascript_include_tag and env_stylesheet_link_tag API and rename application_prod and dev to static and hot

Author: robwise

Procfile.dev

@@ -4,15 +4,17 @@
 
 # Development rails requires both rails and rails-assets
 # (and rails-server-assets if server rendering)
-rails: rails s
+rails: REACT_ON_RAILS_ENV=HOT rails s
+
 # Run the hot reload server for client development
 rails-assets: sh -c 'rm app/assets/webpack/* || true && HOT_RAILS_PORT=3500 npm run build:dev:client'
+
 # Keep the JS fresh for server rendering. Remove if not server rendering
 rails-server-assets: sh -c 'npm run build:dev:server'
 
 # If you don't keep this process going, you will rebuild the assets per spec run. This is configured
 # in rails_helper.rb.
-rails-spec: sh -c 'npm run build:test:client'
+rails-test: sh -c 'npm run build:test:client'
 
 # Run an express server if you want to mock out your endpoints. No Rails involved!
 # Disable this if you are not using it.

Procfile.express

@@ -1,4 +1,3 @@
-# Basic procfile for express server dev work.
 # Only run the express server!
 # Use this if you want to mock out your endpoints.
 # It's a great way to prototype UI especially with non-Rails developers!

Procfile.rails renamed to Procfile.hot

@@ -1,11 +1,13 @@
-# Basic procfile for dev work using Rails
+# Basic procfile for dev work.
+# Runs all processes. Development is faster if you pick one of the other Procfiles if you don't need
+# some of the processes: Procfile.rails or Procfile.express
+
 # Development rails requires both rails and rails-assets
 # (and rails-server-assets if server rendering)
-# You can still run tests, and they will build the webpack file for each test run.
-# Start another shell and run the Procfile.spec to make test runs faster.
+rails: REACT_ON_RAILS_ENV=HOT rails s
 
-rails: rails s
 # Run the hot reload server for client development
 rails-assets: sh -c 'rm app/assets/webpack/* || true && HOT_RAILS_PORT=3500 npm run build:dev:client'
+
 # Keep the JS fresh for server rendering. Remove if not server rendering
 rails-server-assets: sh -c 'npm run build:dev:server'

Procfile.spec

@@ -0,0 +1,5 @@
+# Run Rails without hot reloading (static assets)
+rails: rails s
+
+# Keep the JS fresh for server rendering. Remove if not server rendering
+rails-server-assets: sh -c 'npm run build:dev:server'

Procfile.static

@@ -0,0 +1,4 @@
+# For keeping webpack bundles up-to-date during a testing workflow.
+# If you don't keep this process going, you will rebuild the assets per spec run. This is configured
+# in rails_helper.rb.
+rails-test: sh -c 'npm run build:test:client'

Procfile.test

@@ -75,7 +75,7 @@ See package.json and Gemfile for versions
 1. Open a browser tab to http://localhost:3000 for the Rails app example.
 1. Open a browser tab to http://localhost:4000 for the Hot Module Replacement Example.
 1. With the browser open to any JSX file, such as [client/app/bundles/comments/components/CommentBox/CommentBox.jsx](client/app/bundles/comments/components/CommentBox/CommentBox.jsx) and you can change the JSX code, hit save, and you will see the sceen update without refreshing the window. This applies to port 3000 and port 4000.
-1. Try changing a `.scss` file, such as a color in [client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss](client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss). You can see port 3000 or 4000 update automatically. 
+1. Try changing a `.scss` file, such as a color in [client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss](client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.scss). You can see port 3000 or 4000 update automatically.
 
 # KEY COMMANDS
 1. Run all linters and tests: `rake ci`
@@ -95,15 +95,15 @@ Save a change to a JSX file and see it update immediately in the browser! Note,
 # Rails integration
 
 ## JS and CSS assets
-We're now using Webpack for all Sass and JavaScript assets so we can do CSS Modules within Rails! 
+We're now using Webpack for all Sass and JavaScript assets so we can do CSS Modules within Rails!
 
-1. **Production Deployment**: See [assets.rake](lib/tasks/assets.rake) for we modify the Rails precompile task to deploy assets for production. 
+1. **Production Deployment**: See [assets.rake](lib/tasks/assets.rake) for we modify the Rails precompile task to deploy assets for production.
 2. **Development mode**: We modify the URL in [application.html.erb](app/views/layouts/application.html.erb) based on whether or not we're in production mode using the helpers `env_stylesheet_link_tag` and `env_javascript_include_tag`. *Development mode* uses the Webpack Dev server running on port 3500. Other modes (production/test) uses precompiled files.
+
   ```erb
-  <%= env_stylesheet_link_tag 'application_prod', 'application_dev', media: 'all', 'data-turbolinks-track' => true  %>
-  <%= env_javascript_include_tag nil, 'http://localhost:3500/vendor-bundle.js' %>
-  <%= env_javascript_include_tag nil, 'http://localhost:3500/app-bundle.js' %>
-  <%= env_javascript_include_tag 'application_prod', 'application_dev', 'data-turbolinks-track' => true %>
+  <%= env_stylesheet_link_tag(static: 'application_static', hot: 'application_non_webpack', options: { media: 'all', 'data-turbolinks-track' => true })  %>
+  <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js', 'http://localhost:3500/app-bundle.js']) %>
+  <%= env_javascript_include_tag(static: 'application_static', hot: 'application_non_webpack', options: { 'data-turbolinks-track' => true }) %>
   ```
 
 # Webpack configuration
@@ -142,7 +142,7 @@ export default class CommentBox extends React.Component {
 ```
 
 ## Sass and fonts
-The tutorial makes use of a custom font OpenSans-Light. We're doing this to show how to add assets for the CSS processing. The font files are located under [client/app/assets/fonts](client/app/assets/fonts) and are loaded by both the Rails asset pipeline and the Webpack HMR server. 
+The tutorial makes use of a custom font OpenSans-Light. We're doing this to show how to add assets for the CSS processing. The font files are located under [client/app/assets/fonts](client/app/assets/fonts) and are loaded by both the Rails asset pipeline and the Webpack HMR server.
 
 # Process management
 Run the following command in your development environment to invoke both Webpack and Rails.
@@ -155,7 +155,7 @@ bundle exec foreman start -f Procfile.dev
 
 Notable contributions include (please submit PR if I miss any!):
 
-* [Justin Gordon](https://github.com/justin808/): Started this, leads this 
+* [Justin Gordon](https://github.com/justin808/): Started this, leads this
 * [Alex Fedoseev](https://github.com/alexfedoseev): Added integration of Rails hot loading and CSS modules, plus much more
 * [Martin Breining](https://github.com/mbreining): For adding flux at first
 * [Dylan Grafmyre](https://github.com/Dgrafmyre): For ci setup

README.md

@@ -10,4 +10,4 @@
 //= require app-bundle
 
 // Non-webpack assets incl turbolinks
-//= require application_dev
+//= require application_non_webpack

app/assets/javascripts/application_dev.js renamed to app/assets/javascripts/application_non_webpack.js

@@ -3,4 +3,4 @@
 @import 'app-bundle';
 
 // Non-webpack assets
-@import 'application_dev';
+@import 'application_non_webpack';

app/assets/javascripts/application_prod.js renamed to app/assets/javascripts/application_static.js

@@ -1,14 +1,25 @@
 module ApplicationHelper
   # TODO: MOVE TO helper in react_on_rails
   # See application.html.erb for usage example
-  def env_javascript_include_tag(prod_asset, dev_asset, params = {})
-    asset_file = !Rails.env.development? ? prod_asset : dev_asset
-    return javascript_include_tag(asset_file, params) if asset_file
+  def env_javascript_include_tag(args = {})
+    send_tag_method(:javascript_include_tag, args)
   end
 
   # TODO: MOVE TO helper in react_on_rails
-  def env_stylesheet_link_tag(prod_asset, dev_asset, params = {})
-    asset_file = !Rails.env.development? ? prod_asset : dev_asset
-    return stylesheet_link_tag(asset_file, params) if asset_file
+  def env_stylesheet_link_tag(args = {})
+    send_tag_method(:stylesheet_link_tag, args)
+  end
+
+  def use_hot_reloading?
+    ENV["REACT_ON_RAILS_ENV"] == "HOT"
+  end
+
+  private
+
+  def send_tag_method(tag_method_name, args)
+    asset_type = use_hot_reloading? ? :hot : :static
+    assets = Array(args[asset_type])
+    options = args.delete_if { |key, _value| %i(hot static).include?(key) }
+    send(tag_method_name, *assets, options) unless assets.empty?
   end
 end

app/assets/stylesheets/application_dev.css.scss renamed to app/assets/stylesheets/application_non_webpack.scss

@@ -2,10 +2,17 @@
 <html>
 <head>
   <title>RailsReactTutorial</title>
-  <%= env_stylesheet_link_tag 'application_prod', 'application_dev', media: 'all', 'data-turbolinks-track' => true  %>
-  <%= env_javascript_include_tag nil, 'http://localhost:3500/vendor-bundle.js' %>
-  <%= env_javascript_include_tag nil, 'http://localhost:3500/app-bundle.js' %>
-  <%= env_javascript_include_tag 'application_prod', 'application_dev', 'data-turbolinks-track' => true %>
+  <%= env_stylesheet_link_tag(static: 'application_static',
+                              hot: 'application_non_webpack',
+                              media: 'all',
+                              'data-turbolinks-track' => true)  %>
+  <!-- These do not use turbolinks -->
+  <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
+                                       'http://localhost:3500/app-bundle.js']) %>
+  <!-- These do use turbolinks -->
+  <%= env_javascript_include_tag(static: 'application_static',
+                                 hot: 'application_non_webpack',
+                                 'data-turbolinks-track' => true) %>
   <%= csrf_meta_tags %>
 </head>
 <body>

app/assets/stylesheets/application_prod.css.scss renamed to app/assets/stylesheets/application_static.scss

@@ -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_dev.js` and `application_prod.js`, it's critical that any libraries that depend on jQuery come after the inclusion
+In `application_non_webpack.js` and `application_static.js`, 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.