Fix testing issues with Rails hot reloading setup

Configured testing so that:
* If we're not running a webpack process to watch the client JS files,
  then we build the client or server files.
* Test will let you know if it's skipping building.

Expression used to see if a watch process is running:
`pgrep -fl '\\-w \\-\\-config webpack\\.#{type}\\.rails\\.build\\.config\\.js'`

* Renamed asset helpers so usage is like this:

  <%= 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 %>

TODO: Should we consider having tests use the Rails hot reload server?

Remove building bundles from install script

Since the new spec configuration does it.

Fix scss linter errors

Had to turn off SelectorFormat since css modules require JS style names.

Fix typo

Author: justin808

.scss-lint.yml

@@ -2,7 +2,9 @@
 
 scss_files:
   - 'app/assets/stylesheets/**/*.scss'
-  - 'client/assets/stylesheets/**/*.scss'
+  - 'client/app/**/*.scss'
+
+exclude: 'client/node_modules/**'
 
 linters:
 #  BangFormat:
@@ -132,8 +134,8 @@ linters:
 #    enabled: true
 #    max_depth: 3
 #
-#  SelectorFormat:
-#    enabled: true
+  SelectorFormat:
+    enabled: false
 #    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
 #
 #  Shorthand:

.travis.yml

@@ -18,8 +18,6 @@ install:
   - nvm install 5.0
   - nvm use 5.0
   - npm install
-  - cd client && npm run build:client
-  - npm run build:server
 before_script:
    - export DISPLAY=:99.0
    - sh -e /etc/init.d/xvfb start

Procfile.dev

@@ -1,4 +1,11 @@
 web: rails s
+
+# Run the hot reload server for client development
 client: sh -c 'rm app/assets/webpack/* || true && cd client && HOT_RAILS_PORT=3500 npm run build:dev:client'
+
+# Keep the JS fresh for specs
+client-spec: sh -c 'cd client && npm run build:test:client'
+
+# Keep the JS fresh for server rendering
 server: sh -c 'cd client && npm run build:dev:server'
 hot: sh -c 'cd client && HOT_PORT=4000 npm start'

README.md

@@ -127,11 +127,14 @@ Note that it's important to run the Rails server on a different port than the no
 
 # Webpack configuration
 ## Config Files
+
 - `webpack.client.base.config.js`: Common configuration file to minimize code duplication for client.rails and client.hot.
-- `webpack.client.rails.config.js`: Used to generate the Rails bundles for Rails use.
-- `webpack.client.hot.config.js`: Used by server.js to run the Webpack Dev server.
-- `webpack.server.rails.config.js`: Common configuration file to minimize code duplication
-between the HMR and Rails configurations.
+- `webpack.client.rails.build.config.js`: Client side js bundle.
+- `webpack.server.rails.build.config.js`: Server side js bundle
+
+These are used for hot reloading (Webpack Dev Server):
+- `webpack.client.rails.hot.config.js`: Used to generate the Rails bundles for Rails use so you get hot reloading within your Rails app.
+- `webpack.client.hot.config.js`: Used by server.js to run the Webpack Dev server for stubbing the api end points
 
 ## Webpack Resources
 - Good overview: [Pete Hunt's Webpack Howto](https://github.com/petehunt/webpack-howto)

app/assets/javascripts/application_dev.js

@@ -14,9 +14,10 @@
 // It's important to include them in layout view above this asset
 // b/c it exposes jQuery for turbolinks and another non-webpack JS (if any)
 
-// This one depend on jQuery
+// This one depends on jQuery
 //= require turbolinks
 
+// This will soon be removed as it will be in vendor-bundle with react_on_rails 2.0
 //= require react_on_rails
 
 //= require rails_startup

app/helpers/application_helper.rb

@@ -1,11 +1,14 @@
 module ApplicationHelper
-  def javascript_include_env_tag(asset, dev_asset, params = {})
-    asset_file = Rails.env.production? ? asset : dev_asset
+  # 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
   end
 
-  def stylesheet_link_env_tag(asset, dev_asset, params = {})
-    asset_file = Rails.env.production? ? asset : dev_asset
+  # 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
   end
 end

app/views/comments/show.html.erb

@@ -1,12 +1,12 @@
 <div class="comment">
   <p id="notice"><%= notice %></p>
 
-  <p>
+  <p class="js-comment-author">
     <strong>Author:</strong>
     <%= @comment.author %>
   </p>
 
-  <p>
+  <p class="js-comment-text">
     <strong>Text:</strong>
     <%= @comment.text %>
   </p>

app/views/layouts/application.html.erb

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>RailsReactTutorial</title>
-  <%= stylesheet_link_env_tag 'application_prod', 'application_dev', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_env_tag nil, 'http://localhost:3500/vendor-bundle.js' %>
-  <%= javascript_include_env_tag nil, 'http://localhost:3500/app-bundle.js' %>
-  <%= javascript_include_env_tag 'application_prod', 'application_dev', 'data-turbolinks-track' => true %>
+  <%= 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 %>
   <%= csrf_meta_tags %>
 </head>
 <body>

app/views/pages/no_router.html.erb

@@ -3,4 +3,4 @@
 <%= render "header" %>
 
 <%= react_component('App', render(template: "/comments/index.json.jbuilder"),
-    generator_function: true, prerender: true) %>
+    generator_function: true, prerender: false) %>

