react_on_rails 12.0.0.pre.beta.1 → 12.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.rubocop.yml +1 -0
- data/.travis.yml +6 -4
- data/CHANGELOG.md +27 -17
- data/README.md +77 -79
- data/SUMMARY.md +1 -1
- data/docs/additional-reading/converting-from-custom-webpack-config-to-rails-webpacker-config.md +10 -0
- data/docs/additional-reading/react-router.md +1 -1
- data/docs/additional-reading/server-rendering-tips.md +4 -1
- data/docs/api/javascript-api.md +3 -3
- data/docs/api/redux-store-api.md +2 -2
- data/docs/api/view-helpers-api.md +4 -4
- data/docs/basics/configuration.md +28 -17
- data/docs/basics/deployment.md +2 -3
- data/docs/basics/heroku-deployment.md +24 -0
- data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +49 -0
- data/docs/basics/i18n.md +3 -3
- data/docs/basics/installation-into-an-existing-rails-app.md +2 -7
- data/docs/basics/recommended-project-structure.md +5 -22
- data/docs/basics/render-functions-and-railscontext.md +1 -1
- data/docs/basics/rspec-configuration.md +27 -16
- data/docs/basics/upgrading-react-on-rails.md +35 -13
- data/docs/basics/webpack-configuration.md +3 -7
- data/docs/misc/doctrine.md +1 -1
- data/docs/outdated/code-splitting.md +3 -3
- data/docs/outdated/how-react-on-rails-works.md +8 -4
- data/docs/outdated/manual-installation-overview.md +1 -1
- data/docs/outdated/rails-assets.md +0 -7
- data/docs/tutorial.md +40 -30
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr +17 -9
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +4 -1
- data/lib/react_on_rails/configuration.rb +45 -6
- data/lib/react_on_rails/helper.rb +8 -8
- data/lib/react_on_rails/locales/base.rb +8 -0
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
- data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/webpacker_utils.rb +6 -0
- data/lib/tasks/assets.rake +47 -8
- data/lib/tasks/locale.rake +1 -5
- data/package.json +1 -1
- data/rakelib/examples.rake +1 -1
- data/rakelib/lint.rake +1 -1
- data/rakelib/release.rake +1 -3
- data/react_on_rails.gemspec +1 -0
- data/yarn.lock +260 -109
- metadata +21 -5
- data/docs/outdated/heroku-deployment.md +0 -86
@@ -5,28 +5,50 @@ If you would like help in migrating between React on Rails versions or help with
|
|
5
5
|
|
6
6
|
We specialize in helping companies to quickly and efficiently move from versions before 9 to current. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4 for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
|
7
7
|
|
8
|
-
## Upgrading to
|
9
|
-
|
10
|
-
|
8
|
+
## Upgrading to v12
|
9
|
+
### Recent versions
|
10
|
+
Make sure that you are on a relatively more recent version of rails and webpacker.
|
11
|
+
v12 is tested on Rails 6. It should work on Rails v5. If you're on any older version,
|
12
|
+
and v12 doesn't work, please file an issue.
|
13
|
+
|
14
|
+
### Removed Configuration config.symlink_non_digested_assets_regex
|
15
|
+
Remove `config.symlink_non_digested_assets_regex` from your `config/initializers/react_on_rails.rb`.
|
16
|
+
If you still need that feature, please file an issue.
|
17
|
+
|
18
|
+
### i18n default format changed to JSON
|
19
|
+
* If you're using the internalization helper, then set `config.i18n_output_format = 'js'`. You can
|
20
|
+
later update to the default JSON format as you will need to update your usage of that file. A JSON
|
21
|
+
format is more efficient.
|
22
|
+
|
23
|
+
### Updated API for `ReactOnRails.register()`
|
11
24
|
|
12
25
|
In order to solve the issues regarding React Hooks compatibility, the number of parameters
|
13
|
-
for functions is used to determine if you have a
|
26
|
+
for functions is used to determine if you have a Render-Function that will get invoked to
|
14
27
|
return a React component, or you are registering a React component defined by a function.
|
15
|
-
|
16
|
-
|
28
|
+
Please see [Render-Functions and the Rails Context](./render-functions-and-railscontext.md) for
|
29
|
+
more information on what a Render-Function is.
|
17
30
|
|
18
31
|
##### Correct
|
19
|
-
Either of these will work:
|
20
|
-
1. Take **2 params** and return **a React function or class component**. A function component is a function
|
21
|
-
that takes zero or one params and returns a React Element, like JSX.
|
22
|
-
```js
|
23
|
-
export default (props, _railsContext) => () => <Component {...props} />;
|
24
|
-
```
|
25
32
|
|
26
|
-
|
33
|
+
Registered Objects are of the following types. Either of these will work:
|
34
|
+
1. Takes only zero or one params and you return a React Element, often JSX.
|
27
35
|
```js
|
28
36
|
export default (props) => <Component {...props} />;
|
37
|
+
```
|
38
|
+
2. Takes **2 params** and returns **a React function or class component**. A function
|
39
|
+
component is a function that takes zero or one params and returns a React Element, like JSX.
|
40
|
+
```js
|
41
|
+
export default (props, _railsContext) => () => <Component {...props} />;
|
29
42
|
```
|
43
|
+
Note, you cannot return a React Element (JSX).
|
44
|
+
3. Takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`
|
45
|
+
|
46
|
+
Previously, with case number 2, you could return a React Element.
|
47
|
+
|
48
|
+
The fix is simple. Here is an example of the change you'll do:
|
49
|
+
|
50
|
+
![2020-07-07_09-43-51 (1)](https://user-images.githubusercontent.com/1118459/86927351-eff79e80-c0ce-11ea-9172-d6855c45e2bb.png)
|
51
|
+
|
30
52
|
##### Broken, as this function takes two params and it returns a React Element from a JSX Literal
|
31
53
|
```js
|
32
54
|
export default (props, _railsContext) => <Component {...props} />;
|
@@ -17,11 +17,11 @@ A key decision in your use React on Rails is whether you go with the rails/webpa
|
|
17
17
|
|
18
18
|
## Option 1: Recommended: Traditional React on Rails using the /client directory
|
19
19
|
|
20
|
-
Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
|
20
|
+
Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
|
21
21
|
|
22
|
-
The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for projects beyond the simplest cases as it provides the greatest transparency in your webpack and overall client-side setup. The *big advantage* to this is that almost everything within the `/client` directory will apply if you wish to convert your client-side code to a pure Single Page Application that runs without Rails. This allows you to
|
22
|
+
The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for projects beyond the simplest cases as it provides the greatest transparency in your webpack and overall client-side setup. The *big advantage* to this is that almost everything within the `/client` directory will apply if you wish to convert your client-side code to a pure Single Page Application that runs without Rails. This allows you to Google for how to do something with Webpack configuration and what applies to a non-Rails app will apply just as well to a React on Rails app.
|
23
23
|
|
24
|
-
|
24
|
+
An examples of this pattern is the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
|
25
25
|
|
26
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
27
|
|
@@ -45,10 +45,6 @@ Typical rails/webpacker apps have a standard directory structure as documented [
|
|
45
45
|
|
46
46
|
The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization. The *big disadvantage* to this is that you will need to learn the ins and outs of the [rails/webpacker way to customize Webpack](https://github.com/rails/webpacker/blob/master/docs/webpack.md) which differs from the plain [Webpack way](https://webpack.js.org/).
|
47
47
|
|
48
|
-
Overall, consider carefully if you prefer the `rails/webpacker` directory structure and Webpack configuration, over the placement of all client side files within the `/client` directory along with conventional Webpack configuration. Once again, the `/client` directory setup is recommended.
|
49
|
-
|
50
48
|
You can find more details on this topic in [Recommended Project Structure](./recommended-project-structure.md).
|
51
49
|
|
52
50
|
See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.
|
53
|
-
|
54
|
-
For more details on project setup, see [Recommended Project Structure](./docs/basics/recommended-project-structure.md).
|
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](docs/
|
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/basics/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:
|
@@ -21,11 +21,11 @@ Let's say you're requesting a page that needs to fetch a code chunk from the ser
|
|
21
21
|
> (server) <div data-reactroot="
|
22
22
|
<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
|
23
23
|
|
24
|
-
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.
|
25
25
|
|
26
26
|
### The solution
|
27
27
|
|
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
|
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.
|
29
29
|
|
30
30
|
Here's an example of how you might use this in practice:
|
31
31
|
|
@@ -134,7 +134,7 @@ If you're going to try to do code splitting with server rendered routes, you'll
|
|
134
134
|
|
135
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.
|
136
136
|
|
137
|
-
Also, do not attempt to register a renderer on the server. Instead, register either a
|
137
|
+
Also, do not attempt to register a renderer function 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.
|
138
138
|
|
139
139
|
## How does Webpack know where to find my code chunks?
|
140
140
|
|
@@ -28,13 +28,17 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
|
|
28
28
|
|
29
29
|
## Building the Bundles
|
30
30
|
|
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.
|
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. Alternately, the `rails/webpacker` library also can ensure that your bundles are built.
|
32
32
|
|
33
|
-
|
33
|
+
For example, you might create a [Procfile.dev](spec/dummy/Procfile.dev).
|
34
34
|
|
35
|
-
On production deployments that use asset precompilation, such as Heroku deployments,
|
35
|
+
On production deployments that use asset precompilation, such as Heroku deployments, `rails/webpacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpack` in your app.
|
36
36
|
|
37
|
-
|
37
|
+
However, if you want to run a custom command to run webpack to build your bundles, then you will:
|
38
|
+
1. Ensure you do not have a `config/webpack/production.js` file
|
39
|
+
1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](docs/basics/configuration.md)
|
40
|
+
|
41
|
+
Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
|
38
42
|
|
39
43
|
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
44
|
|
@@ -25,6 +25,6 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
|
|
25
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
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/
|
28
|
+
1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/basics/heroku-deployment.md)
|
29
29
|
|
30
30
|
If I missed anything, please submit a PR or file an issue.
|
@@ -36,13 +36,6 @@ _If you are interested in learning how to use assets in your React components, r
|
|
36
36
|
_Note, this solution was removed in v14. If you're intersted in this symlink solution, please create
|
37
37
|
a github issue._
|
38
38
|
|
39
|
-
React on Rails creates symlinks of non-digested versions (original webpack digested file names)
|
40
|
-
to the Rails deployed digested versions when doing a Rails assets compile. The solution is
|
41
|
-
implemented using `assets:precompile` after-hook in
|
42
|
-
file [lib/tasks/assets.rake](lib/tasks/assets.rake)
|
43
|
-
The assets for symlinking are defined by `config.symlink_non_digested_assets_regex` in
|
44
|
-
`config/initializers/react_on_rails.rb`.
|
45
|
-
|
46
39
|
## Example from /spec/dummy
|
47
40
|
|
48
41
|
```
|
data/docs/tutorial.md
CHANGED
@@ -119,31 +119,13 @@ foreman start -f Procfile.dev-hmr
|
|
119
119
|
|
120
120
|
Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
|
121
121
|
|
122
|
-
*Note, foreman may default to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.*
|
123
|
-
|
124
122
|
# HMR vs. React Hot Reloading
|
125
123
|
|
126
|
-
First, check that the `hmr`
|
127
|
-
|
128
|
-
The basic setup will have HMR working with the default webpacker setup. The basic HMR will cause
|
129
|
-
a full page refresh each time you save a file. You also lose any state on your page during the refresh. Don't try to use HMR
|
130
|
-
|
131
|
-
### Custom IP & PORT setup (Cloud9 example)
|
132
|
-
|
133
|
-
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`.
|
134
|
-
|
135
|
-
``` Procfile.dev
|
136
|
-
web: rails s -p 8080 -b 0.0.0.0
|
137
|
-
```
|
124
|
+
First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
|
138
125
|
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
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.
|
144
|
-
|
145
|
-
* Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
|
146
|
-
* `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.
|
147
129
|
|
148
130
|
## Deploying to Heroku
|
149
131
|
|
@@ -166,17 +148,16 @@ Set heroku to use multiple buildpacks:
|
|
166
148
|
|
167
149
|
### Swap out sqlite for postgres by doing the following:
|
168
150
|
|
169
|
-
|
151
|
+
Run these two commands:
|
170
152
|
|
171
|
-
```ruby
|
172
|
-
gem 'pg'
|
173
153
|
```
|
174
|
-
|
175
|
-
|
154
|
+
bundle remove sqlite3
|
155
|
+
bundle add pg
|
156
|
+
```
|
176
157
|
|
177
158
|
![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
|
178
159
|
|
179
|
-
|
160
|
+
### Replace your `database.yml` file with this (assuming your app name is "ror").
|
180
161
|
|
181
162
|
```yml
|
182
163
|
default: &default
|
@@ -204,7 +185,6 @@ production:
|
|
204
185
|
Then you need to setup postgres so you can run locally:
|
205
186
|
|
206
187
|
```
|
207
|
-
bundle
|
208
188
|
rake db:setup
|
209
189
|
rake db:migrate
|
210
190
|
```
|
@@ -228,7 +208,7 @@ Create `/Procfile`. This is what Heroku uses to start your app.
|
|
228
208
|
web: bundle exec puma -C config/puma.rb
|
229
209
|
```
|
230
210
|
|
231
|
-
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:
|
232
212
|
|
233
213
|
`config/puma.rb`
|
234
214
|
```rb
|
@@ -249,6 +229,15 @@ on_worker_boot do
|
|
249
229
|
end
|
250
230
|
```
|
251
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
|
+
|
252
241
|
Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
|
253
242
|
|
254
243
|
```
|
@@ -339,6 +328,27 @@ So you get some basics from HMR with no code changes. If you want to go further,
|
|
339
328
|
|
340
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.
|
341
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
|
+
|
342
352
|
## Conclusion
|
343
353
|
|
344
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)
|
@@ -1,18 +1,26 @@
|
|
1
|
+
# Procfile for development using HMR
|
2
|
+
|
1
3
|
web: rails s -p 3000
|
2
4
|
|
3
5
|
# Note, hot and live reloading don't work with the default generator setup on
|
4
6
|
# top of the rails/webpacker Webpack config with server rendering.
|
5
7
|
# If you have server rendering enabled (prerender is true), you either need to
|
6
|
-
# a.
|
8
|
+
# a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false,
|
9
|
+
# and you have this option in your config/initializers/react_on_rails.rb:
|
10
|
+
# config.same_bundle_for_client_and_server = true
|
11
|
+
# If you have either config/webpacker.yml option set to true, you'll see errors like
|
12
|
+
# "ReferenceError: window is not defined" (if hmr is true)
|
13
|
+
# "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
|
14
|
+
# b. Skip using the webpack-dev-server. bin/webpack --watch is typically
|
7
15
|
fast enough.
|
8
|
-
#
|
9
|
-
# SSR with HMR and React hot loading
|
10
|
-
#
|
11
|
-
# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
|
12
|
-
web: rails s -p 3000
|
16
|
+
# c. See the React on Rails README for a link to documentation for how to setup
|
17
|
+
# SSR with HMR and React hot loading using the webpack-dev-server only for the
|
18
|
+
# client bundles and a static file for the server bundle.
|
13
19
|
|
14
|
-
# Run the
|
20
|
+
# Run the webpack-dev-server for client and maybe server files
|
15
21
|
webpack-dev-server: bin/webpack-dev-server
|
16
22
|
|
17
|
-
# Keep the JS fresh for server rendering. Remove if not server rendering
|
18
|
-
|
23
|
+
# Keep the JS fresh for server rendering. Remove if not server rendering.
|
24
|
+
# Especially if you have not configured generation of a server bundle without a hash.
|
25
|
+
# as that will conflict with the manifest created by the bin/webpack-dev-server
|
26
|
+
# rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch
|
data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb
CHANGED
@@ -6,7 +6,8 @@
|
|
6
6
|
ReactOnRails.configure do |config|
|
7
7
|
# This configures the script to run to build the production assets by webpack. Set this to nil
|
8
8
|
# if you don't want react_on_rails building this file for you.
|
9
|
-
|
9
|
+
# If nil, then the standard rails/webpacker assets:precompile will run
|
10
|
+
# config.build_production_command = nil
|
10
11
|
|
11
12
|
################################################################################
|
12
13
|
################################################################################
|
@@ -22,6 +23,8 @@ ReactOnRails.configure do |config|
|
|
22
23
|
# with rspec then this controls what yarn command is run
|
23
24
|
# to automatically refresh your webpack assets on every test run.
|
24
25
|
#
|
26
|
+
# Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
|
27
|
+
# and set the config/webpacker.yml option for test to true.
|
25
28
|
config.build_test_command = "RAILS_ENV=test bin/webpack"
|
26
29
|
|
27
30
|
################################################################################
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Metrics/ClassLength
|
4
|
+
|
3
5
|
module ReactOnRails
|
4
6
|
def self.configure
|
5
7
|
yield(configuration)
|
@@ -107,10 +109,46 @@ module ReactOnRails
|
|
107
109
|
check_i18n_yml_directory_exists
|
108
110
|
check_server_render_method_is_only_execjs
|
109
111
|
error_if_using_webpacker_and_generated_assets_dir_not_match_public_output_path
|
112
|
+
check_deprecated_settings
|
110
113
|
end
|
111
114
|
|
112
115
|
private
|
113
116
|
|
117
|
+
def check_deprecated_settings
|
118
|
+
if build_production_command.present? &&
|
119
|
+
ReactOnRails::WebpackerUtils.webpacker_webpack_production_config_exists?
|
120
|
+
msg = <<~MSG
|
121
|
+
Setting ReactOnRails configuration for `build_production_command` is
|
122
|
+
not necessary if you have config/webpack/production.js. When that file
|
123
|
+
exists, React on Rails DOES NOT modify the standard assets:precompile.
|
124
|
+
If you want React on Rails to modify to the standard assets:precompile
|
125
|
+
to use your config/initializers/react_on_rails.rb config.build_production_command
|
126
|
+
then delete the config/webpack/production.js.
|
127
|
+
MSG
|
128
|
+
Rails.logger.warn(msg)
|
129
|
+
end
|
130
|
+
#
|
131
|
+
# msg = <<~MSG
|
132
|
+
# ReactOnRails configuration for `build_production_command` is removed.
|
133
|
+
# Move this command into `bin/webpack` converting the script to a shell script.
|
134
|
+
# MSG
|
135
|
+
# raise ReactOnRails::Error, msg
|
136
|
+
# Commenting out until v13 when
|
137
|
+
# https://github.com/rails/webpacker/issues/2640 gets resolved
|
138
|
+
# if node_modules_location.present?
|
139
|
+
# Rails.logger.warn("ReactOnRails configuration for `node_modules_location` is deprecated. "\
|
140
|
+
# "Instead, prepend a `cd client` (or whichever location) before your test command.")
|
141
|
+
# end
|
142
|
+
#
|
143
|
+
# return unless build_production_command.present?
|
144
|
+
#
|
145
|
+
# msg = <<~MSG
|
146
|
+
# ReactOnRails configuration for `build_production_command` is removed.
|
147
|
+
# Move this command into `bin/webpack` converting the script to a shell script.
|
148
|
+
# MSG
|
149
|
+
# raise ReactOnRails::Error, msg
|
150
|
+
end
|
151
|
+
|
114
152
|
def error_if_using_webpacker_and_generated_assets_dir_not_match_public_output_path
|
115
153
|
return unless ReactOnRails::WebpackerUtils.using_webpacker?
|
116
154
|
|
@@ -122,12 +160,12 @@ module ReactOnRails
|
|
122
160
|
Rails.logger.warn("You specified generated_assets_dir in `config/initializers/react_on_rails.rb` "\
|
123
161
|
"with Webpacker. Remove this line from your configuration file.")
|
124
162
|
else
|
125
|
-
msg =
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
163
|
+
msg = <<~MSG
|
164
|
+
Error configuring /config/initializers/react_on_rails.rb: You are using webpacker
|
165
|
+
and your specified value for generated_assets_dir = #{generated_assets_dir}
|
166
|
+
that does not match the value for public_output_path specified in
|
167
|
+
webpacker.yml = #{webpacker_public_output_path}. You should remove the configuration
|
168
|
+
value for "generated_assets_dir" from your config/initializers/react_on_rails.rb file.
|
131
169
|
MSG
|
132
170
|
raise ReactOnRails::Error, msg
|
133
171
|
end
|
@@ -214,3 +252,4 @@ module ReactOnRails
|
|
214
252
|
end
|
215
253
|
end
|
216
254
|
end
|
255
|
+
# rubocop:enable Metrics/ClassLength
|
@@ -17,13 +17,13 @@ module ReactOnRails
|
|
17
17
|
|
18
18
|
COMPONENT_HTML_KEY = "componentHtml"
|
19
19
|
|
20
|
-
# react_component_name: can be a React function or class component or a "
|
21
|
-
# "
|
20
|
+
# react_component_name: can be a React function or class component or a "Render-Function".
|
21
|
+
# "Render-Functions" differ from a React function in that they take two parameters, the
|
22
22
|
# props and the railsContext, like this:
|
23
23
|
#
|
24
24
|
# let MyReactComponentApp = (props, railsContext) => <MyReactComponent {...props}/>;
|
25
25
|
#
|
26
|
-
# Alternately, you can define the
|
26
|
+
# Alternately, you can define the Render-Function with an additional property
|
27
27
|
# `.renderFunction = true`:
|
28
28
|
#
|
29
29
|
# let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
|
@@ -79,7 +79,7 @@ module ReactOnRails
|
|
79
79
|
Value:
|
80
80
|
#{server_rendered_html}
|
81
81
|
|
82
|
-
If you're trying to use a
|
82
|
+
If you're trying to use a Render-Function to return a Hash to your ruby view code, then use
|
83
83
|
react_component_hash instead of react_component and see
|
84
84
|
https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
|
85
85
|
for an example of the JavaScript code.
|
@@ -93,7 +93,7 @@ module ReactOnRails
|
|
93
93
|
# It is exactly like react_component except for the following:
|
94
94
|
# 1. prerender: true is automatically added, as this method doesn't make sense for client only
|
95
95
|
# rendering.
|
96
|
-
# 2. Your JavaScript
|
96
|
+
# 2. Your JavaScript Render-Function for server rendering must return an Object rather than a React component.
|
97
97
|
# 3. Your view code must expect an object and not a string.
|
98
98
|
#
|
99
99
|
# Here is an example of the view code:
|
@@ -124,10 +124,10 @@ module ReactOnRails
|
|
124
124
|
)
|
125
125
|
else
|
126
126
|
msg = <<~MSG
|
127
|
-
|
127
|
+
Render-Function used by react_component_hash for #{component_name} is expected to return
|
128
128
|
an Object. See https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
|
129
129
|
for an example of the JavaScript code.
|
130
|
-
Note, your
|
130
|
+
Note, your Render-Function must either take 2 params or have the property
|
131
131
|
`.renderFunction = true` added to it to distinguish it from a React Function Component.
|
132
132
|
MSG
|
133
133
|
raise ReactOnRails::Error, msg
|
@@ -240,7 +240,7 @@ module ReactOnRails
|
|
240
240
|
end
|
241
241
|
|
242
242
|
# This is the definitive list of the default values used for the rails_context, which is the
|
243
|
-
# second parameter passed to both component and store
|
243
|
+
# second parameter passed to both component and store Render-Functions.
|
244
244
|
# This method can be called from views and from the controller, as `helpers.rails_context`
|
245
245
|
#
|
246
246
|
# rubocop:disable Metrics/AbcSize
|