Merge pull request shakacode#175 from shakacode/alex/client-babel-6-css-modules-rails-hot

Babel 6 / CSS Modules / Rails hot reloading

Author: alex35mil

.gitignore

@@ -27,7 +27,7 @@ vendor/ruby
 .ruby-gemset
 
 # Generated js bundles
-/app/assets/javascripts/generated/*
+/app/assets/webpack/
 
 # Rubymine/IntelliJ
 .idea

.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

Gemfile

@@ -87,6 +87,7 @@ end
 group :test  do
   gem "coveralls", require: false
   gem "rspec-rails"
+  gem "rspec-retry"
   gem "capybara"
   gem "capybara-screenshot"
   gem "selenium-webdriver"

Gemfile.lock

@@ -229,6 +229,8 @@ GEM
       rspec-expectations (~> 3.4.0)
       rspec-mocks (~> 3.4.0)
       rspec-support (~> 3.4.0)
+    rspec-retry (0.4.5)
+      rspec-core
     rspec-support (3.4.1)
     rubocop (0.35.1)
       astrolabe (~> 1.3)
@@ -350,6 +352,7 @@ DEPENDENCIES
   rails_12factor
   react_on_rails
   rspec-rails
+  rspec-retry
   rubocop
   ruby-lint
   sass-rails

Procfile.dev

@@ -1,4 +1,11 @@
 web: rails s
-client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
+
+# 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 && npm start'
+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.js renamed to app/assets/javascripts/application_dev.js

@@ -10,15 +10,14 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 
-// CRITICAL that generated/vendor-bundle must be BEFORE bootstrap-sprockets and turbolinks since it is
-// exposing jQuery and jQuery-ujs
-//= require generated/vendor-bundle
-//= require generated/app-bundle
+// All webpack assets in development will be loaded via webpack dev server
+// 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)
 
-// Next two depend on jQuery
+// This one depends on jQuery
 //= require turbolinks
-//= require bootstrap-sprockets
 
+// 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/assets/javascripts/application_prod.js

@@ -0,0 +1,13 @@
+// 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
+
+// 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
+
+// Non-webpack assets incl turbolinks
+//= require application_dev

app/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,2 @@
+// Any non webpack assets can be imported here
+// Others will be served via webpack-dev-server

app/assets/stylesheets/application.css.scss

@@ -0,0 +1,6 @@
+// These assets are located in app/assets/webpack directory
+@import 'vendor-bundle';
+@import 'app-bundle';
+
+// Non-webpack assets
+@import 'application_dev';

app/assets/stylesheets/application_dev.css.scss

@@ -1,2 +1,14 @@
 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
+  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
+  end
 end

app/assets/stylesheets/application_prod.css.scss

@@ -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/assets/stylesheets/scaffolds.css.scss

@@ -2,8 +2,10 @@
 <html>
 <head>
   <title>RailsReactTutorial</title>
-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', '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/helpers/application_helper.rb

@@ -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) %>

app/views/comments/show.html.erb

@@ -1,3 +1,3 @@
 {
-  "stage": 0
+  "presets": ["es2015", "stage-0", "react"]
 }