client/app/assets/styles/app-variables.scss

@@ -1,7 +1,7 @@
 // Defining application SASS variables in stand-alone file,
 // so we can use them in bootstrap-loader and CSS Modules via sass-resources-loader
-$body-bg: #eff8fb;                          // background w/ character
-$navbar-default-bg: #ffffe0;                // fancy yellow navbar
+$body-bg: #EFF8FB;                          // background w/ character
+$navbar-default-bg: #FFFFE0;                // fancy yellow navbar
 $font-size-base: 15px;                      // make it bigger!
 $font-family-sans-serif: 'OpenSans-Light';  // apply custom font
 

client/app/assets/styles/bootstrap-pre-customizations.scss

@@ -1,10 +1,10 @@
 // These variables get loaded BEFORE Bootstrap thus overriding them in Bootstrap.
-@import "./app-variables";
+@import './app-variables';
 
 // This path is relative to this file!
-$fonts-url-path: "../fonts";
+$fonts-url-path: '../fonts';
 
 @font-face {
-  font-family: "OpenSans-Light";
-  src: url("#{$fonts-url-path}/OpenSans-Light.ttf") format("truetype");
+  font-family: 'OpenSans-Light';
+  src: url('#{$fonts-url-path}/OpenSans-Light.ttf') format('truetype');
 }

client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.jsx

@@ -16,12 +16,12 @@ export default class Comment extends React.Component {
 
     return (
       <div className={css.comment}>
-        <h2 className={css.commentAuthor}>
+        <h2 className={`${css.commentAuthor} js-comment-author`}>
           {author}
         </h2>
         <span
           dangerouslySetInnerHTML={{ __html: rawMarkup }}
-          className="comment-text"
+          className="js-comment-text"
         />
       </div>
     );

client/app/bundles/comments/components/CommentScreen/CommentScreen.scss

@@ -3,15 +3,15 @@
 }
 
 .logo {
-  background: url(./images/railsonmaui.png) no-repeat left bottom;
+  background: url('./images/railsonmaui.png') no-repeat left bottom;
   display: inline-block;
   height: 40px;
   margin-right: 10px;
   width: 146px;
 }
 
 .twitterImage {
-  background: url(./images/twitter_64.png) no-repeat;
+  background: url('./images/twitter_64.png') no-repeat;
   height: 64px;
   width: 64px;
 }

client/package.json

@@ -28,9 +28,10 @@
     "test:debug": "npm run test -- --debug-brk",
     "start": "node server.js",
     "build:client": "NODE_ENV=production webpack --config webpack.client.rails.build.config.js",
-    "build:server": "NODE_ENV=production webpack --config webpack.server.rails.config.js",
+    "build:server": "NODE_ENV=production webpack --config webpack.server.rails.build.config.js",
     "build:dev:client": "babel-node server.rails.hot.js",
-    "build:dev:server": "webpack -w --config webpack.server.rails.config.js",
+    "build:dev:server": "webpack -w --config webpack.server.rails.build.config.js",
+    "build:test:client": "webpack -w --config webpack.client.rails.build.config.js",
     "lint": "npm run eslint && npm run jscs",
     "eslint": "eslint --ext .js,.jsx .",
     "jscs": "jscs --verbose ."

client/webpack.client.base.config.js

