Switch to yarn and Webpack v2 for default generators

.bookignore

@@ -9,7 +9,6 @@ spec/*
 
 # files in repo root to ignore
 Gemfile
-npm-shrinkwrap.json
 package.json
 Rakefile
 react_on_rails.gemspec

.gitignore

@@ -24,6 +24,8 @@ node_modules
 
 /node_package/lib
 
+yarn-debug.*
+spec/dummy/client/yarn-debug.log*
 npm-debug.*
 spec/dummy/client/npm-debug.log*
 

.travis.yml

@@ -2,6 +2,8 @@ sudo: required
 
 language: ruby
 
+cache: yarn
+
 rvm:
   - 2.3.1
 
@@ -33,8 +35,7 @@ before_install:
 install:
   - nvm install node
   - node -v
-  - npm config set spin false
-  - npm install
+  - yarn
   - bundle install
   - rake dummy_apps
   - rake examples

CONTRIBUTING.md

@@ -33,12 +33,12 @@ From [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/
 * After updating code via git, to prepare all examples and run all tests:
 
 ```
-bundle && npm i && rake examples:prepare_all && rake node_package && rake
+bundle && yarn && rake examples:prepare_all && rake node_package && rake
 ```
 
 In order to run tests in browser
 ```
-npm i -g browserify babelify tape-run faucet
+yarn global add  browserify babelify tape-run faucet
 browserify -t babelify node_package/tests/*.js | tape-run | faucet
 ```
 
@@ -74,19 +74,19 @@ Note that you will need to bundle install after making this change, but also tha
 First, be **sure** to build the NPM package
 
 ```sh
-npm i
-npm run build
+yarn
+yarn run build
 ```
 
 Use a relative path in your `package.json`, like this:
 ```sh
 cd client
-npm install --save "react-on-rails@../../react_on_rails"
+yarn add "react-on-rails@../../react_on_rails"
 ```
 
-When you use a relative path, be sure to run the above `npm install` command whenever you change the node package for react-on-rails.
+When you use a relative path, be sure to run the above `yarn` command whenever you change the node package for react-on-rails.
 
-Wihle we'd prefer to us `npm link`, we get errors. If you can figure out how to get `npm link react-on-rails` to work with this project, please file an issue or PR! This used to work with babel 5.
+Wihle we'd prefer to us `yarn link`, we get errors. If you can figure out how to get `yarn link react-on-rails` to work with this project, please file an issue or PR! This used to work with babel 5.
 
 This is the error:
 
@@ -121,7 +121,7 @@ After checking out the repo, making sure you have rvm and nvm setup (setup ruby
 Additionally, our RSpec tests use the poltergeist web driver. You will need to install the phantomjs node module:
 
 ```sh
-npm install -g phantomjs
+yarn global add phantomjs
 ```
 
 Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
@@ -130,7 +130,7 @@ Note this *must* be installed globally for the dummy test project rspec runner t
 Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the app's root directory and run:
 
 ```sh
-npm run node_package
+yarn run node_package
 ```
 
 From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:prepare_all` rake task.
@@ -149,33 +149,33 @@ From now on, the example and dummy apps will use your local node_package folder
 
 ```sh
 cd <top level>
-npm i
+yarn
 npm build
 ```
 
-Or run this which builds the npm package, then the webpack files for spec/dummy, and runs tests in
+Or run this which builds the yarn package, then the webpack files for spec/dummy, and runs tests in
 spec/dummy.
 
 
 ```sh
 # Optionally change default selenium_firefox driver
 export DRIVER=poltergeist
 cd <top level>
-npm dummy:spec
+yarn run dummy:spec
 ```
 
 ### Run NPM JS tests
 
 ```sh
 cd <top level>
-npm test
+yarn test
 ```
 
 ### Run spec/dummy tests
 
 ```sh
 cd spec/dummy
-npm run test
+yarn run test
 ```
 
 ### Run most tests and linting
@@ -186,7 +186,7 @@ node_package/scripts/ci
 ```
 
 ### Starting the Dummy App
-To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `node_package/scripts/build`. Since the react-on-rails package should be sym linked, you don't have to `npm i react-on-rails` after every change.
+To run the test app, it's **CRITICAL** to not just run `rails s`. You have to run `foreman start`. If you don't do this, then `webpack` will not generate a new bundle, and you will be seriously confused when you change JavaScript and the app does not change. If you change the webpack configs, then you need to restart foreman. If you change the JS code for react-on-rails, you need to run `node_package/scripts/build`. Since the react-on-rails package should be sym linked, you don't have to `yarn react-on-rails` after every change.
 
 ### RSpec Testing
 Run `rake` for testing the gem and `spec/dummy`. Otherwise, the `rspec` command only works for testing within the sample apps, like `spec/dummy`.

README.md

@@ -115,7 +115,7 @@ We're definitely not doing that. With react_on_rails, webpack is mainly generati
 5. Bundle and NPM install. Make sure you are on a recent version of node. Please use at least Node v5. Bundle is for adding execJs. You can remove that if you are sure you will not server render.
 
   ```bash
-  bundle && npm install
+  bundle && yarn
   ```
 
 6. Start your Rails server:
@@ -173,7 +173,7 @@ Configure the `config/initializers/react_on_rails.rb`. You can adjust some neces
 All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command:
 
 ```
-cd client && npm i --saveDev react-on-rails
+cd client && yarn add react-on-rails
 ```
 
 That will install the latest version and update your package.json.
@@ -476,7 +476,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
   + [Turbolinks](docs/additional-reading/turbolinks.md)
 
 + **Javascript**
-  + [Node Dependencies and NPM](docs/additional-reading/node-dependencies-and-npm.md)
+  + [Node Dependencies, NPM, and Yarn](docs/additional-reading/node-dependencies-and-npm.md)
   + [Babel](docs/additional-reading/babel.md)
   + [React Router](docs/additional-reading/react-router.md)
   + [React & Redux](docs/additional-reading/react-and-redux.md)
@@ -522,7 +522,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
 + [spec app](spec/dummy): Great simple examples used for our tests.
   ```
   cd spec/dummy
-  bundle && npm i
+  bundle && yarn
   foreman start
   ```
 

SUMMARY.md

@@ -7,7 +7,7 @@
  * [Turbolinks](docs/additional-reading/turbolinks.md)
 
 ### **Javascript**
- * [Node Dependencies and NPM](docs/additional-reading/node-dependencies-and-npm.md)
+ * [Node Dependencies, NPM, and Yarn](docs/additional-reading/node-dependencies-and-pm.md)
  * [Babel](docs/additional-reading/babel.md)
  * [React Router](docs/additional-reading/react-router.md)
  * [React & Redux](docs/additional-reading/react-and-redux.md)

docs/additional-reading/heroku-deployment.md

@@ -22,7 +22,7 @@ Rake::Task["assets:precompile"]
 ```    
 
 ## Caching Node Modules
-By default Heroku will cache the root `node_modules` directory between deploys but since we're installing in `client/node_modules` you'll need to add the following line to the `package.json` in your root directory (otherwise you'll have to sit through a full `npm install` on each deploy):
+By default Heroku will cache the root `node_modules` directory between deploys but since we're installing in `client/node_modules` you'll need to add the following line to the `package.json` in your root directory (otherwise you'll have to sit through a full `yarn` on each deploy):
 
 ```js
 "cacheDirectories": [

docs/additional-reading/hot-reloading-rails-development.md

@@ -87,10 +87,10 @@ Rails.application.config.assets.precompile +=
   rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
 
   # Build client assets, watching for changes.
-  rails-client-assets: npm run build:dev:client
+  rails-client-assets: 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.hot
@@ -103,9 +103,9 @@ Rails.application.config.assets.precompile +=
 rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
 
 # Run the hot reload server for client development
-hot-assets: HOT_RAILS_PORT=3500 npm run hot-assets
+hot-assets: HOT_RAILS_PORT=3500 yarn run hot-assets
 
 # Keep the JS fresh for server rendering. Remove if not server rendering
-rails-server-assets: npm run build:dev:server
+rails-server-assets: yarn run build:dev:server
 ```
 

docs/additional-reading/node-dependencies-and-npm.md

@@ -1,29 +1,22 @@
-# Node Dependencies and NPM
+# Node Dependencies, NPM, and Yarn
 ## Updating
 After installing the files, you may want to update the node dependencies. This is analogous to updating gem versions:
 
 ```bash
 cd client
-npm install -g npm-check-updates
-rm npm-shrinkwrap.json
-npm-check-updates -u
-npm install
-npm prune
-npm shrinkwrap
+yarn global add yarn-check-updates
+npm-check-updates -a -u
+yarn
 ```
 
-Confirm that the hot replacement dev server and the Rails server both work. 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.*
+Confirm that the hot replacement dev server and the Rails server both work. You may have to delete `node_modules` and then run `yarn`.
 
 ## Adding New Dependencies
-Typically, you can add your Node dependencies as you normally would. Occasionally, adding a new dependency may require removing and re-running `npm shrinkwrap`:
+Typically, you can add your Node dependencies as you normally would.
 
 ```bash
 cd client
-npm install --save module_name@version
+yarn add module_name@version
 # or
-# npm install --save_dev module_name@version
-rm npm-shrinkwrap.json
-npm shrinkwrap
+# yarn add --dev module_name@version
 ```

docs/additional-reading/node-server-rendering.md

@@ -30,7 +30,7 @@ config.server_render_method = "NodeJS"
 
 You need to configure the name of the server bundle in two places:
 
-1. JavaScript: Change the name of server bundle adjust npm start script in `client/node/package.json`
+1. JavaScript: Change the name of server bundle and adjust yarn start script in `client/node/package.json`
 2. Ruby: The configured server bundle file is defined in `config/react_on_rails.rb`, and you'll have a webpack file that creates this. You maybe using the same file for client rendering.
 
 ```ruby

docs/additional-reading/rspec-configuration.md

@@ -25,12 +25,12 @@ The following `config/react_on_rails.rb` settings **must** match your setup:
   config.webpack_generated_files = %w( webpack-bundle.js )
 
   # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  # with rspec then this controls what npm command is run
+  # with rspec then this controls what yarn command is run
   # to automatically refresh your webpack assets on every test run.
-  config.npm_build_test_command = "npm run build:test"
+  config.npm_build_test_command = "yarn run build:test"
 ```
 
-If you want to speed up the re-compiling process, you can call `npm run build:development` (per below script) to have webpack run in "watch" mode and recompile these files in the background, which will be much faster when making incremental changes than compiling from scratch, assuming you have your setup like this:
+If you want to speed up the re-compiling process, you can call `yarn run build:development` (per below script) to have webpack run in "watch" mode and recompile these files in the background, which will be much faster when making incremental changes than compiling from scratch, assuming you have your setup like this:
 
 ```
   "scripts": {

docs/additional-reading/turbolinks.md

@@ -2,7 +2,7 @@
 
 * See [Turbolinks on Github](https://github.com/rails/turbolinks)
 * Currently support 2.5.x of Turbolinks and 5.0.0 of Turbolinks 5.
-* You may include Turbolinks either via npm (recommended) or via the gem.
+* You may include Turbolinks either via yarn (recommended) or via the gem.
 
 ## Why Turbolinks?
 As you switch between Rails HTML controller requests, you will only load the HTML and you will
@@ -23,7 +23,7 @@ the JavaScript and stylesheets are cached by the browser, as they will still req
 * If you're using multiple Webpack bundles, be sure to ensure that there are no name conflicts between JS objects or redux store paths.
 
 ### Install Checklist
-1. Include turbolinks via npm as shown in the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/8a6c8aa2e3b7ae5b08b0a9744fb3a63a2fe0f002/client/webpack.client.base.config.js#L22) or include the gem "turbolinks".
+1. Include turbolinks via yarn as shown in the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/blob/8a6c8aa2e3b7ae5b08b0a9744fb3a63a2fe0f002/client/webpack.client.base.config.js#L22) or include the gem "turbolinks".
 1. Included the proper "track" tags when you include the javascript and stylesheet:
   ```erb
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => 'reload' %>

docs/additional-reading/updating-dependencies.md

@@ -13,21 +13,19 @@ bundle update
 ## NPM
 
 1. Install [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)
-1. Run `npm outdated` and read CHANGELOGs of major updated packages before you update. You might not be ready for some updates.
-1. Run these commands. Note, you may or may not want to remove your npm-shrinkwrap.json if you get some werid conflicts, and you may or may not need to `rm -rf` your `node_modules` directory. 
+1. Run `yarn outdated` and read CHANGELOGs of major updated packages before you update. You might not be ready for some updates.
+1. Run these commands. You may or may not need to `rm -rf` your `node_modules` directory. 
 
 ```
 cd client
-rm npm-shrinkwrap.json
 ncu -u -a
-npm i
+yarn
 ```
 
 Some combinations that I often run:
 
 ### remove old installed `node_modules` so you only get what corresponds to package.json
 ```
-ncu -u -a && rm -rf node_modules && npm i
+ncu -u -a && rm -rf node_modules && yarn
 ```
 
-Note: newer versions of npm (>3) automatically create a new version of the npm-shrinkwrap.json.

docs/contributor-info/generator-testing.md

@@ -12,7 +12,7 @@ You can specify additional apps to generate and test by adding to the rakelib/ex
 ## More on the Rake Tasks
 In order to maximize efficiency, we took several steps to improve the performance of the rake tasks that utilize somewhat advanced rake functionality such as task dependencies, `file` tasks, task synthesizing, and concurrent tasks with `multitask`.
 
-For example, re-generating the app, running `npm install`, and re-generating the webpack bundles are all only done when they need to be done. Rake will also run certain tasks, including those that generate multiple applications, concurrently. When running `npm install`, this may produce strange-looking output due to the way the npm's console progress bar works. This is normal.
+For example, re-generating the app, running `yarn`, and re-generating the webpack bundles are all only done when they need to be done. Rake will also run certain tasks, including those that generate multiple applications, concurrently. 
 
 For more insight, see:
 

docs/tutorial.md

@@ -69,7 +69,7 @@ update dependencies and generate empty app via `react_on_rails:install`. If you
 ```
 bundle
 rails generate react_on_rails:install
-bundle && npm install
+bundle && yarn
 ```
 
 ![03](https://cloud.githubusercontent.com/assets/20628911/17464918/3c2c1f00-5cf2-11e6-9525-7b2e15659e01.png)

lib/generators/USAGE

@@ -11,13 +11,13 @@ can pass the redux option if you'd like to have redux setup for you automaticall
 
 * Node
 
-    Passing the --node generator option sets up the necessary files for node to render the react_components. 
+    Passing the --node generator option sets up the necessary files for node to render the react_components.
 
 *******************************************************************************
 
 After running the generator, you will want to:
 
-    bundle && npm i
+    bundle && yarn
 
 Then you may run
 

lib/generators/react_on_rails/base_generator.rb

@@ -138,13 +138,13 @@ def print_helpful_message
 
           What to do next:
 
-            - Ensure your bundle and npm are up to date.
+            - Ensure your bundle and yarn installs of dependencies are up to date.
 
-                bundle && npm i
+                bundle && yarn
 
-            - Run the npm rails-server command to load the rails server.
+            - Run the foreman command to load the rails server and webpack process
 
-                npm run rails-server
+                foreman start -f Procfile.dev
 
             - Visit http://localhost:3000/hello_world and see your React On Rails app running!
         MSG

lib/generators/react_on_rails/install_generator.rb

@@ -64,9 +64,9 @@ def installation_prerequisites_met?
       end
 
       def missing_npm?
-        return false unless `which npm`.blank?
-        error = "npm is required. Please install it before continuing. "
-        error << "https://www.npmjs.com/"
+        return false unless `which yarn`.blank?
+        error = "yarn is required. Please install it before continuing. "
+        error << "https://yarnpkg.com/en/docs/install"
         GeneratorMessages.add_error(error)
         true
       end

lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt

@@ -1,2 +1,2 @@
 web: rails s -p 3000
-client: sh -c 'rm app/assets/webpack/* || true && cd client && npm run build:development'
+client: sh -c 'rm app/assets/webpack/* || true && cd client && yarn run build:development'