Merge pull request shakacode#203 from shakacode/rob/env-tag-helper-api-changes

Asset Tag Helpers API Change

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

@@ -1,5 +1,4 @@
-# Basic procfile running webpack to recreate the assets for tests with a watch process.
+# 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-spec: sh -c 'npm run build:test:client'
+rails-test: sh -c 'npm run build:test:client'

Procfile.static

@@ -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'

README.md

@@ -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,16 +95,17 @@ 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. **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.
 
-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 }) %>
   ```
+1. **Testing Mode**: When running tests, it is useful to run `foreman start -f Procfile.spec` in order to have webpack automatically recompile the static bundles. Rspec is configured to automatically check whether or not this process is running. If it is not, it will automatically rebuild the webpack bundle to ensure you are not running tests on stale client code. This is achieved via the ` config.include ReactOnRails::EnsureAssetsCompiled, type: :feature` line in the `rails_helper.rb` file. If you are using this project as an example and are not using RSpec, you may want to implement similar logic in your own project.
 
 # Webpack configuration
 ## Config Files
@@ -142,7 +143,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 +156,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

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

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

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

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

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

@@ -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_prod.css.scss renamed to app/assets/stylesheets/application_static.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/helpers/application_helper.rb

@@ -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.

app/views/layouts/application.html.erb

@@ -39,13 +39,13 @@
 Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }
 
 RSpec.configure do |config|
+  # Next line will ensure that assets are built if webpack -w is not running
+  config.include ReactOnRails::EnsureAssetsCompiled, type: :feature
+
   # config taken directly from RSpec example in the DatabaseCleaner README
   config.before(:suite) do
     DatabaseCleaner.strategy = :transaction
     DatabaseCleaner.clean_with :truncation
-
-    # Next line will ensure that assets are built if webpack -w is not running
-    EnsureAssetsCompiled.check_built_assets
   end
 
   config.around(:each) do |example|

docs/jquery-with-react-on-rails.md

@@ -1,32 +1,34 @@
 # TODO: Move to react_on_rails
-class EnsureAssetsCompiled
-  def self.check_built_assets
-    return if @checked_built_assets
-    build_all_assets
-  end
 
-  def self.running_webpack_watch?(type)
-    running = `pgrep -fl '\\-w \\-\\-config webpack\\.#{type}\\.rails\\.build\\.config\\.js'`
-    if running.present?
-      puts "Found process, so skipping rebuild => #{running.ai}"
-      return true
+module ReactOnRails
+  module EnsureAssetsCompiled
+    def self.check_built_assets
+      return if @checked_built_assets
+      build_assets_for_type("client")
+      build_assets_for_type("server")
+      @checked_built_assets = true
     end
-  end
 
-  def self.build_assets_for_type(type)
-    unless running_webpack_watch?(type)
-      build_output = `cd client && npm run build:#{type}`
-      if build_output =~ /error/i
-        fail "Error in building assets!\n#{build_output}"
-      else
-        puts "Webpack build completed."
+    def self.build_assets_for_type(type)
+      unless running_webpack_watch?(type)
+        build_output = `cd client && npm run build:#{type}`
+        if build_output =~ /error/i
+          fail "Error in building assets!\n#{build_output}"
+        else
+          puts "Webpack build completed."
+        end
+      end
+    end
+
+    def self.running_webpack_watch?(type)
+      running = `pgrep -fl '\\-w \\-\\-config webpack\\.#{type}\\.rails\\.build\\.config\\.js'`
+      if running.present?
+        puts "Found process, so skipping rebuild => #{running.ai}"
+        return true
       end
     end
-  end
 
-  def self.build_all_assets
-    build_assets_for_type("client")
-    build_assets_for_type("server")
-    @checked_built_assets = true
+    # Runs on require
+    check_built_assets
   end
 end