Update to Webpack v2 and Yarn (#336)

.travis.yml

@@ -27,6 +27,7 @@ install:
   - chromedriver-update
   - nvm install stable && nvm alias default stable
   - npm install npm@latest -g
+  - npm install -g yarn
   - npm --version
   - npm install
   - rake react_on_rails:locale

Procfile.dev

@@ -7,10 +7,10 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 npm run hot-assets'
+hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
 
 # Render static client assets
-rails-static-client-assets: sh -c 'npm run build:dev:client'
+rails-static-client-assets: sh -c 'yarn run build:dev:client'
 
 # Render static client assets. Remove if not server rendering
-rails-static-server-assets: sh -c 'npm run build:dev:server'
+rails-static-server-assets: sh -c 'yarn run build:dev:server'

Procfile.express

@@ -11,4 +11,4 @@
 # 3. React on Rails does not have a shared_store JS rendering:
 #    https://github.com/shakacode/react_on_rails/issues/504
 
-express: sh -c 'HOT_PORT=4000 npm start'
+express: sh -c 'HOT_PORT=4000 yarn start'

Procfile.hot

@@ -6,7 +6,7 @@
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 npm run hot-assets'
+hot-assets: sh -c 'rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && HOT_RAILS_PORT=3500 yarn run hot-assets'
 
 # Keep the JS fresh for server rendering. Remove if not server rendering
-rails-server-assets: sh -c 'npm run build:dev:server'
+rails-server-assets: sh -c 'yarn run build:dev:server'

Procfile.spec

@@ -3,7 +3,7 @@
 # in rails_helper.rb.
 
 # Build client assets, watching for changes.
-rails-client-assets: sh -c 'bundle exec rake react_on_rails:locale && npm run build:dev:client'
+rails-client-assets: sh -c 'bundle exec rake react_on_rails:locale && yarn run build:dev:client'
 
 # Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: sh -c 'npm run build:dev:server'
+rails-server-assets: sh -c 'yarn run build:dev:server'

Procfile.static

@@ -2,7 +2,7 @@
 rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
 
 # Build client assets, watching for changes.
-rails-client-assets: rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && npm run build:dev:client
+rails-client-assets: rm app/assets/webpack/* || true && bundle exec rake react_on_rails:locale && yarn run build:dev:client
 
 # Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: npm run build:dev:server
+rails-server-assets: yarn run build:dev:server

Procfile.static.trace

@@ -2,7 +2,7 @@
 rails: TRACE_REACT_ON_RAILS=TRUE rails s -b 0.0.0.0
 
 # Build client assets, watching for changes.
-rails-client-assets: bundle exec rake react_on_rails:locale && npm run build:dev:client
+rails-client-assets: bundle exec rake react_on_rails:locale && yarn run build:dev:client
 
 # Build server assets, watching for changes. Remove if not server rendering.
-rails-server-assets: npm run build:dev:server
+rails-server-assets: yarn run build:dev:server

README.md

@@ -1,6 +1,6 @@
 [![Codeship Build Status](https://codeship.com/projects/287b26d0-0c05-0133-7a33-02e67aca5f06/status?branch=master)](https://app.codeship.com/projects/90975) [![Build Status](https://travis-ci.org/shakacode/react-webpack-rails-tutorial.svg?branch=code_coverage-linting)](https://travis-ci.org/shakacode/react-webpack-rails-tutorial) [![Dependency Status](https://gemnasium.com/shakacode/react-webpack-rails-tutorial.svg)](https://gemnasium.com/shakacode/react-webpack-rails-tutorial) [![Code Climate](https://codeclimate.com/github/shakacode/react-webpack-rails-tutorial/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react-webpack-rails-tutorial) [![Coverage Status](https://coveralls.io/repos/shakacode/react-webpack-rails-tutorial/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react-webpack-rails-tutorial?branch=master)
 
-Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please [contact me](mailto:[email protected]) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information. 
+Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please [contact me](mailto:[email protected]) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.
 
 I'm offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
 
@@ -26,7 +26,7 @@ Please [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep i
 **[React on Rails](https://github.com/shakacode/react_on_rails)** is ShakaCode's flagship product. We want to make sure you're aware of it!
 
 ### Testimonials
-From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017: 
+From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
 ![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)
 
 For more testimonials, see [Live Projects](https://github.com/shakacode/react_on_rails/blob/master/PROJECTS.md) and [Kudos](https://github.com/shakacode/react_on_rails/blob/master/KUDOS.md).
@@ -120,7 +120,8 @@ See package.json and Gemfile for versions
 1. Check that you have Postgres installed. Run `which postgres` to check. Use 9.4 or greater.
 1. Check that you have `qmake` installed. Run `which qmake` to check. If missing, follow these instructions: [Installing Qt and compiling capybara-webkit](https://github.com/thoughtbot/capybara-webkit/wiki/Installing-Qt-and-compiling-capybara-webkit)
 1. `bundle install`
-1. `npm install`
+1. `npm install -g yarn`
+1. `yarn`
 1. `rake db:setup`
 1. `foreman start -f Procfile.hot`
   1. Open a browser tab to http://localhost:3000 for the Rails app example with HOT RELOADING
@@ -162,7 +163,7 @@ Save a change to a JSX file and see it update immediately in the browser! Note,
       ```
 + **Development Mode**: Two flavors: Hot reloading assets (JavaScript & CSS) and Static loading.
    + **Hot Loading**: 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) use precompiled files. See `Procfile.hot`. `Procfile.dev` also starts this mode. Note, *you don't have to refresh a Rails web page to view changes to JavaScript or CSS*.
-  
+
    + **Static Loading**: This uses webpack to create physical files of the assets, both JavaScript and CSS. This is essentially what we had before we enabled *Hot Loading*. You have to *refresh* the page to see changes to JavaScript or CSS. See `Procfile.static`. It is important to note that tests will use the same statically generated files.
 
       + Note, the following view helpers do the magic to make this work:
@@ -274,5 +275,3 @@ We're offering a free half-hour project consultation, on anything from React on
 Whether you have a new project or need help on an existing project, feel free to contact me directly at [[email protected]](mailto:[email protected]) and thanks in advance for any referrals!
 
 Your support keeps this project going.
-
-

client/README.md

@@ -18,49 +18,39 @@ It also includes many eslint defaults that the AirBnb eslint does not include.
 Running linter:
 ===========================
 
-Soon to be in gulpfile....but gulp-eslint depends on eslint depends on 
+Soon to be in gulpfile....but gulp-eslint depends on eslint depends on
 
 ```
     "eslint-plugin-react": "^2.0.2",
 ```
 
-So don't use `npm run gulp lint` yet. 
+So don't use `yarn run gulp lint` yet.
 
-For now: 
+For now:
 
     bin/lint
-    
+
 Or (from either top level or within `client` directory)
 
-    npm run lint
-    
-    
+    yarn run lint
+
+
 Updating Node Dependencies
 ===========================
 
 ```
-npm install -g npm-check-updates
+yarn global add npm-check-updates
 ```
- 
+
 Then run this to update the dependencies (starting at the top level).
 
 ```
 # Make sure you are in the top directory, then run:
-cd client 
-rm npm-shrinkwrap.json
-npm-check-updates -u
-npm install
-npm prune
-npm shrinkwrap
+cd client
+ncu -u
+yarn upgrade
 ```
 
-Then confirm that the hot reload server and the rails server both work fine. You
-may have to delete `node_modules` and `npm-shrinkwrap.json` and then run `npm
-shrinkwrap`.
-
-Note: `npm prune` is required before running `npm shrinkwrap` to remove dependencies that are no longer needed after doing updates.
-
-
 Adding Node Modules
 =====================================
 Suppose you want to add a dependency to "module_name"....
@@ -72,9 +62,5 @@ Before you do so, consider:
 
 ```bash
 cd client
-npm install --save module_name@version
-# or 
-# npm install --save_dev module_name@version
-rm npm-shrinkwrap.json
-npm shrinkwrap
+yarn add module_name@version
 ```