@@ -62,6 +62,7 @@ module.exports = {
       // React is necessary for the client rendering
       { test: require.resolve('react'), loader: 'expose?React' },
       { test: require.resolve('react-dom'), loader: 'expose?ReactDOM' },
+      { test: require.resolve('jquery-ujs'), loader: 'imports?jQuery=jquery' },
       { test: require.resolve('jquery'), loader: 'expose?jQuery' },
       { test: require.resolve('jquery'), loader: 'expose?$' },
 

client/webpack.server.rails.config.js renamed to client/webpack.server.rails.build.config.js

@@ -20,9 +20,6 @@ class Application < Rails::Application
     # config.i18n.load_path += Dir[Rails.root.join("my", "locales", "*.{rb,yml}").to_s]
     # config.i18n.default_locale = :de
 
-    # Add folder with webpack generated assets to assets.paths
-    config.assets.paths << Rails.root.join("app", "assets", "webpack")
-
     # For not swallow errors in after_commit/after_rollback callbacks.
     config.active_record.raise_in_transactional_callbacks = true
   end

config/application.rb

@@ -3,9 +3,12 @@
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = "1.0"
 
-# Add additional assets to the asset load path
-# Rails.application.config.assets.paths << Emoji.images_path
+# Add folder with webpack generated assets to assets.paths
+Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack")
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-Rails.application.config.assets.precompile += %w( application_*.*  )
+Rails.application.config.assets.precompile += %w(
+  application_*.*
+  server-bundle.js
+)

config/initializers/assets.rb

@@ -0,0 +1,10 @@
+# Testing
+
+1. `rake` runs the test suite
+2. To test production with precompiled assets: 
+
+```sh
+export SECRET_KEY_BASE=`rake secret`
+alias test-prod='rake assets:clobber && RAILS_ENV=production bin/rake assets:precompile \
+   && rails s -e production'
+```

docs/testing-deployment.md

@@ -15,10 +15,16 @@ namespace :assets do
   task :webpack do
     sh "cd client && npm run build:client"
     sh "cd client && npm run build:server"
+    sh "mkdir -p public/assets"
+
+    # Critical to manually copy non js/css assets to public/assets as we don't want to fingerprint them
+    sh "cp -rf app/assets/webpack/*.woff* app/assets/webpack/*.svg app/assets/webpack/*.ttf "\
+       "app/assets/webpack/*.eot* public/assets"
+
+    # TODO: We should be gzipping these
   end
 
   task :clobber do
-    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/client-bundle.js"
-    rm_rf "#{Rails.application.config.root}/app/assets/javascripts/generated/server-bundle.js"
+    rm_rf "#{Rails.application.config.root}/app/assets/webpack"
   end
 end

lib/tasks/assets.rake

@@ -33,7 +33,7 @@ if %w(development test).include? Rails.env
     # end
 
     SCSSLint::RakeTask.new do |t|
-      t.files = ["app/assets/stylesheets/", "client/assets/stylesheets/"]
+      t.files = ["app/assets/stylesheets/", "client/"]
     end
 
     desc "eslint"

lib/tasks/linters.rake

@@ -11,7 +11,13 @@
     "postinstall": "cd client && npm install",
     "test": "rspec && npm run test:client && npm run lint",
     "test:client": "(cd client && npm run test --silent)",
-    "lint": "(cd client && npm run lint --silent)"
+    "lint": "(cd client && npm run lint --silent)",
+    "build:clean": "rm app/assets/webpack/*",
+    "build:client": "(cd client && npm run build:client --silent)",
+    "build:server": "(cd client && npm run build:server --silent)",
+    "build:dev:client": "(cd client && npm run build:dev:client --silent)",
+    "build:dev:server": "(cd client && npm run build:dev:server --silent)",
+    "build:test:client": "(cd client && npm run build:test:client --silent)"
   },
   "repository": {
     "type": "git",

package.json

@@ -9,6 +9,6 @@ ruby-lint app config spec
 echo Linting with eslint and jscs
 (cd client && npm run lint)
 
-scss-lint client/assets/stylesheets/*.scss app/assets/stylesheets/*.scss
+scss-lint client/**/*.scss app/assets/stylesheets/*.scss
 
 echo Done linting with Rubocop, ruby-lint, eslint, jsrc, and slim-lint

scripts/lint

@@ -8,8 +8,8 @@
     include_context "Form Submitted", name: :name, text: :text
 
     scenario "comment is added" do
-      expect(page).to have_css(".comment", text: name)
-      expect(page).to have_css(".comment", text: text)
+      expect(page).to have_css(".js-comment-author", text: name)
+      expect(page).to have_css(".js-comment-text", text: text)
     end
   end
 

spec/features/shared/examples.rb

@@ -37,6 +37,9 @@
   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|

spec/rails_helper.rb

@@ -0,0 +1,32 @@
+# 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
+    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."
+      end
+    end
+  end
+
+  def self.build_all_assets
+    build_assets_for_type("client")
+    build_assets_for_type("server")
+    @checked_built_assets = true
+  end
+end