react_on_rails 11.0.3 → 12.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.circleci/config.yml +320 -0
- data/.eslintignore +2 -1
- data/.eslintrc +30 -2
- data/.github/FUNDING.yml +1 -0
- data/.gitignore +3 -1
- data/.prettierignore +10 -0
- data/.prettierrc +23 -0
- data/.release-it.json +3 -0
- data/.rubocop.yml +39 -11
- data/.travis.yml +11 -22
- data/CHANGELOG.md +209 -4
- data/CONTRIBUTING.md +64 -84
- data/Gemfile +3 -5
- data/KUDOS.md +4 -1
- data/{docs/LICENSE.md → LICENSE.md} +1 -1
- data/PROJECTS.md +7 -1
- data/REACT-ON-RAILS-PRO-LICENSE +95 -0
- data/README.md +233 -634
- data/Rakefile +1 -5
- data/SUMMARY.md +42 -29
- data/book.json +5 -5
- data/docs/additional-reading/asset-pipeline.md +8 -16
- data/docs/additional-reading/convert-rails-5-api-only-app.md +19 -0
- data/docs/additional-reading/credits.md +10 -0
- data/docs/additional-reading/images.md +1 -1
- data/docs/additional-reading/rails-engine-integration.md +7 -0
- data/docs/additional-reading/rails_view_rendering_from_inline_javascript.md +2 -1
- 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 +14 -11
- data/docs/additional-reading/upgrade-webpacker-v3-to-v4.md +10 -0
- data/docs/additional-reading/webpack.md +2 -2
- data/docs/api/javascript-api.md +24 -4
- data/docs/api/redux-store-api.md +102 -0
- data/docs/api/view-helpers-api.md +133 -0
- data/docs/articles.md +20 -0
- data/docs/basics/client-vs-server-rendering.md +23 -0
- data/docs/basics/configuration.md +145 -61
- data/docs/basics/deployment.md +4 -0
- data/docs/basics/{generator.md → generator-details.md} +5 -8
- 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 +45 -23
- data/docs/basics/installation-into-an-existing-rails-app.md +59 -0
- data/docs/basics/minitest-configuration.md +31 -0
- data/docs/basics/react-server-rendering.md +29 -0
- data/docs/{additional-reading → basics}/recommended-project-structure.md +38 -10
- data/docs/basics/render-functions-and-railscontext.md +205 -0
- data/docs/basics/rspec-configuration.md +73 -0
- data/docs/basics/upgrading-react-on-rails.md +74 -3
- data/docs/basics/webpack-configuration.md +50 -0
- data/docs/contributor-info/errors-with-hooks.md +45 -0
- data/docs/contributor-info/pull-requests.md +44 -0
- data/docs/misc/doctrine.md +2 -2
- data/docs/{additional-reading → outdated}/code-splitting.md +19 -9
- data/docs/outdated/how-react-on-rails-works.md +44 -0
- data/docs/{basics/installation-overview.md → outdated/manual-installation-overview.md} +8 -13
- data/docs/{additional-reading → outdated}/rails-assets-relative-paths.md +3 -3
- data/docs/{additional-reading → outdated}/rails-assets.md +5 -13
- data/docs/testimonials/hvmn.md +25 -0
- data/docs/testimonials/resortpass.md +13 -0
- data/docs/testimonials/testimonials.md +28 -0
- data/docs/tutorial.md +182 -44
- data/jest.config.js +4 -0
- data/lib/generators/USAGE +1 -1
- data/lib/generators/react_on_rails/base_generator.rb +2 -2
- data/lib/generators/react_on_rails/dev_tests_generator.rb +3 -2
- data/lib/generators/react_on_rails/generator_helper.rb +4 -6
- data/lib/generators/react_on_rails/install_generator.rb +2 -0
- 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 +4 -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/configuration.rb +171 -100
- data/lib/react_on_rails/error.rb +2 -0
- data/lib/react_on_rails/git_utils.rb +2 -0
- data/lib/react_on_rails/{react_on_rails_helper.rb → helper.rb} +133 -161
- data/lib/react_on_rails/json_output.rb +1 -1
- data/lib/react_on_rails/json_parse_error.rb +28 -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 +56 -18
- data/lib/react_on_rails/react_component/render_options.rb +31 -3
- data/lib/react_on_rails/server_rendering_js_code.rb +42 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +93 -63
- data/lib/react_on_rails/server_rendering_pool.rb +1 -16
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +7 -8
- data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +10 -6
- data/lib/react_on_rails/test_helper.rb +18 -7
- data/lib/react_on_rails/utils.rb +65 -25
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +5 -1
- data/lib/react_on_rails/version_syntax_converter.rb +14 -12
- data/lib/react_on_rails/webpacker_utils.rb +44 -10
- data/lib/react_on_rails.rb +7 -2
- data/lib/tasks/assets.rake +33 -46
- data/lib/tasks/locale.rake +4 -2
- data/package-scripts.yml +49 -0
- data/package.json +49 -40
- 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 +4 -8
- data/rakelib/run_rspec.rake +5 -18
- data/react_on_rails.gemspec +5 -6
- data/tsconfig.json +14 -0
- data/webpackConfigLoader.js +5 -4
- data/yarn.lock +7645 -1821
- metadata +70 -60
- data/Gemfile.rails32 +0 -74
- data/docs/additional-reading/babel.md +0 -5
- data/docs/additional-reading/caching-and-performance.md +0 -4
- data/docs/additional-reading/heroku-deployment.md +0 -92
- data/docs/additional-reading/hot-reloading-rails-development.md +0 -57
- data/docs/additional-reading/node-server-rendering.md +0 -5
- data/docs/additional-reading/rspec-configuration.md +0 -56
- data/docs/api/ruby-api-hot-reload-view-helpers.md +0 -44
- data/docs/api/ruby-api.md +0 -8
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
- data/lib/react_on_rails/assets_precompile.rb +0 -150
- data/lib/react_on_rails/locales_to_js.rb +0 -134
- /data/docs/{misc → outdated}/rails3.md +0 -0
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.4.1 --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,79 +45,94 @@ 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
|
53
|
+
bundle
|
50
54
|
```
|
51
55
|
|
52
|
-
|
56
|
+
## Add the webpacker gem
|
53
57
|
|
54
58
|
```
|
55
|
-
bundle
|
56
|
-
bundle
|
59
|
+
bundle add webpacker
|
60
|
+
bundle add react_on_rails
|
57
61
|
```
|
58
62
|
|
59
|
-
|
63
|
+
## Run the webpacker generator
|
60
64
|
|
61
65
|
```
|
62
|
-
|
66
|
+
bundle exec rails webpacker:install
|
67
|
+
bundle exec rails webpacker:install:react
|
63
68
|
```
|
64
69
|
|
65
|
-
|
66
|
-
|
67
|
-
Run `bundle` and commit the git repository (or `rails generate` will not work properly)
|
68
|
-
|
70
|
+
Let's commit everything before installing React on Rails.
|
69
71
|
|
70
72
|
```
|
71
|
-
bundle
|
72
|
-
|
73
73
|
# Here are git commands to make a new git repo and commit everything.
|
74
74
|
# Newer versions of Rails create the git repo by default.
|
75
75
|
git add -A
|
76
76
|
git commit -m "Initial commit"
|
77
77
|
```
|
78
78
|
|
79
|
-
|
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.
|
80
83
|
|
81
84
|
```
|
82
|
-
|
83
|
-
bundle && yarn
|
85
|
+
gem 'react_on_rails', '12.0.0' # prefer exact gem version to match npm version
|
84
86
|
```
|
85
87
|
|
86
|
-
|
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.
|
90
|
+
|
91
|
+
Run `bundle` and commit the changes.
|
87
92
|
|
88
93
|
```
|
89
|
-
|
94
|
+
bundle
|
95
|
+
|
96
|
+
git commit -am "Added React on Rails Gem"
|
90
97
|
```
|
91
98
|
|
92
|
-
|
93
|
-
Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
|
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.
|
94
100
|
|
95
|
-
|
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`
|
96
103
|
|
97
|
-
|
104
|
+
```
|
105
|
+
rails generate react_on_rails:install
|
106
|
+
```
|
107
|
+
|
108
|
+
Then run server with a static client bundle. Static means that the bundle is saved in your
|
109
|
+
public/webpack/packs directory.
|
98
110
|
|
99
|
-
```
|
100
|
-
|
111
|
+
```
|
112
|
+
foreman start -f Procfile.dev
|
101
113
|
```
|
102
114
|
|
103
|
-
|
115
|
+
## To run with the webpack-dev-server:
|
116
|
+
```
|
117
|
+
foreman start -f Procfile.dev-hmr
|
118
|
+
```
|
104
119
|
|
120
|
+
Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
|
105
121
|
|
106
|
-
|
122
|
+
# HMR vs. React Hot Reloading
|
107
123
|
|
108
|
-
|
124
|
+
First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
|
109
125
|
|
110
|
-
|
111
|
-
|
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.
|
112
129
|
|
113
130
|
## Deploying to Heroku
|
114
131
|
|
115
132
|
### Create Your Heroku App
|
116
133
|
*Assuming you can login to heroku.com and have logged into to your shell for heroku.*
|
117
134
|
|
118
|
-
1. Visit https://dashboard.heroku.com/new and create an app, say named `my-name-react-on-rails`:
|
135
|
+
1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
|
119
136
|
|
120
137
|
![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
|
121
138
|
|
@@ -131,16 +148,16 @@ Set heroku to use multiple buildpacks:
|
|
131
148
|
|
132
149
|
### Swap out sqlite for postgres by doing the following:
|
133
150
|
|
134
|
-
|
151
|
+
Run these two commands:
|
135
152
|
|
136
|
-
```
|
137
|
-
|
153
|
+
```
|
154
|
+
bundle remove sqlite3
|
155
|
+
bundle add pg
|
138
156
|
```
|
139
157
|
|
140
158
|
![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
|
141
159
|
|
142
|
-
|
143
|
-
2. Replace your `database.yml` file with this (assuming your app name is "ror").
|
160
|
+
### Replace your `database.yml` file with this (assuming your app name is "ror").
|
144
161
|
|
145
162
|
```yml
|
146
163
|
default: &default
|
@@ -168,7 +185,6 @@ production:
|
|
168
185
|
Then you need to setup postgres so you can run locally:
|
169
186
|
|
170
187
|
```
|
171
|
-
bundle
|
172
188
|
rake db:setup
|
173
189
|
rake db:migrate
|
174
190
|
```
|
@@ -185,11 +201,15 @@ root "hello_world#index"
|
|
185
201
|
|
186
202
|
Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
|
187
203
|
|
204
|
+
Create `/Procfile`. This is what Heroku uses to start your app.
|
205
|
+
|
188
206
|
`Procfile`
|
189
207
|
```
|
190
208
|
web: bundle exec puma -C config/puma.rb
|
191
209
|
```
|
192
210
|
|
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:
|
212
|
+
|
193
213
|
`config/puma.rb`
|
194
214
|
```rb
|
195
215
|
workers Integer(ENV['WEB_CONCURRENCY'] || 2)
|
@@ -209,12 +229,130 @@ on_worker_boot do
|
|
209
229
|
end
|
210
230
|
```
|
211
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
|
+
|
212
241
|
Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
|
213
242
|
|
214
243
|
```
|
215
244
|
git add -A
|
216
|
-
git commit -m "
|
245
|
+
git commit -m "Changes for Heroku"
|
246
|
+
git push heroku master
|
247
|
+
```
|
248
|
+
|
249
|
+
Then run:
|
250
|
+
|
251
|
+
```
|
252
|
+
heroku open
|
253
|
+
```
|
254
|
+
|
255
|
+
and you will see your live app and you can share this URL with your friends. Congrats!
|
256
|
+
|
257
|
+
## Turning on Server Rendering
|
258
|
+
|
259
|
+
You can turn on server rendering by simply changing the `prerender` option to `true`:
|
260
|
+
|
261
|
+
```erb
|
262
|
+
<%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>
|
263
|
+
```
|
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
|
+
|
275
|
+
Then push to Heroku:
|
276
|
+
|
277
|
+
```
|
278
|
+
git add -A
|
279
|
+
git commit -m "Enable server rendering"
|
217
280
|
git push heroku master
|
218
281
|
```
|
219
282
|
|
220
|
-
|
283
|
+
When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
|
284
|
+
|
285
|
+
```html
|
286
|
+
<div id="HelloWorld-react-component-b7ae1dc6-396c-411d-886a-269633b3f604"></div>
|
287
|
+
```
|
288
|
+
|
289
|
+
versus with server rendering:
|
290
|
+
|
291
|
+
```html
|
292
|
+
<div id="HelloWorld-react-component-d846ce53-3b82-4c4a-8f32-ffc347c8444a"><div data-reactroot=""><h3>Hello, <!-- -->Stranger<!-- -->!</h3><hr/><form><label for="name">Say hello to:</label><input type="text" id="name" value="Stranger"/></form></div></div>
|
293
|
+
```
|
294
|
+
|
295
|
+
For more details on server rendering, see:
|
296
|
+
|
297
|
+
+ [Client vs. Server Rendering](./basics/client-vs-server-rendering.md)
|
298
|
+
+ [React Server Rendering](./basics/react-server-rendering.md)
|
299
|
+
|
300
|
+
## Moving from the Rails default `/app/javascript` to the recommended `/client` structure
|
301
|
+
|
302
|
+
ShakaCode recommends that you use `/client` for your client side app. This way a non-Rails, front-end developer can be at home just by opening up the `/client` directory.
|
303
|
+
|
304
|
+
|
305
|
+
1. Move the directory:
|
306
|
+
|
307
|
+
```
|
308
|
+
mv app/javascript client
|
309
|
+
```
|
310
|
+
|
311
|
+
2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
|
312
|
+
|
313
|
+
```yml
|
314
|
+
source_path: client
|
315
|
+
```
|
316
|
+
|
317
|
+
## Using HMR with the rails/webpacker setup
|
318
|
+
|
319
|
+
Start the app using `foreman start -f Procfile.dev-hmr`.
|
320
|
+
|
321
|
+
When you change a JSX file and save, the browser will automatically refresh!
|
322
|
+
|
323
|
+
So you get some basics from HMR with no code changes. If you want to go further, take a look at these links:
|
324
|
+
|
325
|
+
* https://github.com/rails/webpacker/blob/master/docs/webpack-dev-server.md
|
326
|
+
* https://webpack.js.org/configuration/dev-server/
|
327
|
+
* https://webpack.js.org/concepts/hot-module-replacement/
|
328
|
+
|
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.
|
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
|
+
|
352
|
+
## Conclusion
|
353
|
+
|
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)
|
355
|
+
|
356
|
+
Feedback is greatly appreciated! As are stars on github!
|
357
|
+
|
358
|
+
If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com). We offer [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) and consulting so you can focus on your app and not on how to make Webpack plus Rails work optimally.
|
data/jest.config.js
ADDED
data/lib/generators/USAGE
CHANGED
@@ -33,7 +33,7 @@ module ReactOnRails
|
|
33
33
|
app/views/layouts/hello_world.html.erb
|
34
34
|
config/initializers/react_on_rails.rb
|
35
35
|
Procfile.dev
|
36
|
-
Procfile.dev-
|
36
|
+
Procfile.dev-hmr]
|
37
37
|
base_files.each { |file| copy_file("#{base_path}#{file}", file) }
|
38
38
|
end
|
39
39
|
|
@@ -107,7 +107,7 @@ module ReactOnRails
|
|
107
107
|
foreman start -f Procfile.dev
|
108
108
|
|
109
109
|
- To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
|
110
|
-
and bin/webpack-dev-server. Or use Procfile.dev-
|
110
|
+
and bin/webpack-dev-server. Or use Procfile.dev-hmr.
|
111
111
|
|
112
112
|
- To server render, change this line app/views/hello_world/index.html.erb to
|
113
113
|
`prerender: true` to see server rendering (right click on page and select "view source").
|
@@ -36,6 +36,7 @@ module ReactOnRails
|
|
36
36
|
|
37
37
|
def replace_prerender_if_server_rendering
|
38
38
|
return unless options.example_server_rendering
|
39
|
+
|
39
40
|
hello_world_index = File.join(destination_root, "app", "views", "hello_world", "index.html.erb")
|
40
41
|
hello_world_contents = File.read(hello_world_index)
|
41
42
|
new_hello_world_contents = hello_world_contents.gsub(/prerender: false/,
|
@@ -49,8 +50,8 @@ module ReactOnRails
|
|
49
50
|
contents = File.read(package_json)
|
50
51
|
replacement_value = <<-STRING
|
51
52
|
"scripts": {
|
52
|
-
"postinstall": "
|
53
|
-
STRING
|
53
|
+
"postinstall": "yalc link react-on-rails",
|
54
|
+
STRING
|
54
55
|
new_client_package_json_contents = contents.gsub(/ {2}"scripts": {/,
|
55
56
|
replacement_value)
|
56
57
|
File.open(package_json, "w+") { |f| f.puts new_client_package_json_contents }
|
@@ -15,13 +15,11 @@ module GeneratorHelper
|
|
15
15
|
end
|
16
16
|
|
17
17
|
def setup_file_error(file, data)
|
18
|
-
|
19
|
-
|
20
|
-
#{file}
|
21
|
-
|
22
|
-
#{data}
|
18
|
+
<<~MSG
|
19
|
+
#{file} was not found.
|
20
|
+
Please add the following content to your #{file} file:
|
21
|
+
#{data}
|
23
22
|
MSG
|
24
|
-
# rubocop:enable Layout/IndentHeredoc
|
25
23
|
end
|
26
24
|
|
27
25
|
def empty_directory_with_keep_file(destination, config = {})
|
@@ -62,6 +62,7 @@ module ReactOnRails
|
|
62
62
|
|
63
63
|
def missing_yarn?
|
64
64
|
return false unless ReactOnRails::Utils.running_on_windows? ? `where yarn`.blank? : `which yarn`.blank?
|
65
|
+
|
65
66
|
error = "yarn is required. Please install it before continuing. https://yarnpkg.com/en/docs/install"
|
66
67
|
GeneratorMessages.add_error(error)
|
67
68
|
true
|
@@ -69,6 +70,7 @@ module ReactOnRails
|
|
69
70
|
|
70
71
|
def missing_node?
|
71
72
|
return false unless ReactOnRails::Utils.running_on_windows? ? `where node`.blank? : `which node`.blank?
|
73
|
+
|
72
74
|
error = "** nodejs is required. Please install it before continuing. https://nodejs.org/en/"
|
73
75
|
GeneratorMessages.add_error(error)
|
74
76
|
true
|
@@ -4,4 +4,6 @@ web: rails s -p 3000
|
|
4
4
|
# Next line runs a watch process with webpack to compile the changed files.
|
5
5
|
# When making frequent changes to client side assets, you will prefer building webpack assets
|
6
6
|
# upon saving rather than when you refresh your browser page.
|
7
|
-
|
7
|
+
# Note, if using React on Rails localization you will need to run
|
8
|
+
# `bundle exec rake react_on_rails:locale` before you run bin/webpack
|
9
|
+
client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'
|
@@ -0,0 +1,26 @@
|
|
1
|
+
# Procfile for development using HMR
|
2
|
+
|
3
|
+
web: rails s -p 3000
|
4
|
+
|
5
|
+
# Note, hot and live reloading don't work with the default generator setup on
|
6
|
+
# top of the rails/webpacker Webpack config with server rendering.
|
7
|
+
# If you have server rendering enabled (prerender is true), you either need to
|
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
|
15
|
+
fast enough.
|
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.
|
19
|
+
|
20
|
+
# Run the webpack-dev-server for client and maybe server files
|
21
|
+
webpack-dev-server: bin/webpack-dev-server
|
22
|
+
|
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
|
@@ -1,45 +1,25 @@
|
|
1
1
|
import PropTypes from 'prop-types';
|
2
|
-
import React from 'react';
|
2
|
+
import React, { useState } from 'react';
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
name: PropTypes.string.isRequired, // this is passed from the Rails view
|
7
|
-
};
|
4
|
+
const HelloWorld = (props) => {
|
5
|
+
const [name, setName] = useState(props.name);
|
8
6
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
7
|
+
return (
|
8
|
+
<div>
|
9
|
+
<h3>Hello, {name}!</h3>
|
10
|
+
<hr />
|
11
|
+
<form>
|
12
|
+
<label htmlFor="name">
|
13
|
+
Say hello to:
|
14
|
+
<input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
|
15
|
+
</label>
|
16
|
+
</form>
|
17
|
+
</div>
|
18
|
+
);
|
19
|
+
};
|
14
20
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}
|
21
|
+
HelloWorld.propTypes = {
|
22
|
+
name: PropTypes.string.isRequired, // this is passed from the Rails view
|
23
|
+
};
|
19
24
|
|
20
|
-
|
21
|
-
this.setState({ name });
|
22
|
-
};
|
23
|
-
|
24
|
-
render() {
|
25
|
-
return (
|
26
|
-
<div>
|
27
|
-
<h3>
|
28
|
-
Hello, {this.state.name}!
|
29
|
-
</h3>
|
30
|
-
<hr />
|
31
|
-
<form >
|
32
|
-
<label htmlFor="name">
|
33
|
-
Say hello to:
|
34
|
-
</label>
|
35
|
-
<input
|
36
|
-
id="name"
|
37
|
-
type="text"
|
38
|
-
value={this.state.name}
|
39
|
-
onChange={(e) => this.updateName(e.target.value)}
|
40
|
-
/>
|
41
|
-
</form>
|
42
|
-
</div>
|
43
|
-
);
|
44
|
-
}
|
45
|
-
}
|
25
|
+
export default HelloWorld;
|
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
|
################################################################################
|
@@ -4,19 +4,15 @@ import React from 'react';
|
|
4
4
|
const HelloWorld = ({ name, updateName }) => (
|
5
5
|
<div>
|
6
6
|
<h3>
|
7
|
-
Hello,
|
7
|
+
Hello,
|
8
|
+
{name}!
|
8
9
|
</h3>
|
9
10
|
<hr />
|
10
|
-
<form
|
11
|
+
<form>
|
11
12
|
<label htmlFor="name">
|
12
13
|
Say hello to:
|
14
|
+
<input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
|
13
15
|
</label>
|
14
|
-
<input
|
15
|
-
id="name"
|
16
|
-
type="text"
|
17
|
-
value={name}
|
18
|
-
onChange={(e) => updateName(e.target.value)}
|
19
|
-
/>
|
20
16
|
</form>
|
21
17
|
</div>
|
22
18
|
);
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import { createStore } from 'redux';
|
2
2
|
import helloWorldReducer from '../reducers/helloWorldReducer';
|
3
3
|
|
4
|
-
const configureStore = (railsProps) => (
|
5
|
-
createStore(helloWorldReducer, railsProps)
|
6
|
-
);
|
4
|
+
const configureStore = (railsProps) => createStore(helloWorldReducer, railsProps);
|
7
5
|
|
8
6
|
export default configureStore;
|