Skip to content

Commit

Permalink
Switch to yarn
Browse files Browse the repository at this point in the history
  • Loading branch information
justin808 committed Nov 25, 2016
1 parent 3cde086 commit 70ecef7
Show file tree
Hide file tree
Showing 52 changed files with 1,274 additions and 5,596 deletions.
1 change: 0 additions & 1 deletion .bookignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ spec/*

# files in repo root to ignore
Gemfile
npm-shrinkwrap.json
package.json
Rakefile
react_on_rails.gemspec
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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*

Expand Down
5 changes: 3 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ sudo: required

language: ruby

cache: yarn

rvm:
- 2.3.1

Expand Down Expand Up @@ -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
Expand Down
30 changes: 15 additions & 15 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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`.
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
```
Expand Down
2 changes: 1 addition & 1 deletion SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion docs/additional-reading/heroku-deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
8 changes: 4 additions & 4 deletions docs/additional-reading/hot-reloading-rails-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
```

23 changes: 8 additions & 15 deletions docs/additional-reading/node-dependencies-and-npm.md
Original file line number Diff line number Diff line change
@@ -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
```
2 changes: 1 addition & 1 deletion docs/additional-reading/node-server-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions docs/additional-reading/rspec-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions docs/additional-reading/turbolinks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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' %>
Expand Down
10 changes: 4 additions & 6 deletions docs/additional-reading/updating-dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/contributor-info/generator-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions lib/generators/USAGE
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions lib/generators/react_on_rails/base_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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 are up to date.
bundle && npm i
bundle && yarn
- Run the npm rails-server command to load the rails server.
- Run the yarn rails-server command to load the rails server.
npm run rails-server
yarn run rails-server
- Visit http://localhost:3000/hello_world and see your React On Rails app running!
MSG
Expand Down
6 changes: 3 additions & 3 deletions lib/generators/react_on_rails/install_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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'
Loading

0 comments on commit 70ecef7

Please sign in to comment.