react_on_rails 11.2.1 → 12.0.0.pre.beta.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.circleci/config.yml +320 -0
- data/.eslintignore +2 -1
- data/.eslintrc +23 -1
- data/.github/FUNDING.yml +1 -0
- data/.gitignore +3 -1
- data/.prettierignore +10 -1
- data/.prettierrc +3 -0
- data/.rubocop.yml +37 -11
- data/.travis.yml +10 -20
- data/CHANGELOG.md +85 -9
- data/CONTRIBUTING.md +60 -71
- data/Gemfile +3 -4
- data/{COMM-LICENSE → REACT-ON-RAILS-PRO-LICENSE} +6 -9
- data/README.md +121 -71
- data/Rakefile +0 -7
- data/SUMMARY.md +9 -12
- data/book.json +5 -5
- data/docs/additional-reading/asset-pipeline.md +8 -16
- data/docs/additional-reading/react-helmet.md +30 -10
- data/docs/additional-reading/react-router.md +52 -75
- data/docs/additional-reading/server-rendering-tips.md +12 -7
- data/docs/api/javascript-api.md +3 -3
- data/docs/api/redux-store-api.md +4 -2
- data/docs/api/view-helpers-api.md +8 -9
- data/docs/basics/configuration.md +68 -59
- data/docs/basics/deployment.md +1 -2
- data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +49 -0
- data/docs/basics/i18n.md +44 -22
- data/docs/basics/installation-into-an-existing-rails-app.md +2 -2
- data/docs/basics/minitest-configuration.md +31 -0
- data/docs/basics/react-server-rendering.md +1 -1
- data/docs/basics/{generator-functions-and-railscontext.md → render-functions-and-railscontext.md} +59 -21
- data/docs/basics/rspec-configuration.md +29 -17
- data/docs/basics/upgrading-react-on-rails.md +67 -3
- data/docs/basics/webpack-configuration.md +15 -1
- data/docs/contributor-info/errors-with-hooks.md +45 -0
- data/docs/contributor-info/pull-requests.md +44 -0
- data/docs/misc/doctrine.md +1 -1
- data/docs/{misc-pending → outdated}/code-splitting.md +12 -8
- data/docs/{additional-reading → outdated}/heroku-deployment.md +0 -6
- data/docs/{basics → outdated}/how-react-on-rails-works.md +3 -3
- data/docs/{misc-pending → outdated}/manual-installation-overview.md +5 -5
- data/docs/{additional-reading → outdated}/rails-assets-relative-paths.md +3 -3
- data/docs/{misc-pending → outdated}/rails-assets.md +4 -7
- data/docs/{misc → outdated}/rails3.md +0 -0
- data/docs/testimonials/resortpass.md +13 -0
- data/docs/testimonials/testimonials.md +11 -1
- data/docs/tutorial.md +96 -70
- data/jest.config.js +4 -0
- data/lib/generators/react_on_rails/base_generator.rb +2 -2
- data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
- data/lib/generators/react_on_rails/generator_helper.rb +4 -6
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +3 -1
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr +26 -0
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +20 -40
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +2 -1
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +4 -8
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.js +1 -3
- data/lib/react_on_rails.rb +3 -1
- data/lib/react_on_rails/configuration.rb +13 -22
- data/lib/react_on_rails/error.rb +2 -0
- data/lib/react_on_rails/helper.rb +100 -143
- data/lib/react_on_rails/json_parse_error.rb +2 -0
- data/lib/react_on_rails/locales/base.rb +150 -0
- data/lib/react_on_rails/locales/to_js.rb +37 -0
- data/lib/react_on_rails/locales/to_json.rb +27 -0
- data/lib/react_on_rails/prerender_error.rb +11 -15
- data/lib/react_on_rails/react_component/render_options.rb +4 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +41 -46
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +7 -8
- data/lib/react_on_rails/utils.rb +14 -19
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +1 -0
- data/lib/react_on_rails/webpacker_utils.rb +13 -2
- data/lib/tasks/assets.rake +19 -44
- data/lib/tasks/locale.rake +4 -2
- data/package-scripts.yml +11 -8
- data/package.json +29 -28
- data/rakelib/dummy_apps.rake +1 -9
- data/rakelib/example_type.rb +3 -1
- data/rakelib/examples.rake +3 -0
- data/rakelib/lint.rake +2 -7
- data/rakelib/node_package.rake +2 -2
- data/rakelib/release.rake +0 -6
- data/rakelib/run_rspec.rake +5 -18
- data/react_on_rails.gemspec +3 -5
- data/tsconfig.json +14 -0
- data/webpackConfigLoader.js +3 -2
- data/yarn.lock +4170 -2197
- metadata +34 -57
- data/Gemfile.rails32 +0 -73
- data/docs/additional-reading/babel.md +0 -5
- data/docs/additional-reading/hot-reloading-rails-development-asset-pipeline.md +0 -47
- data/docs/api/ruby-api-hot-reload-view-helpers.md +0 -44
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
- data/lib/react_on_rails/assets_precompile.rb +0 -153
- data/lib/react_on_rails/locales_to_js.rb +0 -138
@@ -23,7 +23,21 @@ The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for pr
|
|
23
23
|
|
24
24
|
The two best examples of this pattern are the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and the integration test example in [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy).
|
25
25
|
|
26
|
-
In this case, you don't need to understand the nuances of customization of your
|
26
|
+
In this case, you don't need to understand the nuances of customization of your Webpack config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
|
27
|
+
|
28
|
+
You can access values in the `config/webpacker.yml`
|
29
|
+
|
30
|
+
```js
|
31
|
+
const { config, devServer } = require('@rails/webpacker');
|
32
|
+
```
|
33
|
+
|
34
|
+
You will want consider using some of the same values set in these files:
|
35
|
+
|
36
|
+
* https://github.com/rails/webpacker/blob/master/package/environments/base.js
|
37
|
+
* https://github.com/rails/webpacker/blob/master/package/environments/development.js
|
38
|
+
|
39
|
+
**Note**, if your node_modules directory is not at the top level of the Rails project, then you will need to set the
|
40
|
+
ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
|
27
41
|
|
28
42
|
## Option 2: Default Generator Setup: rails/webpacker app/javascript
|
29
43
|
|
@@ -0,0 +1,45 @@
|
|
1
|
+
# Invalid hook call error
|
2
|
+
|
3
|
+
```
|
4
|
+
react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
|
5
|
+
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
6
|
+
2. You might be breaking the Rules of Hooks
|
7
|
+
3. You might have more than one copy of React in the same app
|
8
|
+
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
|
9
|
+
```
|
10
|
+
|
11
|
+
The main reason to get this is due to multiple versions of React installed.
|
12
|
+
|
13
|
+
```
|
14
|
+
cd <top level>
|
15
|
+
npm ls react
|
16
|
+
|
17
|
+
cd spec/dummy
|
18
|
+
npm ls react
|
19
|
+
```
|
20
|
+
|
21
|
+
For the second one, you might get:
|
22
|
+
|
23
|
+
```
|
24
|
+
react_on_rails@ /Users/justin/shakacode/react-on-rails/react_on_rails/spec/dummy
|
25
|
+
├── react@16.13.1
|
26
|
+
└─┬ react-on-rails@12.0.0 -> /Users/justin/shakacode/react-on-rails/react_on_rails invalid
|
27
|
+
└── react@16.13.1 extraneous
|
28
|
+
|
29
|
+
npm ERR! invalid: react-on-rails@12.0.0 /Users/justin/shakacode/react-on-rails/react_on_rails/spec/dummy/node_modules/react-on-rails
|
30
|
+
npm ERR! extraneous: react@16.13.1 /Users/justin/shakacode/react-on-rails/react_on_rails/spec/dummy/node_modules/react-on-rails/node_modules/react
|
31
|
+
```
|
32
|
+
|
33
|
+
Make sure there is only one version of React installed!
|
34
|
+
|
35
|
+
If you used yarn link, then you'll have two versions of React installed.
|
36
|
+
|
37
|
+
Instead use [Yalc](https://github.com/whitecolor/yalc).
|
38
|
+
|
39
|
+
```
|
40
|
+
cd <top level>
|
41
|
+
yalc publish
|
42
|
+
|
43
|
+
cd spec/dummy
|
44
|
+
yalc link react-on-rails
|
45
|
+
```
|
@@ -0,0 +1,44 @@
|
|
1
|
+
# Pull Requests
|
2
|
+
|
3
|
+
## Checklist before Committing
|
4
|
+
1. `rake`: runs all linters and specs (you need Docker setup, see below)
|
5
|
+
2. Did you need any more tests for your change?
|
6
|
+
3. Did you document your change? Update the README.md?
|
7
|
+
4. Did you add a CHANGELOG.md entry?
|
8
|
+
|
9
|
+
|
10
|
+
For non-doc fixes:
|
11
|
+
|
12
|
+
* Provide changelog entry in the [unreleased section of the CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#unreleased).
|
13
|
+
* Ensure CI passes and that you added a test that passes with the fix and fails without the fix.
|
14
|
+
* Squash all commits down to one with a nice commit message *ONLY* once final review is given. Make sure this single commit is rebased on top of master.
|
15
|
+
* Please address all code review comments.
|
16
|
+
* Ensure that docs are updated accordingly if a feature is added.
|
17
|
+
|
18
|
+
## Commit Messages
|
19
|
+
|
20
|
+
From [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/)
|
21
|
+
|
22
|
+
#### The seven rules of a great git commit message
|
23
|
+
> Keep in mind: This has all been said before.
|
24
|
+
|
25
|
+
1. Separate subject from body with a blank line
|
26
|
+
1. Limit the subject line to 50 characters
|
27
|
+
1. Capitalize the subject line
|
28
|
+
1. Do not end the subject line with a period
|
29
|
+
1. Use the imperative mood in the subject line
|
30
|
+
1. Wrap the body at 72 characters
|
31
|
+
1. Use the body to explain what and why vs. how
|
32
|
+
|
33
|
+
## Doc Changes
|
34
|
+
|
35
|
+
When making doc changes, we want the change to work on both the gitbook and the regular github site. The issue is that non-doc files will not go to the gitbook site, so doc references to non doc files must use the github URL.
|
36
|
+
|
37
|
+
### Links to other docs:
|
38
|
+
* When making references to doc files, use a relative URL path like:
|
39
|
+
`[Installation Overview](docs/basics/installation-overview.md)`
|
40
|
+
|
41
|
+
* When making references to source code files, use a full url path like:
|
42
|
+
`[spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb)`
|
43
|
+
|
44
|
+
|
data/docs/misc/doctrine.md
CHANGED
@@ -19,7 +19,7 @@ The React on Rails setup provides several key components related to front-end de
|
|
19
19
|
6. Happiness for us is actively participating in open source, so we want to be where the action is, which is with the npm libraries on github.com.
|
20
20
|
7. You can get set up on React on Rails **FAST** using our application generator.
|
21
21
|
8. By placing all client-side development inside of the `/client` directory, pure JavaScript developers can productively do development separate from Rails. Instead of Rails APIs, stub APIs on an express server can provide a simple backend, allowing for rapid iteration of UI prototypes.
|
22
|
-
9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](
|
22
|
+
9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](docs/outdated/heroku-deployment.md).
|
23
23
|
|
24
24
|
## Convention over Configuration
|
25
25
|
* React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent:
|
@@ -1,6 +1,10 @@
|
|
1
|
-
# Code Splitting
|
1
|
+
# Code Splitting (Outdated)
|
2
2
|
|
3
|
-
|
3
|
+
_Note: This document is outdated._ Please email [justin@shakacode.com](mailto:justin@shakacode.com)
|
4
|
+
if you would be interested in help with code splitting using
|
5
|
+
[loadable-components.com](https://loadable-components.com/docs) with React on Rails.
|
6
|
+
|
7
|
+
-----
|
4
8
|
|
5
9
|
What is code splitting? From the webpack documentation:
|
6
10
|
|
@@ -17,11 +21,11 @@ Let's say you're requesting a page that needs to fetch a code chunk from the ser
|
|
17
21
|
> (server) <div data-reactroot="
|
18
22
|
<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
|
19
23
|
|
20
|
-
Different markup is generated on the client than on the server. Why does this happen? When you register a component or
|
24
|
+
Different markup is generated on the client than on the server. Why does this happen? When you register a component or render function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
|
21
25
|
|
22
26
|
### The solution
|
23
27
|
|
24
|
-
To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a
|
28
|
+
To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a render function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a render function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
|
25
29
|
|
26
30
|
Here's an example of how you might use this in practice:
|
27
31
|
|
@@ -34,7 +38,7 @@ Here's an example of how you might use this in practice:
|
|
34
38
|
|
35
39
|
#### clientRegistration.js
|
36
40
|
```js
|
37
|
-
import ReactOnRails from '
|
41
|
+
import ReactOnRails from 'node_package/lib/ReactOnRails';
|
38
42
|
import NavigationApp from './NavigationApp';
|
39
43
|
|
40
44
|
// Note that we're importing a different RouterApp than in serverRegistration.js
|
@@ -78,7 +82,7 @@ import { Provider } from 'react-redux';
|
|
78
82
|
|
79
83
|
import routes from '../routes/routes';
|
80
84
|
|
81
|
-
|
85
|
+
// NOTE how this function takes 3 params, and is thus responsible for calling ReactDOM.render
|
82
86
|
const RouterAppRenderer = (props, railsContext, domNodeId) => {
|
83
87
|
const store = ReactOnRails.getStore('applicationStore');
|
84
88
|
const history = browserHistory;
|
@@ -130,7 +134,7 @@ If you're going to try to do code splitting with server rendered routes, you'll
|
|
130
134
|
|
131
135
|
The reason is we do server rendering with ExecJS, which is not capable of doing anything asynchronous. It would be impossible to asyncronously fetch a code chunk while server rendering. See [this issue](https://github.com/shakacode/react_on_rails/issues/477) for a discussion.
|
132
136
|
|
133
|
-
Also, do not attempt to register a renderer on the server. Instead, register either a
|
137
|
+
Also, do not attempt to register a renderer on the server. Instead, register either a render function or a component. If you register a renderer in the server bundle, you'll get an error when react on rails tries to server render the component.
|
134
138
|
|
135
139
|
## How does Webpack know where to find my code chunks?
|
136
140
|
|
@@ -146,7 +150,7 @@ config = {
|
|
146
150
|
|
147
151
|
This causes Webpack to prepend the code chunk filename with `/assets/` in the request url. The react on rails sets up the webpack config to put webpack bundles in `app/assets/javascripts/webpack`, and modifies `config/initializers/assets.rb` so that rails detects the bundles. This means that when we prepend the request url with `/assets/`, rails will know what webpack is asking for.
|
148
152
|
|
149
|
-
See [rails-assets.md](rails-assets.md) to learn more about static assets.
|
153
|
+
See [rails-assets.md](docs/outdated/rails-assets.md) to learn more about static assets.
|
150
154
|
|
151
155
|
If you forget to set the public path, webpack will request the code chunk at `/{filename}`. This will cause the request to be handled by the Rails router, which will send back a 404 response, assuming that you don't have a catch-all route. In your javascript console, you'll get the following error:
|
152
156
|
|
@@ -2,10 +2,8 @@
|
|
2
2
|
The generator has created the necessary files and gems for deployment to Heroku. If you have installed manually, you will need to provide these files yourself:
|
3
3
|
|
4
4
|
+ `Procfile`: used by Heroku and Foreman to start the Puma server
|
5
|
-
+ `12factor` gem: required by Heroku if using a version before Rails 5 (see their [README](https://github.com/heroku/rails_12factor#rails-5) for more information if upgrading from a lower version)
|
6
5
|
+ `'puma'` gem: recommended Heroku webserver
|
7
6
|
+ `config/puma.rb`: Puma webserver config file
|
8
|
-
+ `/package.json`: Top level package.json which must contain `"scripts": { "postinstall": "cd client && npm install" }`
|
9
7
|
|
10
8
|
If you want to see an updated example deployed to Heroku, please visit the [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
|
11
9
|
|
@@ -17,10 +15,6 @@ This is how the `assets:precompile` rake task gets modified by `react_on_rails`.
|
|
17
15
|
Rake::Task["assets:precompile"]
|
18
16
|
.clear_prerequisites
|
19
17
|
.enhance([:environment, "react_on_rails:assets:compile_environment"])
|
20
|
-
.enhance do
|
21
|
-
Rake::Task["react_on_rails:assets:symlink_non_digested_assets"].invoke
|
22
|
-
Rake::Task["react_on_rails:assets:delete_broken_symlinks"].invoke
|
23
|
-
end
|
24
18
|
```
|
25
19
|
|
26
20
|
For an example of how to do this, see the [dummy app](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/lib/tasks/assets.rake).
|
@@ -30,11 +30,11 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
|
|
30
30
|
|
31
31
|
Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes.
|
32
32
|
|
33
|
-
Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.
|
33
|
+
Simply run `foreman start -f Procfile.dev`. [Example](spec/dummy/Procfile.dev).
|
34
34
|
|
35
|
-
On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You configure the command used as `config.build_production_command` in your [config/initializers/react_on_rails.rb](
|
35
|
+
On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You configure the command used as `config.build_production_command` in your [config/initializers/react_on_rails.rb](docs/basics/configuration.md).
|
36
36
|
|
37
|
-
You can see the source code for what gets added to your precompilation [here](https://github.com/shakacode/react_on_rails/tree/master/lib/tasks/assets.rake). For more information on this topic, see [the doc on Heroku deployment](docs/
|
37
|
+
You can see the source code for what gets added to your precompilation [here](https://github.com/shakacode/react_on_rails/tree/master/lib/tasks/assets.rake). For more information on this topic, see [the doc on Heroku deployment](docs/outdated/heroku-deployment.md#more-details-on-precompilation-using-webpack-to-create-javascript-assets).
|
38
38
|
|
39
39
|
If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
|
40
40
|
|
@@ -14,17 +14,17 @@ The only requirements within this directory for basic React on Rails integration
|
|
14
14
|
1. Your webpack configuration files:
|
15
15
|
1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
|
16
16
|
1. Provide server rendering if you wish to use that feature.
|
17
|
-
1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See API docs in [README.md](
|
17
|
+
1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See API docs in [README.md](README.md) and the [ReactOnRails.js source](../../node_package/src/ReactOnRails.js).
|
18
18
|
1. Set your registration file as an "entry" point in your Webpack configs.
|
19
19
|
1. Add the [Manifest plugin](https://github.com/danethurber/webpack-manifest-plugin) to your config. For examples see [dummy config](../../spec/dummy/client/webpack.client.base.config.js).
|
20
20
|
The default path: `public/webpack` can be loaded with webpackConfigLoader as shown in the dummy example.
|
21
21
|
1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
|
22
22
|
|
23
23
|
## Rails Steps (outside of /client)
|
24
|
-
1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](
|
25
|
-
1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](
|
24
|
+
1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](spec/dummy/app/views/layouts/application.html.erb)
|
25
|
+
1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
|
26
26
|
1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
|
27
|
-
1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files.
|
28
|
-
1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/
|
27
|
+
1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files.
|
28
|
+
1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/outdated/heroku-deployment.md)
|
29
29
|
|
30
30
|
If I missed anything, please submit a PR or file an issue.
|
@@ -1,4 +1,4 @@
|
|
1
|
-
*Note: this doc
|
1
|
+
*Note: this doc reflects using Sprockets for assets and has not been updated for rails/webpacker*
|
2
2
|
|
3
3
|
# Using Webpack bundled assets with the Rails Asset Pipeline
|
4
4
|
|
@@ -77,7 +77,7 @@ Note: _You can output these files in the asset pipeline wherever you see fit. My
|
|
77
77
|
|
78
78
|
Lastly, we will set the publicPath to our file(s). This will be the endpoint on our rails web server that you can visit to reach the asset (if you don't know how this works, read the [intro](#using-webpack-bundled-assets-with-the-rails-asset-pipeline)). If you've been following the previous steps, you know that we set our outputPath for our assets to be absolute at `app/assets/webpack/webpack-assets/`, which your rails app should end up hosting at `/assets/webpack-assets/file-name+hash.ext` when the server is run.
|
79
79
|
|
80
|
-
Note: _If you're having a hard time figuring out what an asset's path will be on your rails server, simply run `rake assets:precompile` and `cd public/`. The path from there to your file will then be the path/url on your web server to that asset. On top of this, it is also a good idea to check out [this doc](
|
80
|
+
Note: _If you're having a hard time figuring out what an asset's path will be on your rails server, simply run `rake assets:precompile` and `cd public/`. The path from there to your file will then be the path/url on your web server to that asset. On top of this, it is also a good idea to check out [this doc](docs/outdated/rails-assets.md) to understand how `react_on_rails` allows us to access these files after precompilation, when Rails applies another hash onto the asset._
|
81
81
|
|
82
82
|
Our publicPath setting will match the path to our outputted assets on our rails web server. Given our assets in this example will be outputted to `/app/assets/webpack/webpack-assets/` and hosted at `/assets/webpack-assets/`, our publicPath would be:
|
83
83
|
|
@@ -192,4 +192,4 @@ module.exports = {
|
|
192
192
|
};
|
193
193
|
```
|
194
194
|
|
195
|
-
If you'd like to understand how react_on_rails handles these bundled assets after asset precompilation and in production mode, check out: [Rails Assets](
|
195
|
+
If you'd like to understand how react_on_rails handles these bundled assets after asset precompilation and in production mode, check out: [Rails Assets](docs/outdated/rails-assets.md).
|
@@ -33,21 +33,18 @@ fail to load.
|
|
33
33
|
_If you are interested in learning how to use assets in your React components, read this doc: [Webpack, the Asset Pipeline, and Using Assets w/ React](../additional-reading/rails-assets-relative-paths.md)._
|
34
34
|
|
35
35
|
## The Solution: Symlink Original File Names to New File Names
|
36
|
+
_Note, this solution was removed in v14. If you're intersted in this symlink solution, please create
|
37
|
+
a github issue._
|
38
|
+
|
36
39
|
React on Rails creates symlinks of non-digested versions (original webpack digested file names)
|
37
40
|
to the Rails deployed digested versions when doing a Rails assets compile. The solution is
|
38
41
|
implemented using `assets:precompile` after-hook in
|
39
|
-
file [lib/tasks/assets.rake](
|
42
|
+
file [lib/tasks/assets.rake](lib/tasks/assets.rake)
|
40
43
|
The assets for symlinking are defined by `config.symlink_non_digested_assets_regex` in
|
41
44
|
`config/initializers/react_on_rails.rb`.
|
42
45
|
|
43
|
-
## Disabling the Symlinking
|
44
|
-
To disable symlinks set this parameter to `nil`.
|
45
|
-
|
46
|
-
|
47
46
|
## Example from /spec/dummy
|
48
47
|
|
49
|
-
If you run
|
50
|
-
|
51
48
|
```
|
52
49
|
cd spec/dummy
|
53
50
|
RAILS_ENV=production bundle exec rake assets:precompile
|
File without changes
|
@@ -0,0 +1,13 @@
|
|
1
|
+
# ResortPass Testimonial, by Leora Juster, December 10, 2018
|
2
|
+
|
3
|
+
Many can write code that "works." Even fewer can write sophisticated code that both works and reflects a deep understanding of the technologies and paradigms involved. Only a select few can do the aforementioned while assisting in managing the expectations and time constraints of less technically informed members of software product teams to make the best design decisions possible. Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds. The code and CSS files are well-organized and contain repeatable patterns easy to understand, allowing my team to build on what has already been accomplished. I learned a great deal from my interactions with Justin and his team, as they are just as great teachers as they are developers, and feel like I get to continually learn from them as I build on top of their code. Their different support and pro plan options make it easy to build a continuous professional relationship despite fluctuations in my team's funding, and their team is always extremely personable, punctual, and professional.
|
4
|
+
|
5
|
+
Leora Juster, Full-Stack Lead Software Developer
|
6
|
+
|
7
|
+
[LinkedIn](https://www.linkedin.com/in/leora-juster-38933050)
|
8
|
+
|
9
|
+
![image](https://user-images.githubusercontent.com/1118459/50050877-30399b00-00ab-11e9-9e52-2977de45ccae.png)
|
10
|
+
|
11
|
+
[ResortPass](https://resortpass.com/)
|
12
|
+
|
13
|
+
[![2018-12-15_20-48-35](https://user-images.githubusercontent.com/1118459/50050866-03858380-00ab-11e9-8588-461112f8045b.png)](https://resortpass.com/)
|
@@ -1,8 +1,18 @@
|
|
1
1
|
# Testimonials
|
2
|
-
[HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./
|
2
|
+
# [HVMN Testimonial, Written by Paul Benigeri, October 12, 2018](./hvmn.md)
|
3
3
|
|
4
4
|
> The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
|
5
5
|
|
6
|
+
Full writeup [here](./hvmn.md).
|
7
|
+
|
8
|
+
---
|
9
|
+
|
10
|
+
# [Leora from ResortPass](./resortpass.md), December 10, 2018
|
11
|
+
|
12
|
+
Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds.
|
13
|
+
|
14
|
+
Full writeup [here](./testimonials/resortpass.md).
|
15
|
+
|
6
16
|
---
|
7
17
|
|
8
18
|
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
data/docs/tutorial.md
CHANGED
@@ -1,6 +1,8 @@
|
|
1
1
|
# React on Rails Basic Tutorial
|
2
2
|
|
3
|
-
|
3
|
+
*Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
|
4
|
+
|
5
|
+
This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
|
4
6
|
|
5
7
|
After finishing this tutorial you will get an application that can do the following (live on Heroku):
|
6
8
|
|
@@ -17,9 +19,9 @@ By the time you read this, the latest may have changed. Be sure to check the ver
|
|
17
19
|
|
18
20
|
_Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
|
19
21
|
|
20
|
-
## Setting up
|
22
|
+
## Setting up your environment
|
21
23
|
|
22
|
-
Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails
|
24
|
+
Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 13+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
|
23
25
|
|
24
26
|
```
|
25
27
|
nvm install node # download and install latest stable Node
|
@@ -27,15 +29,15 @@ nvm alias default node # make it default version
|
|
27
29
|
nvm list # check
|
28
30
|
|
29
31
|
brew install yarn # you can use other installer if desired
|
30
|
-
|
31
|
-
rvm
|
32
|
-
rvm use 2.5.0 --default # use it and make it default
|
32
|
+
rvm install 2.7 # download and install latest stable Ruby (update to exact version)
|
33
|
+
rvm use 2.7 --default # use it and make it default
|
33
34
|
rvm list # check
|
34
35
|
|
35
36
|
gem install rails # download and install latest stable Rails
|
36
37
|
gem install foreman # download and install Foreman
|
37
38
|
```
|
38
39
|
|
40
|
+
## Create a new Ruby on Rails App
|
39
41
|
Then we need to create a fresh Rails application with webpacker react support as following.
|
40
42
|
|
41
43
|
First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
|
@@ -43,98 +45,87 @@ First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If
|
|
43
45
|
```
|
44
46
|
cd <directory where you want to create your new Rails app>
|
45
47
|
|
46
|
-
#
|
47
|
-
|
48
|
+
# Any name you like for the rails app
|
49
|
+
# Skip javascript so will add that next and get the current version
|
50
|
+
rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
|
48
51
|
|
49
52
|
cd test-react-on-rails
|
50
53
|
bundle
|
51
54
|
```
|
52
55
|
|
53
|
-
|
56
|
+
## Add the webpacker gem
|
54
57
|
|
55
58
|
```
|
56
|
-
bundle
|
57
|
-
bundle
|
59
|
+
bundle add webpacker
|
60
|
+
bundle add react_on_rails
|
58
61
|
```
|
59
62
|
|
60
|
-
|
63
|
+
## Run the webpacker generator
|
61
64
|
|
62
65
|
```
|
63
|
-
|
66
|
+
bundle exec rails webpacker:install
|
67
|
+
bundle exec rails webpacker:install:react
|
64
68
|
```
|
65
69
|
|
66
|
-
|
67
|
-
|
68
|
-
Run `bundle` and commit the git repository (or `rails generate` will not work properly)
|
69
|
-
|
70
|
+
Let's commit everything before installing React on Rails.
|
70
71
|
|
71
72
|
```
|
72
|
-
bundle
|
73
|
-
|
74
73
|
# Here are git commands to make a new git repo and commit everything.
|
75
74
|
# Newer versions of Rails create the git repo by default.
|
76
75
|
git add -A
|
77
76
|
git commit -m "Initial commit"
|
78
77
|
```
|
79
78
|
|
80
|
-
|
79
|
+
## Add the **React On Rails** gem to your `Gemfile`:
|
80
|
+
|
81
|
+
To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
|
82
|
+
of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
|
81
83
|
|
82
84
|
```
|
83
|
-
|
84
|
-
bundle && yarn
|
85
|
+
gem 'react_on_rails', '12.0.0' # prefer exact gem version to match npm version
|
85
86
|
```
|
86
87
|
|
87
|
-
|
88
|
+
Note: The latest released React On Rails version is considered stable. Please use the latest
|
89
|
+
version to ensure you get all the security patches and the best support.
|
88
90
|
|
89
|
-
|
90
|
-
foreman start -f Procfile.dev
|
91
|
-
```
|
91
|
+
Run `bundle` and commit the changes.
|
92
92
|
|
93
|
-
To run with the webpack-dev-server:
|
94
|
-
```
|
95
|
-
foreman start -f Procfile.dev-server
|
96
93
|
```
|
94
|
+
bundle
|
97
95
|
|
98
|
-
|
99
|
-
|
96
|
+
git commit -am "Added React on Rails Gem"
|
97
|
+
```
|
100
98
|
|
101
|
-
|
102
|
-
Until `rails/webpacker` v4 ships, or if you ever want to try out the master branch, you can modify the React on Rails tutorial instructions slightly. You can see the sequence of commits here. To summarize:
|
99
|
+
Install React on Rails: `rails generate react_on_rails:install`. You need to first git commit your files before running the generator, or else it will generate an error.
|
103
100
|
|
104
|
-
|
101
|
+
Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
|
102
|
+
If you want the redux install: `rails generate react_on_rails:install --redux`
|
105
103
|
|
106
|
-
```ruby
|
107
|
-
gem 'webpacker', github: "rails/webpacker"
|
108
|
-
gem 'react_on_rails', '11.2.0' # always use exact version
|
109
104
|
```
|
110
|
-
|
111
|
-
Then run these commands:
|
112
|
-
|
113
|
-
```sh
|
114
|
-
bundle exec rails webpacker:install
|
115
|
-
yarn add "rails/webpacker" # because the installer has a bug that puts in an invalid version in your package.json.
|
116
|
-
bundle exec rails webpacker:install:react
|
117
|
-
yarn add --dev webpack-dev-server
|
118
|
-
run rails generate react_on_rails:install && bundle && yarn
|
105
|
+
rails generate react_on_rails:install
|
119
106
|
```
|
120
107
|
|
121
|
-
|
108
|
+
Then run server with a static client bundle. Static means that the bundle is saved in your
|
109
|
+
public/webpack/packs directory.
|
122
110
|
|
123
|
-
|
111
|
+
```
|
112
|
+
foreman start -f Procfile.dev
|
113
|
+
```
|
124
114
|
|
125
|
-
|
126
|
-
|
115
|
+
## To run with the webpack-dev-server:
|
116
|
+
```
|
117
|
+
foreman start -f Procfile.dev-hmr
|
127
118
|
```
|
128
119
|
|
129
|
-
|
120
|
+
Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
|
130
121
|
|
122
|
+
# HMR vs. React Hot Reloading
|
131
123
|
|
132
|
-
|
124
|
+
First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
|
133
125
|
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
* `node_modules`
|
126
|
+
The basic setup will have HMR working with the default webpacker setup. The basic
|
127
|
+
[HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
|
128
|
+
React setup, will cause a full page refresh each time you save a file.
|
138
129
|
|
139
130
|
## Deploying to Heroku
|
140
131
|
|
@@ -157,17 +148,16 @@ Set heroku to use multiple buildpacks:
|
|
157
148
|
|
158
149
|
### Swap out sqlite for postgres by doing the following:
|
159
150
|
|
160
|
-
|
151
|
+
Run these two commands:
|
161
152
|
|
162
|
-
```ruby
|
163
|
-
gem 'pg'
|
164
153
|
```
|
165
|
-
|
166
|
-
|
154
|
+
bundle remove sqlite3
|
155
|
+
bundle add pg
|
156
|
+
```
|
167
157
|
|
168
158
|
![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
|
169
159
|
|
170
|
-
|
160
|
+
### Replace your `database.yml` file with this (assuming your app name is "ror").
|
171
161
|
|
172
162
|
```yml
|
173
163
|
default: &default
|
@@ -195,7 +185,6 @@ production:
|
|
195
185
|
Then you need to setup postgres so you can run locally:
|
196
186
|
|
197
187
|
```
|
198
|
-
bundle
|
199
188
|
rake db:setup
|
200
189
|
rake db:migrate
|
201
190
|
```
|
@@ -219,7 +208,7 @@ Create `/Procfile`. This is what Heroku uses to start your app.
|
|
219
208
|
web: bundle exec puma -C config/puma.rb
|
220
209
|
```
|
221
210
|
|
222
|
-
Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of
|
211
|
+
Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2020-06-04, the docs looked like this:
|
223
212
|
|
224
213
|
`config/puma.rb`
|
225
214
|
```rb
|
@@ -240,10 +229,19 @@ on_worker_boot do
|
|
240
229
|
end
|
241
230
|
```
|
242
231
|
|
232
|
+
Next, update your `package.json` to specify the version of yarn and node. Add this section:
|
233
|
+
|
234
|
+
```json
|
235
|
+
"engines": {
|
236
|
+
"node": "13.9.0",
|
237
|
+
"yarn": "1.22.4"
|
238
|
+
},
|
239
|
+
```
|
240
|
+
|
243
241
|
Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
|
244
242
|
|
245
243
|
```
|
246
|
-
git add -
|
244
|
+
git add -A
|
247
245
|
git commit -m "Changes for Heroku"
|
248
246
|
git push heroku master
|
249
247
|
```
|
@@ -256,7 +254,6 @@ heroku open
|
|
256
254
|
|
257
255
|
and you will see your live app and you can share this URL with your friends. Congrats!
|
258
256
|
|
259
|
-
|
260
257
|
## Turning on Server Rendering
|
261
258
|
|
262
259
|
You can turn on server rendering by simply changing the `prerender` option to `true`:
|
@@ -265,10 +262,20 @@ You can turn on server rendering by simply changing the `prerender` option to `t
|
|
265
262
|
<%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
|
266
263
|
```
|
267
264
|
|
265
|
+
If you want to test this out with HMR, then you also need to add this line to your
|
266
|
+
`config/intializers/react_on_rails.rb`
|
267
|
+
|
268
|
+
```ruby
|
269
|
+
config.same_bundle_for_client_and_server = true
|
270
|
+
```
|
271
|
+
|
272
|
+
More likely, you will create a different build file for server rendering. However, if you want to
|
273
|
+
use the same file from the webpack-dev-server, you'll need to add that line.
|
274
|
+
|
268
275
|
Then push to Heroku:
|
269
276
|
|
270
277
|
```
|
271
|
-
git add -
|
278
|
+
git add -A
|
272
279
|
git commit -m "Enable server rendering"
|
273
280
|
git push heroku master
|
274
281
|
```
|
@@ -309,7 +316,7 @@ mv app/javascript client
|
|
309
316
|
|
310
317
|
## Using HMR with the rails/webpacker setup
|
311
318
|
|
312
|
-
Start the app using `foreman start -f Procfile.dev-
|
319
|
+
Start the app using `foreman start -f Procfile.dev-hmr`.
|
313
320
|
|
314
321
|
When you change a JSX file and save, the browser will automatically refresh!
|
315
322
|
|
@@ -318,11 +325,30 @@ So you get some basics from HMR with no code changes. If you want to go further,
|
|
318
325
|
* https://github.com/rails/webpacker/blob/master/docs/webpack-dev-server.md
|
319
326
|
* https://webpack.js.org/configuration/dev-server/
|
320
327
|
* https://webpack.js.org/concepts/hot-module-replacement/
|
321
|
-
* https://gaearon.github.io/react-hot-loader/getstarted/
|
322
|
-
* https://github.com/gaearon/react-hot-loader
|
323
328
|
|
324
329
|
React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by rails/webpacker.
|
325
330
|
|
331
|
+
|
332
|
+
### Custom IP & PORT setup (Cloud9 example)
|
333
|
+
|
334
|
+
In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
|
335
|
+
|
336
|
+
``` Procfile.dev
|
337
|
+
web: rails s -p 8080 -b 0.0.0.0
|
338
|
+
```
|
339
|
+
|
340
|
+
Then visit https://your-shared-addr.c9users.io:8080/hello_world
|
341
|
+
|
342
|
+
## RubyMine
|
343
|
+
|
344
|
+
It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
|
345
|
+
|
346
|
+
* Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
|
347
|
+
* `node_modules`
|
348
|
+
|
349
|
+
|
350
|
+
|
351
|
+
|
326
352
|
## Conclusion
|
327
353
|
|
328
354
|
* Browse the docs either on the [gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) or in the [docs directory on github](https://github.com/shakacode/react_on_rails/tree/master/docs)
|