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 app/assets/javascripts/application_dev.jsapp/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