react_on_rails 10.0.0 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.eslintrc +4 -0
- data/.rubocop.yml +2 -2
- data/.travis.yml +3 -0
- data/CHANGELOG.md +81 -88
- data/CONTRIBUTING.md +0 -7
- data/Dockerfile_tests +12 -0
- data/Gemfile +8 -13
- data/NEWS.md +2 -0
- data/PROJECTS.md +10 -2
- data/README.md +137 -121
- data/app/helpers/react_on_rails_helper.rb +1 -533
- data/docker-compose.yml +11 -0
- data/docs/additional-reading/caching-and-performance.md +4 -0
- data/docs/additional-reading/capistrano-deployment.md +18 -0
- data/docs/additional-reading/elastic-beanstalk.md +53 -33
- data/docs/additional-reading/server-rendering-tips.md +4 -4
- data/docs/additional-reading/troubleshooting-when-using-webpacker.md +90 -0
- data/docs/api/ruby-api.md +7 -2
- data/docs/basics/configuration.md +23 -9
- data/docs/basics/i18n.md +4 -0
- data/docs/basics/upgrading-react-on-rails.md +181 -0
- data/docs/tutorial.md +7 -11
- data/lib/generators/react_on_rails/base_generator.rb +6 -3
- data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
- data/lib/generators/react_on_rails/install_generator.rb +1 -1
- data/lib/generators/react_on_rails/react_no_redux_generator.rb +1 -1
- data/lib/generators/react_on_rails/react_with_redux_generator.rb +2 -2
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +1 -1
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +3 -2
- data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +2 -2
- data/lib/react_on_rails/assets_precompile.rb +8 -4
- data/lib/react_on_rails/configuration.rb +34 -20
- data/lib/react_on_rails/error.rb +4 -0
- data/lib/react_on_rails/locales_to_js.rb +2 -2
- data/lib/react_on_rails/prerender_error.rb +2 -2
- data/lib/react_on_rails/react_on_rails_helper.rb +547 -0
- data/lib/react_on_rails/server_rendering_pool/{exec.rb → ruby_embedded_java_script.rb} +37 -40
- data/lib/react_on_rails/server_rendering_pool.rb +21 -10
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +2 -2
- data/lib/react_on_rails/test_helper.rb +1 -1
- data/lib/react_on_rails/utils.rb +14 -52
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +33 -12
- data/lib/react_on_rails/webpacker_utils.rb +42 -0
- data/lib/react_on_rails.rb +3 -2
- data/package.json +2 -5
- data/rakelib/dummy_apps.rake +2 -1
- data/rakelib/example_type.rb +1 -1
- data/rakelib/examples.rake +3 -2
- data/rakelib/lint.rake +3 -2
- data/rakelib/node_package.rake +2 -1
- data/rakelib/release.rake +4 -5
- data/rakelib/run_rspec.rake +3 -4
- data/rakelib/task_helpers.rb +1 -1
- data/react_on_rails.gemspec +23 -13
- data/yarn.lock +3 -39
- metadata +75 -49
- data/lib/react_on_rails/server_rendering_pool/node.rb +0 -83
- data/lib/react_on_rails/test_helper/node_process_launcher.rb +0 -14
|
@@ -17,15 +17,15 @@ The point is that you have separate files for top level client or server side, a
|
|
|
17
17
|
## Troubleshooting Server Rendering
|
|
18
18
|
|
|
19
19
|
1. First be sure your code works with server rendering disabled (`prerender: false`)
|
|
20
|
-
2.
|
|
20
|
+
2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Webpacker, you will also get the whole file used to setup the JavaScript context.
|
|
21
21
|
|
|
22
|
-
## setTimeout and
|
|
22
|
+
## setTimeout, setInterval, and clearTimeout
|
|
23
23
|
|
|
24
|
-
These methods are polyfilled for server rendering to be no-ops. We
|
|
24
|
+
These methods are polyfilled for server rendering to be no-ops. We log calls to these when in `trace` mode. In the past, some libraries, namely babel-polyfill, did call setTimout.
|
|
25
25
|
|
|
26
26
|
Here's an example of this which shows the line numbers that end up calling setTimeout:
|
|
27
27
|
```
|
|
28
|
-
➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ export
|
|
28
|
+
➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ export SERVER_TRACE_REACT_ON_RAILS=TRUE
|
|
29
29
|
➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ rspec
|
|
30
30
|
Hello World
|
|
31
31
|
Building Webpack client-rendering assets...
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
## Context
|
|
2
|
+
|
|
3
|
+
Rails: 5.0.2
|
|
4
|
+
react_on_rails: upgraded from 6.6.0 to 9.0.3
|
|
5
|
+
|
|
6
|
+
## The failure
|
|
7
|
+
|
|
8
|
+
Rspec failing with
|
|
9
|
+
```
|
|
10
|
+
Failure/Error: raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
|
|
11
|
+
|
|
12
|
+
Webpacker::Manifest::MissingEntryError:
|
|
13
|
+
Webpacker can't find webpack-bundle.js in /home/user/ws/pp/code/pp-core-checkout_spa_update_npm/public/webpack-test/manifest.json. Possible causes:
|
|
14
|
+
1. You want to set webpacker.yml value of compile to true for your environment
|
|
15
|
+
unless you are using the `webpack -w` or the webpack-dev-server.
|
|
16
|
+
2. Webpack has not yet re-run to reflect updates.
|
|
17
|
+
3. You have misconfigured Webpacker's config/webpacker.yml file.
|
|
18
|
+
4. Your Webpack configuration is not creating a manifest.
|
|
19
|
+
Your manifest contains:
|
|
20
|
+
{
|
|
21
|
+
"main.css": "/webpack-test/main-bundle.css",
|
|
22
|
+
"main.js": "/webpack-test/main-dde0e05a2817931424c3.js"
|
|
23
|
+
}
|
|
24
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:44:in `handle_missing_entry'
|
|
25
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:40:in `find'
|
|
26
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:27:in `lookup'
|
|
27
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/utils.rb:145:in `bundle_js_file_path_from_webpacker'
|
|
28
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/utils.rb:90:in `bundle_js_file_path'
|
|
29
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:56:in `block in all_compiled_assets'
|
|
30
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:55:in `map'
|
|
31
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:55:in `all_compiled_assets'
|
|
32
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:35:in `stale_generated_webpack_files'
|
|
33
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/ensure_assets_compiled.rb:34:in `call'
|
|
34
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper.rb:85:in `ensure_assets_compiled'
|
|
35
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper.rb:39:in `block (2 levels) in configure_rspec_to_compile_assets'
|
|
36
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rspec-core-3.5.4/lib/rspec/core/example.rb:443:in `instance_exec'
|
|
37
|
+
...
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
At the same time dev/prod environments works fine (with extra webpack calling step outside rails).
|
|
41
|
+
|
|
42
|
+
## Configs
|
|
43
|
+
|
|
44
|
+
### webpack.config.js
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
...
|
|
48
|
+
const ManifestPlugin = require('webpack-manifest-plugin');
|
|
49
|
+
...
|
|
50
|
+
const { output } = webpackConfigLoader(configPath);
|
|
51
|
+
...
|
|
52
|
+
output: {
|
|
53
|
+
filename: '[name]-[hash].js',
|
|
54
|
+
|
|
55
|
+
// Leading and trailing slashes ARE necessary.
|
|
56
|
+
publicPath: output.publicPath,
|
|
57
|
+
path: output.path,
|
|
58
|
+
},
|
|
59
|
+
...
|
|
60
|
+
plugins: [
|
|
61
|
+
...
|
|
62
|
+
new ManifestPlugin({
|
|
63
|
+
publicPath: output.publicPath,
|
|
64
|
+
writeToFileEmit: true
|
|
65
|
+
}),
|
|
66
|
+
...
|
|
67
|
+
]
|
|
68
|
+
...
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### config/webpacker.yml
|
|
72
|
+
|
|
73
|
+
is default from sample appliction v9.x
|
|
74
|
+
|
|
75
|
+
### config/initializers/react_on_rails.rb
|
|
76
|
+
|
|
77
|
+
```ruby
|
|
78
|
+
...
|
|
79
|
+
# Define the files we need to check for webpack compilation when running tests.
|
|
80
|
+
config.webpack_generated_files = %w( webpack-bundle.js main-bundle.css )
|
|
81
|
+
...
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## The problem
|
|
85
|
+
|
|
86
|
+
When `ReactOnRails.configuration.webpack_generated_files` is specified, it prevents usage of `manifest.json`
|
|
87
|
+
|
|
88
|
+
## Solution
|
|
89
|
+
|
|
90
|
+
Removing of `config.webpack_generated_files` from `config/initializers/react_on_rails.rb` resolving issue.
|
data/docs/api/ruby-api.md
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
# View Helpers
|
|
2
|
+
See the [app/helpers/react_on_rails_helper.rb](../../app/helpers/react_on_rails_helper.rb) source.
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
# Controller Helpers
|
|
5
|
+
See the [lib/react_on_rails/controller.rb](../../lib/react_on_rails/controller.rb) source.
|
|
6
|
+
|
|
7
|
+
# Utility Methods
|
|
8
|
+
See the [lib/react_on_rails/utils.rb](../../lib/react_on_rails/utils.rb) source.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Here is the full set of config options.
|
|
1
|
+
Here is the full set of config options. This file is `/config/initializers/react_on_rails.rb`
|
|
2
2
|
|
|
3
3
|
```ruby
|
|
4
4
|
# frozen_string_literal: true
|
|
@@ -7,6 +7,13 @@ Here is the full set of config options.
|
|
|
7
7
|
# Thus, you only need to pay careful attention to the non-commented settings in this file.
|
|
8
8
|
|
|
9
9
|
ReactOnRails.configure do |config|
|
|
10
|
+
# `trace`: General debugging flag.
|
|
11
|
+
# The default is true for development, off otherwise.
|
|
12
|
+
# With true, you get detailed logs of rendering and stack traces if you call setTimout,
|
|
13
|
+
# setInterval, clearTimout when server rendering.
|
|
14
|
+
config.trace = Rails.env.development?
|
|
15
|
+
|
|
16
|
+
|
|
10
17
|
# defaults to "" (top level)
|
|
11
18
|
#
|
|
12
19
|
config.node_modules_location = ""
|
|
@@ -66,6 +73,7 @@ ReactOnRails.configure do |config|
|
|
|
66
73
|
#
|
|
67
74
|
# While you may configure this to be the same as your client bundle file, this file is typically
|
|
68
75
|
# different.
|
|
76
|
+
#
|
|
69
77
|
config.server_bundle_js_file = "server-bundle.js"
|
|
70
78
|
|
|
71
79
|
# If set to true, this forces Rails to reload the server bundle if it is modified
|
|
@@ -73,13 +81,15 @@ ReactOnRails.configure do |config|
|
|
|
73
81
|
#
|
|
74
82
|
config.development_mode = Rails.env.development?
|
|
75
83
|
|
|
76
|
-
# For server rendering
|
|
84
|
+
# For server rendering so that it replays in the browser console.
|
|
85
|
+
# This can be set to false so that server side messages are not displayed in the browser.
|
|
77
86
|
# Default is true. Be cautious about turning this off.
|
|
78
87
|
# Default value is true
|
|
79
|
-
#
|
|
88
|
+
#
|
|
80
89
|
config.replay_console = true
|
|
81
90
|
|
|
82
|
-
# Default is true. Logs server rendering messages to Rails.logger.info
|
|
91
|
+
# Default is true. Logs server rendering messages to Rails.logger.info. If false, you'll only
|
|
92
|
+
# see the server rendering messages in the browser console.
|
|
83
93
|
#
|
|
84
94
|
config.logging_on_server = true
|
|
85
95
|
|
|
@@ -88,7 +98,14 @@ ReactOnRails.configure do |config|
|
|
|
88
98
|
#
|
|
89
99
|
config.raise_on_prerender_error = false
|
|
90
100
|
|
|
91
|
-
|
|
101
|
+
################################################################################
|
|
102
|
+
# Server Renderer Configuration for ExecJS
|
|
103
|
+
################################################################################
|
|
104
|
+
# The default server rendering is ExecJS, probably using the mini_racer gem
|
|
105
|
+
# If you wish to use an alternative Node server rendering for higher performance,
|
|
106
|
+
# contact justin@shakacode.com for details.
|
|
107
|
+
#
|
|
108
|
+
# For ExecJS:
|
|
92
109
|
# You can configure your pool of JS virtual machines and specify where it should load code:
|
|
93
110
|
# On MRI, use `mini_racer` for the best performance
|
|
94
111
|
# (see [discussion](https://github.com/reactjs/react-rails/pull/290))
|
|
@@ -111,7 +128,7 @@ ReactOnRails.configure do |config|
|
|
|
111
128
|
# By default(without this option) all yaml files from Rails.root.join("config", "locales")
|
|
112
129
|
# and installed gems are loaded
|
|
113
130
|
config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
|
|
114
|
-
|
|
131
|
+
|
|
115
132
|
################################################################################
|
|
116
133
|
################################################################################
|
|
117
134
|
# CLIENT RENDERING OPTIONS
|
|
@@ -120,9 +137,6 @@ ReactOnRails.configure do |config|
|
|
|
120
137
|
################################################################################
|
|
121
138
|
# default is false
|
|
122
139
|
config.prerender = false
|
|
123
|
-
|
|
124
|
-
# default is true for development, off otherwise
|
|
125
|
-
config.trace = Rails.env.development?
|
|
126
140
|
end
|
|
127
141
|
|
|
128
142
|
```
|
data/docs/basics/i18n.md
CHANGED
|
@@ -71,3 +71,7 @@ You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/rea
|
|
|
71
71
|
{ formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
|
|
72
72
|
)
|
|
73
73
|
```
|
|
74
|
+
|
|
75
|
+
# Notes
|
|
76
|
+
|
|
77
|
+
* See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
# Upgrading React on Rails
|
|
2
|
+
|
|
3
|
+
## Upgrading to version 11
|
|
4
|
+
* Remove `server_render_method` from config/initializers/react_on_rails.rb. Alternate server rendering methods are part of React on Rails Pro. If you want to use a custom renderer, contact justin@shakacode.com. We have a custom node rendering solution in production for egghead.io.
|
|
5
|
+
* Remove your usage of ENV["TRACE_REACT_ON_RAILS"] usage. You can get all tracing with either specifying trace at your component or in your config/initializers/react_on_rails.rb file.
|
|
6
|
+
* ReactOnRails::Utils.server_bundle_file_name and ReactOnRails::Utils.bundle_file_name were removed. React on Rails Pro contains upgrades to enable component and other types caching with React on Rails.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Upgrading to version 10
|
|
10
|
+
|
|
11
|
+
Pretty simple:
|
|
12
|
+
* Follow the steps to migrate to version 9 (except installing 10.x instead of 9.x)
|
|
13
|
+
* If you have `react_component` returning hashes, then switch to `react_component_hash` instead
|
|
14
|
+
|
|
15
|
+
## Upgrading to version 9
|
|
16
|
+
|
|
17
|
+
### Why Webpacker?
|
|
18
|
+
Webpacker provides areas of value:
|
|
19
|
+
* View helpers that support bypassing the asset pipeline, which allows you to avoid double minification and enable source maps in production. This is 100% a best practice as source maps in production greatly increases the value of services such as HoneyBadger or Sentry.
|
|
20
|
+
* A default Webpack config so that you only need to do minimal modifications and customizations. However, if you're doing server rendering, you may not want to give up control. Since Webpacker's default webpack config is changing often, we at Shakacode can give you definitive advice on webpack configuration best practices. In general, if you're happy with doing your own Webpack configuration, then we suggest using the `client` strategy discussed below. Most corporate projects will prefer having more control than direct dependence on webpacker easily allows.
|
|
21
|
+
|
|
22
|
+
### Integrating Webpacker
|
|
23
|
+
Reason for doing this: This enables your webpack bundles to bypass the Rails asset pipeline and it's extra minification, enabling you to use source-maps in production, while still maintaining total control over everything in the client directory
|
|
24
|
+
|
|
25
|
+
#### From version 7 or lower
|
|
26
|
+
|
|
27
|
+
##### ...while keeping your `client` directory
|
|
28
|
+
Unfortunately, this requires quite a few steps:
|
|
29
|
+
* `.gitignore`: add `/public/webpack/*`
|
|
30
|
+
* `Gemfile`: bump `react_on_rails` and add `webpacker`
|
|
31
|
+
* layout views: anything bundled by webpack will need to be requested by a `javascript_pack_tag` or `stylesheet_pack_tag`
|
|
32
|
+
* `config/initializers/assets.rb`: we no longer need to modify `Rails.application.config.assets.paths` or append anything to `Rails.application.config.assets.precompile`.
|
|
33
|
+
* `config/initializers/react_on_rails.rb`:
|
|
34
|
+
* Delete `config.generated_assets_dir`. Webpacker's config now supplies this information
|
|
35
|
+
* Replace `config.npm_build_(test|production)_command` with `config.build_(test|production)_command`
|
|
36
|
+
* `config/webpacker.yml`: start with our [example config](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/webpacker.yml) (feel free to modify it as needed). I recommend setting dev_server.hmr to false however since HMR is currently broken.
|
|
37
|
+
* `client/package.json`: bump `react_on_rails` (I recommend bumping `webpack` as well). You'll also need `js-yaml` if you're not already using `eslint` and `webpack-manifest-plugin` regardless.
|
|
38
|
+
|
|
39
|
+
###### Client Webpack config:
|
|
40
|
+
* You'll need the following code to read data from the webpacker config:
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
const path = require('path');
|
|
44
|
+
const ManifestPlugin = require('webpack-manifest-plugin'); // we'll use this later
|
|
45
|
+
|
|
46
|
+
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
|
|
47
|
+
const configPath = path.resolve('..', 'config');
|
|
48
|
+
const { output } = webpackConfigLoader(configPath);
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
* That output variable will be used for webpack's `output` rules:
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
output: {
|
|
55
|
+
filename: '[name]-[chunkhash].js', // [chunkhash] because we've got to do our own cache-busting now
|
|
56
|
+
path: output.path,
|
|
57
|
+
publicPath: output.publicPath,
|
|
58
|
+
},
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
* ...as well as for the output of plugins like `webpack-manifest-plugin`:
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
new ManifestPlugin({
|
|
66
|
+
publicPath: output.publicPath,
|
|
67
|
+
writeToFileEmit: true
|
|
68
|
+
}),
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
* If you're using referencing files or images with `url-loader` & `file-loader`, their publicpaths will have to change as well: `publicPath: '/webpack/',`
|
|
72
|
+
* If you're using `css-loader`, `webpack.optimize.CommonsChunkPlugin`, or `extract-text-webpack-plugin`, they will also need cache-busting!
|
|
73
|
+
|
|
74
|
+
...and you're finally done!
|
|
75
|
+
|
|
76
|
+
##### ...while replacing your `client` directory
|
|
77
|
+
* Make the same changes to `config/initializers/react_on_rails.rb as described above`
|
|
78
|
+
* Upgrade RoR & add Webpacker in the Gemfile
|
|
79
|
+
* Upgrade RoR in the `client/package.json`
|
|
80
|
+
* Run `bundle`
|
|
81
|
+
* Run `rails webpacker:install`
|
|
82
|
+
* Run `rails webpacker:install:react`
|
|
83
|
+
* Run `rails g react_on_rails:install`
|
|
84
|
+
* Move your entry point files to `app/javascript/packs`
|
|
85
|
+
* Either:
|
|
86
|
+
* Move all your source code to `app/javascript/bundles`, move your linter configs to the root directory, and then delete the `client` directory
|
|
87
|
+
* or just delete the webpack config and remove webpack, its loaders, and plugins from your `client/package.json`.
|
|
88
|
+
|
|
89
|
+
...and you're done.
|
|
90
|
+
|
|
91
|
+
#### From version 8
|
|
92
|
+
|
|
93
|
+
For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https://github.com/shakacode/react-webpack-rails-tutorial/pull/416).
|
|
94
|
+
|
|
95
|
+
- Breaking Configuration Changes
|
|
96
|
+
1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
|
|
97
|
+
2. Renamed
|
|
98
|
+
* config.npm_build_test_command ==> config.build_test_command
|
|
99
|
+
* config.npm_build_production_command ==> config.build_production_command
|
|
100
|
+
|
|
101
|
+
- Update the gemfile. Switch over to using the webpacker gem.
|
|
102
|
+
|
|
103
|
+
```rb
|
|
104
|
+
gem "webpacker"
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
- Update for the renaming in the `WebpackConfigLoader` in your webpack configuration.
|
|
108
|
+
You will need to rename the following object properties:
|
|
109
|
+
- webpackOutputPath ==> output.path
|
|
110
|
+
- webpackPublicOutputDir ==> output.publicPath
|
|
111
|
+
- hotReloadingUrl ==> output.publicPathWithHost
|
|
112
|
+
- hotReloadingHostname ==> settings.dev_server.host
|
|
113
|
+
- hotReloadingPort ==> settings.dev_server.port
|
|
114
|
+
- hmr ==> settings.dev_server.hmr
|
|
115
|
+
- manifest ==> Remove this one. We use the default for Webpack of manifest.json
|
|
116
|
+
- env ==> Use `const { env } = require('process');`
|
|
117
|
+
- devBuild ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
|
|
118
|
+
|
|
119
|
+
- Edit your Webpack.config files:
|
|
120
|
+
- Change your Webpack output to be like this. **Be sure to have the hash or chunkhash in the filename,** unless the bundle is server side.:
|
|
121
|
+
```
|
|
122
|
+
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
|
|
123
|
+
const configPath = resolve('..', 'config');
|
|
124
|
+
const { output, settings } = webpackConfigLoader(configPath);
|
|
125
|
+
const hmr = settings.dev_server.hmr;
|
|
126
|
+
const devBuild = process.env.NODE_ENV !== 'production';
|
|
127
|
+
|
|
128
|
+
output: {
|
|
129
|
+
filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
|
|
130
|
+
chunkFilename: '[name]-[chunkhash].chunk.js',
|
|
131
|
+
|
|
132
|
+
publicPath: output.publicPath,
|
|
133
|
+
path: output.path,
|
|
134
|
+
},
|
|
135
|
+
```
|
|
136
|
+
- Change your ManifestPlugin definition to something like the following
|
|
137
|
+
```
|
|
138
|
+
new ManifestPlugin({
|
|
139
|
+
publicPath: output.publicPath,
|
|
140
|
+
writeToFileEmit: true
|
|
141
|
+
}),
|
|
142
|
+
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
- Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
|
|
146
|
+
- Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
|
|
147
|
+
- If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
|
|
148
|
+
- Alternately, if you are updating from webpacker_lite, you can manually change these:
|
|
149
|
+
- Add a default setting
|
|
150
|
+
```
|
|
151
|
+
cache_manifest: false
|
|
152
|
+
```
|
|
153
|
+
- For production, set:
|
|
154
|
+
```
|
|
155
|
+
cache_manifest: true
|
|
156
|
+
```
|
|
157
|
+
- Add a section like this under your development env:
|
|
158
|
+
```
|
|
159
|
+
dev_server:
|
|
160
|
+
host: localhost
|
|
161
|
+
port: 3035
|
|
162
|
+
hmr: false
|
|
163
|
+
```
|
|
164
|
+
Set hmr to your preference.
|
|
165
|
+
- See the example `spec/dummy/config/webpacker.yml`.
|
|
166
|
+
- Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
|
|
167
|
+
- Rename `webpack_public_output_dir` to `public_output_path`.
|
|
168
|
+
|
|
169
|
+
- Edit your Procfile.dev
|
|
170
|
+
- Remove the env value WEBPACKER_DEV_SERVER as it's not used
|
|
171
|
+
- For hot loading:
|
|
172
|
+
- Set the `hmr` key in your `webpacker.yml` to `true`.
|
|
173
|
+
|
|
174
|
+
### Without integrating webpacker
|
|
175
|
+
* Bump your ReactOnRails versions in `Gemfile` & `package.json`
|
|
176
|
+
* In `/config/initializers/react_on_rails.rb`:
|
|
177
|
+
* Rename `config.npm_build_test_command` ==> `config.build_test_command`
|
|
178
|
+
* Rename `config.npm_build_production_command` ==> `config.build_production_command`
|
|
179
|
+
* Add `config.node_modules_location = "client"`
|
|
180
|
+
|
|
181
|
+
...and you're done.
|
data/docs/tutorial.md
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
# React on Rails Basic Tutorial
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 9.0.0.
|
|
3
|
+
This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 10.0.2.
|
|
7
4
|
|
|
8
5
|
After finishing this tutorial you will get an application that can do the following (live on Heroku):
|
|
9
6
|
|
|
@@ -39,7 +36,7 @@ gem install rails # download and install latest stable Rails
|
|
|
39
36
|
gem install foreman # download and install Foreman
|
|
40
37
|
```
|
|
41
38
|
|
|
42
|
-
Then we need to create a fresh Rails application with webpacker react support as following.
|
|
39
|
+
Then we need to create a fresh Rails application with webpacker react support as following.
|
|
43
40
|
|
|
44
41
|
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).
|
|
45
42
|
|
|
@@ -52,23 +49,22 @@ rails new test-react-on-rails --webpack=react
|
|
|
52
49
|
cd test-react-on-rails
|
|
53
50
|
```
|
|
54
51
|
|
|
55
|
-
Note: you
|
|
52
|
+
Note: if you are installing React On Rails in an existing app or an app that uses Rails pre 5.1.3, you will need to run these two commands as well:
|
|
56
53
|
|
|
57
54
|
```
|
|
58
55
|
bundle exec rails webpacker:install
|
|
59
56
|
bundle exec rails webpacker:install:react
|
|
60
57
|
```
|
|
61
58
|
|
|
62
|
-
|
|
63
|
-
|
|
64
59
|
Add the **React On Rails** gem to your Gemfile:
|
|
65
60
|
|
|
66
61
|
```
|
|
67
|
-
gem 'react_on_rails', '
|
|
62
|
+
gem 'react_on_rails', '10.0.2' # prefer exact gem version to match npm version
|
|
68
63
|
```
|
|
69
64
|
|
|
65
|
+
Note: Latest released React On Rails version is considered stable. Please use the latest version to ensure you get all the security patches and the best support.
|
|
70
66
|
|
|
71
|
-
|
|
67
|
+
Run `bundle` and commit the git repository (or `rails generate` will not work properly)
|
|
72
68
|
|
|
73
69
|
|
|
74
70
|
```
|
|
@@ -80,7 +76,7 @@ git add -A
|
|
|
80
76
|
git commit -m "Initial commit"
|
|
81
77
|
```
|
|
82
78
|
|
|
83
|
-
Install React on Rails: `rails
|
|
79
|
+
Install React on Rails: `rails generate react_on_rails:install` or `rails generate react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
|
|
84
80
|
|
|
85
81
|
```
|
|
86
82
|
rails generate react_on_rails:install
|
|
@@ -9,7 +9,7 @@ module ReactOnRails
|
|
|
9
9
|
class BaseGenerator < Rails::Generators::Base
|
|
10
10
|
include GeneratorHelper
|
|
11
11
|
Rails::Generators.hide_namespace(namespace)
|
|
12
|
-
source_root(File.expand_path("
|
|
12
|
+
source_root(File.expand_path("templates", __dir__))
|
|
13
13
|
|
|
14
14
|
# --redux
|
|
15
15
|
class_option :redux,
|
|
@@ -43,7 +43,7 @@ module ReactOnRails
|
|
|
43
43
|
end
|
|
44
44
|
|
|
45
45
|
def add_yarn_dependencies
|
|
46
|
-
run "yarn add react-on-rails"
|
|
46
|
+
run "yarn add react-on-rails --exact"
|
|
47
47
|
end
|
|
48
48
|
|
|
49
49
|
def append_to_spec_rails_helper
|
|
@@ -55,6 +55,7 @@ module ReactOnRails
|
|
|
55
55
|
if File.exist?(spec_helper)
|
|
56
56
|
add_configure_rspec_to_compile_assets(spec_helper)
|
|
57
57
|
else
|
|
58
|
+
# rubocop:disable Layout/EmptyLinesAroundArguments
|
|
58
59
|
GeneratorMessages.add_info(
|
|
59
60
|
<<-MSG.strip_heredoc
|
|
60
61
|
|
|
@@ -67,6 +68,8 @@ module ReactOnRails
|
|
|
67
68
|
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
68
69
|
MSG
|
|
69
70
|
)
|
|
71
|
+
# rubocop:enable Layout/EmptyLinesAroundArguments
|
|
72
|
+
|
|
70
73
|
end
|
|
71
74
|
end
|
|
72
75
|
end
|
|
@@ -95,7 +98,7 @@ module ReactOnRails
|
|
|
95
98
|
- Visit http://localhost:3000/hello_world and see your React On Rails app running!
|
|
96
99
|
|
|
97
100
|
- Run bin/webpack-dev-server to start the Webpack dev server for compilation of Webpack
|
|
98
|
-
assets
|
|
101
|
+
assets as soon as you save. This default setup with the dev server does not work
|
|
99
102
|
for server rendering
|
|
100
103
|
|
|
101
104
|
- Alternately, you may turn off compile in config/webpacker.yml and run the foreman
|
|
@@ -8,7 +8,7 @@ module ReactOnRails
|
|
|
8
8
|
class DevTestsGenerator < Rails::Generators::Base
|
|
9
9
|
include GeneratorHelper
|
|
10
10
|
Rails::Generators.hide_namespace(namespace)
|
|
11
|
-
source_root(File.expand_path("
|
|
11
|
+
source_root(File.expand_path("templates/dev_tests", __dir__))
|
|
12
12
|
|
|
13
13
|
# --example-server-rendering
|
|
14
14
|
class_option :example_server_rendering,
|
|
@@ -8,7 +8,7 @@ module ReactOnRails
|
|
|
8
8
|
class ReactNoReduxGenerator < Rails::Generators::Base
|
|
9
9
|
include GeneratorHelper
|
|
10
10
|
Rails::Generators.hide_namespace(namespace)
|
|
11
|
-
source_root(File.expand_path("
|
|
11
|
+
source_root(File.expand_path("templates", __dir__))
|
|
12
12
|
|
|
13
13
|
def copy_base_files
|
|
14
14
|
base_js_path = "base/base"
|
|
@@ -6,7 +6,7 @@ module ReactOnRails
|
|
|
6
6
|
module Generators
|
|
7
7
|
class ReactWithReduxGenerator < Rails::Generators::Base
|
|
8
8
|
Rails::Generators.hide_namespace(namespace)
|
|
9
|
-
source_root(File.expand_path("
|
|
9
|
+
source_root(File.expand_path("templates", __dir__))
|
|
10
10
|
|
|
11
11
|
def create_redux_directories
|
|
12
12
|
dirs = %w[actions constants containers reducers store startup]
|
|
@@ -14,7 +14,7 @@ module ReactOnRails
|
|
|
14
14
|
end
|
|
15
15
|
|
|
16
16
|
def copy_base_files
|
|
17
|
-
base_js_path = "
|
|
17
|
+
base_js_path = "redux/base"
|
|
18
18
|
base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
|
|
19
19
|
base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
|
|
20
20
|
end
|
|
@@ -13,7 +13,7 @@ export default class HelloWorld extends React.Component {
|
|
|
13
13
|
super(props);
|
|
14
14
|
|
|
15
15
|
// How to set initial state in ES6 class syntax
|
|
16
|
-
// https://
|
|
16
|
+
// https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
|
|
17
17
|
this.state = { name: this.props.name };
|
|
18
18
|
}
|
|
19
19
|
|
data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
-
# See docs/basics/configuration.md
|
|
3
|
+
# See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
|
|
4
|
+
# for many more options.
|
|
4
5
|
|
|
5
6
|
ReactOnRails.configure do |config|
|
|
6
7
|
# This configures the script to run to build the production assets by webpack. Set this to nil
|
|
7
8
|
# if you don't want react_on_rails building this file for you.
|
|
8
|
-
config.build_production_command = "RAILS_ENV=production bin/webpack"
|
|
9
|
+
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
|
|
9
10
|
|
|
10
11
|
################################################################################
|
|
11
12
|
################################################################################
|
|
@@ -6,13 +6,13 @@ if ENV["COVERAGE"] == "true"
|
|
|
6
6
|
require "simplecov"
|
|
7
7
|
|
|
8
8
|
# Using a command name prevents results from getting clobbered by other test suites
|
|
9
|
-
example_name = File.basename(File.expand_path("
|
|
9
|
+
example_name = File.basename(File.expand_path("../..", __dir__))
|
|
10
10
|
SimpleCov.command_name(example_name)
|
|
11
11
|
|
|
12
12
|
SimpleCov.start("rails") do
|
|
13
13
|
# Consider the entire gem project as the root
|
|
14
14
|
# (typically this will be the folder named "react_on_rails")
|
|
15
|
-
gem_root_path = File.expand_path("
|
|
15
|
+
gem_root_path = File.expand_path("../../../..", __dir__)
|
|
16
16
|
root gem_root_path
|
|
17
17
|
|
|
18
18
|
# Don't report anything that has "spec" in the path
|
|
@@ -72,7 +72,7 @@ module ReactOnRails
|
|
|
72
72
|
"or manifest.yml at #{@assets_path}, but found none. Canceling symlinking tasks."
|
|
73
73
|
return -1
|
|
74
74
|
end
|
|
75
|
-
manifest_path = manifest_glob
|
|
75
|
+
manifest_path = take_most_recent_manifest_path(manifest_glob)
|
|
76
76
|
manifest_file = File.new(manifest_path)
|
|
77
77
|
manifest_data = if File.extname(manifest_file) == ".json"
|
|
78
78
|
manifest_file_data = File.read(manifest_path)
|
|
@@ -102,8 +102,8 @@ module ReactOnRails
|
|
|
102
102
|
next unless File.lstat(filename).symlink?
|
|
103
103
|
begin
|
|
104
104
|
target = File.readlink(filename)
|
|
105
|
-
rescue
|
|
106
|
-
puts "React on Rails: Warning: your platform doesn't support File::readlink method."
|
|
105
|
+
rescue StandardError
|
|
106
|
+
puts "React on Rails: Warning: your platform doesn't support File::readlink method." \
|
|
107
107
|
"Skipping broken link check."
|
|
108
108
|
break
|
|
109
109
|
end
|
|
@@ -128,6 +128,10 @@ module ReactOnRails
|
|
|
128
128
|
|
|
129
129
|
private
|
|
130
130
|
|
|
131
|
+
def take_most_recent_manifest_path(manifest_glob)
|
|
132
|
+
manifest_glob.max_by { |name| File.mtime(name) }
|
|
133
|
+
end
|
|
134
|
+
|
|
131
135
|
def symlink_and_points_to_existing_file?(symlink_path)
|
|
132
136
|
# File.exist?(symlink_path) will check the file the sym is pointing to is existing
|
|
133
137
|
# File.lstat(symlink_path).symlink? confirms that this is a symlink
|
|
@@ -139,7 +143,7 @@ module ReactOnRails
|
|
|
139
143
|
# pointing to. We can't use File.exist?, as that would check the file pointed at by the symlink.
|
|
140
144
|
File.lstat(path)
|
|
141
145
|
true
|
|
142
|
-
rescue
|
|
146
|
+
rescue StandardError
|
|
143
147
|
false
|
|
144
148
|
end
|
|
145
149
|
end
|