react_on_rails 12.0.0.pre.beta.0 → 12.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +21 -4
- data/README.md +27 -23
- data/SUMMARY.md +1 -1
- data/docs/basics/configuration.md +27 -16
- 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/rspec-configuration.md +27 -16
- data/docs/basics/upgrading-react-on-rails.md +14 -6
- data/docs/basics/webpack-configuration.md +3 -7
- data/docs/misc/doctrine.md +1 -1
- 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 +67 -61
- data/lib/generators/react_on_rails/base_generator.rb +2 -2
- 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 -41
- 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/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 +36 -9
- data/lib/tasks/locale.rake +1 -5
- data/package.json +1 -1
- data/rakelib/release.rake +0 -6
- data/react_on_rails.gemspec +1 -0
- data/yarn.lock +260 -109
- metadata +21 -6
- data/docs/outdated/heroku-deployment.md +0 -86
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2c578e181f0adc62b6f89f1e258bf21dd515bf2f86b57034467f6026ba2bf63c
|
4
|
+
data.tar.gz: e3a8a7076f7c73871178114a077ec29850e6639340e8ff331d046fb491ac10e8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 19cebcb75b776a5f08936cc39aef164089a6ccc3ea36d792cc6fb7f0e53805e535eeb71f295826e371f74b75312d326172d26e1dc97cc640651914c5b222cfa1
|
7
|
+
data.tar.gz: 67dec37920284002de78660438c0f38f463a5317bbd7c7a17d2896fa4d4d7ff0044e11705ad247a7f1d3f2eb2abf90f8fd3115dc0ac496926701beb74236043c
|
data/CHANGELOG.md
CHANGED
@@ -4,7 +4,7 @@ All notable changes to this project's source code will be documented in this fil
|
|
4
4
|
Migration instructions for the major updates can be found [here](docs/basics/upgrading-react-on-rails.md#upgrading-to-version-9.md). Some smaller migration information can be found here.
|
5
5
|
|
6
6
|
## Need Help Migrating?
|
7
|
-
If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for information about our [
|
7
|
+
If you would like help in migrating between React on Rails versions or help with implementing server rendering, please contact [justin@shakacode.com](mailto:justin@shakacode.com) for information about our [React on Rails Pro Support Options](https://www.shakacode.com/react-on-rails-pro).
|
8
8
|
|
9
9
|
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.
|
10
10
|
|
@@ -17,7 +17,17 @@ Changes since last non-beta release.
|
|
17
17
|
*Please add entries here for your pull requests that are not yet released.*
|
18
18
|
|
19
19
|
## UPCOMING 12.0 RELEASE
|
20
|
-
|
20
|
+
See [docs/basics/upgrading-react-on-rails.md](./docs/basics/upgrading-react-on-rails.md).
|
21
|
+
|
22
|
+
### [12.0.0.pre.beta.2]
|
23
|
+
* Changed the precompile task to use the rails/webpacker one by default
|
24
|
+
|
25
|
+
### [12.0.0.pre.beta.1]
|
26
|
+
* Updated generators to use React hooks
|
27
|
+
|
28
|
+
### [12.0.0.pre.beta.0]
|
29
|
+
Gem version: 12.0.0.pre.beta.0 and npm version 12.0.0-beta.0 released! Please try this out!
|
30
|
+
|
21
31
|
#### BREAKING CHANGE
|
22
32
|
In order to solve the issues regarding React Hooks compatibility, the number of parameters
|
23
33
|
for functions is used to determine if you have a generator function that will get invoked to
|
@@ -26,10 +36,13 @@ set JavaScript property `renderFunction` on the function for which you want to r
|
|
26
36
|
invoked to return the React component. In that case, you won't need to pass any unused params.
|
27
37
|
[PR 1268](https://github.com/shakacode/react_on_rails/pull/1268) by [justin808](https://github.com/justin808)
|
28
38
|
|
29
|
-
See [docs/basics/upgrading-react-on-rails](./docs/basics/upgrading-react-on-rails#upgrading-to-v12)
|
39
|
+
See [docs/basics/upgrading-react-on-rails](./docs/basics/upgrading-react-on-rails.md#upgrading-to-v12)
|
30
40
|
for details.
|
31
41
|
|
32
42
|
* Requires the use of rails/webpacker helpers
|
43
|
+
* If the webpacker webpack config files exist, then React on Rails will not override the default
|
44
|
+
assets:precompile setup by rails/webpacker. The fix is to remove the JS files inside of config/webpack,
|
45
|
+
like config/webpack/production.js.
|
33
46
|
* Removed **env_javascript_include_tag** and **env_stylesheet_link_tag** as these are replaced by view helpers
|
34
47
|
from rails/webpacker
|
35
48
|
* Removal of support for old Rubies and Rails.
|
@@ -913,7 +926,11 @@ Best done with Object destructing:
|
|
913
926
|
##### Fixed
|
914
927
|
- Fix several generator related issues.
|
915
928
|
|
916
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/
|
929
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.0.0-beta.3...master
|
930
|
+
[12.0.0.pre.beta.3]: https://github.com/shakacode/react_on_rails/compare/12.0.0-beta.2...12.0.0-beta.3
|
931
|
+
[12.0.0.pre.beta.2]: https://github.com/shakacode/react_on_rails/compare/12.0.0-beta.1...12.0.0-beta.2
|
932
|
+
[12.0.0.pre.beta.1]: https://github.com/shakacode/react_on_rails/compare/12.0.0-beta.0...12.0.0-beta.1
|
933
|
+
[12.0.0.pre.beta.0]: https://github.com/shakacode/react_on_rails/compare/11.3.0...12.0.0-beta.0
|
917
934
|
[11.3.0]: https://github.com/shakacode/react_on_rails/compare/11.2.2...11.3.0
|
918
935
|
[11.2.2]: https://github.com/shakacode/react_on_rails/compare/11.2.1...11.2.2
|
919
936
|
[11.2.1]: https://github.com/shakacode/react_on_rails/compare/11.1.8...11.2.1
|
data/README.md
CHANGED
@@ -14,6 +14,19 @@
|
|
14
14
|
*These are the docs for React on Rails 12, coming soon. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
|
15
15
|
|
16
16
|
#### News
|
17
|
+
**June 24, 2020**:
|
18
|
+
1. Gem version: 12.0.0.pre.beta.3 and npm version 12.0.0-beta.3 released! Please try this out!
|
19
|
+
Major enhancements:
|
20
|
+
1. Proper support for React Hooks
|
21
|
+
2. Typescript bindings
|
22
|
+
3. i18n support for generating a JSON file rather than a JS file.
|
23
|
+
4. Tighter rails/webpacker integration
|
24
|
+
|
25
|
+
Be sure to see the [CHANGELOG.md](./CHANGELOG.md) and read the upgrade instructions:
|
26
|
+
[docs/basics/upgrading-react-on-rails](./docs/basics/upgrading-react-on-rails.md#upgrading-to-v12).
|
27
|
+
|
28
|
+
2. See Justin's RailsConf talk: [Webpacker, It-Just-Works, But How?](http://railsconf.com/2020/video/justin-gordon-webpacker-it-just-works-but-how).
|
29
|
+
|
17
30
|
**April 2, 2020**:
|
18
31
|
* Are you interested in support for React on Rails? If so check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
|
19
32
|
* HMR is working with [Loadable Components](https://loadable-components.com) for a both amazing hot-reloading developer experience and great runtime performance. Please [email me](mailto:justin@shakacode.com) if you'd like to use [Loadable Components Code Splitting](https://loadable-components.com/docs/code-splitting/) to speed up your app by reducing your bundle sizes and lazily loading the code that's needed.
|
@@ -36,21 +49,20 @@ Feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakaco
|
|
36
49
|
|
37
50
|
## Project Objective
|
38
51
|
|
39
|
-
To provide
|
52
|
+
To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem especially in regards to React Server Rendering.
|
40
53
|
|
41
54
|
## Features and Why React on Rails?
|
42
55
|
|
43
56
|
Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"?
|
44
57
|
|
45
|
-
1. Server rendering, often used for SEO crawler indexing and UX performance, is not offered by rails/webpacker.
|
46
58
|
1. The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
|
59
|
+
1. Tight integration with [rails/webpacker](https://github.com/rails/webpacker).
|
60
|
+
1. Server rendering, often used for SEO crawler indexing and UX performance, is not offered by rails/webpacker.
|
47
61
|
1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration with server-side-rendering.
|
48
62
|
1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
|
49
|
-
1. [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md) to ensure your Webpack bundles are ready for tests. _(and for [Minitest](docs/basics/minitest-configuration.md))._
|
50
63
|
1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com/).
|
51
64
|
1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example).
|
52
65
|
|
53
|
-
|
54
66
|
See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
|
55
67
|
|
56
68
|
## ShakaCode Forum Premium Content
|
@@ -66,7 +78,7 @@ _Requires creating a free account._
|
|
66
78
|
|
67
79
|
## Prerequisites
|
68
80
|
|
69
|
-
|
81
|
+
Ruby on Rails >=5 and rails/webpacker 4.2+.
|
70
82
|
|
71
83
|
## Getting Started
|
72
84
|
|
@@ -81,23 +93,10 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
|
|
81
93
|
|
82
94
|
*See also [the instructions for installing into an existing Rails app](docs/basics/installation-into-an-existing-rails-app.md).*
|
83
95
|
|
84
|
-
1. Create a new Rails app:
|
85
|
-
|
86
|
-
``````bash
|
87
|
-
$ rails new my-app --webpack=react
|
88
|
-
$ cd my-app
|
89
|
-
``````
|
90
|
-
|
91
96
|
2. Add the `react_on_rails` gem to Gemfile:
|
92
97
|
|
93
|
-
```ruby
|
94
|
-
gem 'react_on_rails', '11.1.4' # Use the exact gem version to match npm version
|
95
|
-
```
|
96
|
-
|
97
|
-
3. Install the `react_on_rails` gem:
|
98
|
-
|
99
98
|
```bash
|
100
|
-
|
99
|
+
bundle add react_on_rails --strict
|
101
100
|
```
|
102
101
|
|
103
102
|
4. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
|
@@ -105,13 +104,13 @@ Note, the best way to understand how to use ReactOnRails is to study a few simpl
|
|
105
104
|
5. Run the generator:
|
106
105
|
|
107
106
|
```bash
|
108
|
-
|
107
|
+
rails generate react_on_rails:install
|
109
108
|
```
|
110
109
|
|
111
110
|
6. Start the app:
|
112
111
|
|
113
112
|
```bash
|
114
|
-
|
113
|
+
rails s
|
115
114
|
```
|
116
115
|
|
117
116
|
7. Visit http://localhost:3000/hello_world.
|
@@ -130,13 +129,18 @@ Below is the line where you turn server rendering on by setting `prerender` to t
|
|
130
129
|
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
|
131
130
|
```
|
132
131
|
|
132
|
+
Note, if you got an error in your console regarding "ReferenceError: window is not defined",
|
133
|
+
then you need to edit `config/webpacker.yml` and set `hmr: false` and `inline: false`.
|
134
|
+
See [rails/webpacker PR 2644](https://github.com/rails/webpacker/pull/2644) for a fix for this
|
135
|
+
issue.
|
136
|
+
|
133
137
|
## Basic Usage
|
134
138
|
|
135
139
|
### Configuration
|
136
140
|
|
137
141
|
* Configure `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [docs/basics/configuration.md](docs/basics/configuration.md) for documentation of all configuration options.
|
138
|
-
* Configure `config/webpacker.yml`. If you used the generator and the default webpacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/webpacker.yml](./spec/dummy/config/webpacker.yml) example
|
139
|
-
*
|
142
|
+
* Configure `config/webpacker.yml`. If you used the generator and the default webpacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/webpacker.yml](./spec/dummy/config/webpacker.yml) example or the official default [webpacker.yml](https://github.com/rails/webpacker/blob/master/lib/install/config/webpacker.yml).
|
143
|
+
* Tip: set `compile: false` for development if you know that you'll always be compiling with a watch process. Otherwise, every request will check if compilation is needed.
|
140
144
|
* Your `public_output_path` must match your Webpack configuration for `output` of your bundles.
|
141
145
|
* Only set `cache_manifest` to `true` in your production env.
|
142
146
|
|
data/SUMMARY.md
CHANGED
@@ -45,7 +45,7 @@
|
|
45
45
|
+ [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
|
46
46
|
|
47
47
|
## **Deployment**
|
48
|
-
+ [Heroku Deployment](docs/
|
48
|
+
+ [Heroku Deployment](docs/basics/heroku-deployment.md)
|
49
49
|
+ [Elastic Beanstalk Deployment](./docs/additional-reading/elastic-beanstalk.md)
|
50
50
|
|
51
51
|
## Outdated Non-Webpack Docs
|
@@ -12,21 +12,27 @@ default: &default
|
|
12
12
|
# public_output_path folder
|
13
13
|
manifest: manifest.json
|
14
14
|
cache_manifest: false
|
15
|
+
|
16
|
+
# Source path is used to check if webpack compilation needs to be run for `compile: true`
|
15
17
|
source_path: client/app
|
16
18
|
|
17
19
|
development:
|
18
20
|
<<: *default
|
19
|
-
#
|
21
|
+
# Generated files for development, in /public/webpack/dev
|
20
22
|
public_output_path: webpack/dev
|
21
23
|
|
22
24
|
test:
|
23
25
|
<<: *default
|
24
|
-
#
|
26
|
+
# Ensure that webpacker invokes webpack to build files for tests if not using the
|
27
|
+
# ReactOnRails rspec helper.
|
28
|
+
compile: true
|
29
|
+
|
30
|
+
# Generated files for tests, in /public/webpack/test
|
25
31
|
public_output_path: webpack/test
|
26
32
|
|
27
33
|
production:
|
28
34
|
<<: *default
|
29
|
-
#
|
35
|
+
# Generated files for production, in /public/webpack/production
|
30
36
|
public_output_path: webpack/production
|
31
37
|
cache_manifest: true
|
32
38
|
```
|
@@ -45,7 +51,7 @@ ReactOnRails.configure do |config|
|
|
45
51
|
# The default is true for development, off otherwise.
|
46
52
|
# With true, you get detailed logs of rendering and stack traces if you call setTimout,
|
47
53
|
# setInterval, clearTimout when server rendering.
|
48
|
-
config.trace = Rails.env.development?
|
54
|
+
config.trace = Rails.env.development? # default
|
49
55
|
|
50
56
|
# Configure if default DOM IDs have a random value or are fixed.
|
51
57
|
# false ==> Sets the dom id to "#{react_component_name}-react-component"
|
@@ -54,15 +60,17 @@ ReactOnRails.configure do |config|
|
|
54
60
|
# it is convenient to set this to true or else you have to either manually set the ids to
|
55
61
|
# avoid collisions. Most newer apps will have only one instance of a component on a page,
|
56
62
|
# so this should be false in most cases.
|
57
|
-
# This value can be
|
58
|
-
config.random_dom_id =
|
59
|
-
|
60
|
-
# defaults to "" (top level)
|
61
|
-
#
|
62
|
-
config.node_modules_location = "client" # If using webpacker you should use "".
|
63
|
+
# This value can be overridden for a given call to react_component
|
64
|
+
config.random_dom_id = true # default
|
63
65
|
|
64
|
-
#
|
65
|
-
|
66
|
+
# defaults to "" (top level)
|
67
|
+
config.node_modules_location = "client" # If using webpacker you should use "".
|
68
|
+
|
69
|
+
# This configures the script to run to build the production assets by webpack . Set this to nil
|
70
|
+
# if you don't want react_on_rails building this file for you.
|
71
|
+
# Note, if you want to use this command then you should remove the file
|
72
|
+
# config/webpack/production.js
|
73
|
+
# If that file exists, React on Rails thinks that you'll use the rails/webpacker bin/webpack compiler.
|
66
74
|
config.build_production_command = "RAILS_ENV=production bin/webpack"
|
67
75
|
|
68
76
|
################################################################################
|
@@ -89,7 +97,9 @@ ReactOnRails.configure do |config|
|
|
89
97
|
# Normally, you have different bundles for client and server, thus, the default is false.
|
90
98
|
# Furthermore, if you are not hashing the server bundle (not in the manifest.json), then React on Rails
|
91
99
|
# will only look for the server bundle to be created in the typical file location, typically by
|
92
|
-
# a `webpack --watch` process.
|
100
|
+
# a `webpack --watch` process.
|
101
|
+
# If true, ensure that in config/webpacker.yml that you have both dev_server.hmr and
|
102
|
+
# dev_server.inline set to false.
|
93
103
|
config.same_bundle_for_client_and_server = false
|
94
104
|
|
95
105
|
# If set to true, this forces Rails to reload the server bundle if it is modified
|
@@ -134,6 +144,7 @@ ReactOnRails.configure do |config|
|
|
134
144
|
# Replace the following line to the location where you keep translation.js & default.js for use
|
135
145
|
# by the npm packages react-intl. Be sure this directory exists!
|
136
146
|
# config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
|
147
|
+
#
|
137
148
|
# If not using the i18n feature, then leave this section commented out or set the value
|
138
149
|
# of config.i18n_dir to nil.
|
139
150
|
#
|
@@ -141,11 +152,11 @@ ReactOnRails.configure do |config|
|
|
141
152
|
# that will source for automatic generation on translations.js & default.js
|
142
153
|
# By default(without this option) all yaml files from Rails.root.join("config", "locales")
|
143
154
|
# and installed gems are loaded
|
144
|
-
config.i18n_yml_dir = Rails.root.join("config", "locales"
|
155
|
+
config.i18n_yml_dir = Rails.root.join("config", "locales")
|
145
156
|
|
146
157
|
# Possible output formats are js and json
|
147
158
|
# The default format is json
|
148
|
-
config.i18n_output_format = '
|
159
|
+
config.i18n_output_format = 'json'
|
149
160
|
|
150
161
|
################################################################################
|
151
162
|
################################################################################
|
@@ -186,7 +197,7 @@ ReactOnRails.configure do |config|
|
|
186
197
|
# CONFIGURE YOUR SOURCE FILES
|
187
198
|
# The test helper needs to know where your JavaScript files exist. The value is configured
|
188
199
|
# by your config/webpacker.yml source_path:
|
189
|
-
# source_path: client/app
|
200
|
+
# source_path: client/app # if using recommended /client directory
|
190
201
|
#
|
191
202
|
# Define the files we need to check for webpack compilation when running tests.
|
192
203
|
# The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
|
data/docs/basics/deployment.md
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
# Deployment
|
2
2
|
|
3
|
-
-
|
4
|
-
|
5
|
-
- See the [Heroku Deployment](docs/outdated/heroku-deployment.md) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.
|
3
|
+
- `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step.
|
4
|
+
- See the [Heroku Deployment](docs/basics/heroku-deployment.md) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.
|
@@ -0,0 +1,24 @@
|
|
1
|
+
# Heroku Deployment
|
2
|
+
## Heroku buildpacks
|
3
|
+
|
4
|
+
React on Rails requires both a ruby environment (for Rails) and a Node environment (for Webpack), so you will need to have Heroku use multiple buildpacks.
|
5
|
+
|
6
|
+
Assuming you have downloaded and installed the Heroku command-line utility and have initialized the app, you will need to tell Heroku to use both buildpacks via the command-line:
|
7
|
+
|
8
|
+
```
|
9
|
+
heroku buildpacks:set heroku/ruby
|
10
|
+
heroku buildpacks:add --index 1 heroku/nodejs
|
11
|
+
```
|
12
|
+
|
13
|
+
For more information, see [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
|
14
|
+
|
15
|
+
## assets:precompile
|
16
|
+
|
17
|
+
### rails/webpacker webpack configuration
|
18
|
+
If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
|
19
|
+
will automatically modify or create an assets:precompile task to build your assets.
|
20
|
+
|
21
|
+
### custom webpack configuration
|
22
|
+
If you're a custom webpack configuration, and you **do not have the default
|
23
|
+
`config/webpack/production.js`** file, then the `config/initializers/react_on_rails.rb`
|
24
|
+
configuration `config.build_production_command` will be used.
|
@@ -0,0 +1,49 @@
|
|
1
|
+
# HMR and Hot Reloading with the webpack-dev-server
|
2
|
+
|
3
|
+
The webpack-dev-server provides:
|
4
|
+
|
5
|
+
1. Speedy compilation of client side assets
|
6
|
+
2. Optional HMR which means that the page will reload automatically when after
|
7
|
+
compilation completes. Note, some developers do not like this, as you'll
|
8
|
+
abruptly lose any tweaks within the Chrome development tools.
|
9
|
+
3. Optional hot-reloading. The older react-hot-loader has been deprecated in
|
10
|
+
favor of [fast-refresh](https://reactnative.dev/docs/fast-refresh).
|
11
|
+
For use with webpack, see [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
|
12
|
+
|
13
|
+
If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
|
14
|
+
then you can follow all the regular docs for using the `bin/webpack-dev-server`
|
15
|
+
during development.
|
16
|
+
|
17
|
+
|
18
|
+
# Server Side Rendering with the Default rails/webpacker bin/webpack-dev-server
|
19
|
+
|
20
|
+
If you are using server-side rendering, then you have a couple options. The
|
21
|
+
recommended technique is to have a different webpack configuration for server
|
22
|
+
rendering.
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
## If you use the same Webpack setup for your server and client bundles
|
28
|
+
If you do use the webpack-dev-server for prerendering, be sure to set the
|
29
|
+
`config/initializers/react_on_rails.rb` setting of
|
30
|
+
|
31
|
+
```
|
32
|
+
config.same_bundle_for_client_and_server = true
|
33
|
+
```
|
34
|
+
|
35
|
+
`dev_server.hmr` maps to [devServer.hot](https://webpack.js.org/configuration/dev-server/#devserverhot).
|
36
|
+
This must be false if you're using the webpack-dev-server for client and server bundles.
|
37
|
+
|
38
|
+
`dev_server.inline` maps to [devServer.inline](https://webpack.js.org/configuration/dev-server/#devserverinline).
|
39
|
+
This must also be false.
|
40
|
+
|
41
|
+
If you don't configure these two to false, you'll see errors like:
|
42
|
+
|
43
|
+
* "ReferenceError: window is not defined" (if hmr is true)
|
44
|
+
* "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
|
data/docs/basics/i18n.md
CHANGED
@@ -25,7 +25,7 @@ Here's a summary of adding the I18n functionality.
|
|
25
25
|
|
26
26
|
3. Javascript locale files must be generated before `yarn build`.
|
27
27
|
|
28
|
-
Once you setup `config.i18n_dir` as in the previous step,
|
28
|
+
Once you setup `config.i18n_dir` as in the previous step, you will need to make sure `rake react_on_rails:locale` runs before webpack.
|
29
29
|
|
30
30
|
For development, you should adjust your startup scripts (Procfiles) so that they run **`bundle exec rake react_on_rails:locale`** before running any webpack watch process (`yarn run build:development`).
|
31
31
|
|
@@ -48,6 +48,7 @@ with `react-intl` supported via js files:
|
|
48
48
|
```
|
49
49
|
|
50
50
|
2. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && yarn install`.
|
51
|
+
Versions should be newer than these:
|
51
52
|
|
52
53
|
```js
|
53
54
|
"dependencies": {
|
@@ -93,7 +94,6 @@ with `react-intl` supported via js files:
|
|
93
94
|
```
|
94
95
|
|
95
96
|
# Notes
|
96
|
-
|
97
97
|
* See why using JSON could be better compare to JS if amount of data is hure [ https://v8.dev/blog/cost-of-javascript-2019#json]( https://v8.dev/blog/cost-of-javascript-2019#json).
|
98
98
|
* See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
|
99
|
-
*
|
99
|
+
* *Outdated:* You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340), [commmited](https://github.com/shakacode/react-webpack-rails-tutorial/commit/ef369ed9d922aea5116ca7e50208169fd7831389) for a complete example.
|
@@ -7,8 +7,8 @@
|
|
7
7
|
1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `client/package.json` file.
|
8
8
|
|
9
9
|
```ruby
|
10
|
-
gem "react_on_rails", "
|
11
|
-
gem "webpacker", "~>
|
10
|
+
gem "react_on_rails", "12.0.0" # Update to the current version
|
11
|
+
gem "webpacker", "~> 5"
|
12
12
|
```
|
13
13
|
|
14
14
|
2. Run the following 2 commands to install Webpacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
|
@@ -57,8 +57,3 @@ $ yarn add react-on-rails --exact
|
|
57
57
|
```
|
58
58
|
|
59
59
|
That will install the latest version and update your package.json. **NOTE:** the `--exact` flag will ensure that you do not have a "~" or "^" for your react-on-rails version in your package.json.
|
60
|
-
|
61
|
-
## Webpacker Configuration
|
62
|
-
|
63
|
-
React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
|
64
|
-
|
@@ -1,7 +1,5 @@
|
|
1
1
|
# Recommended Project structure
|
2
2
|
|
3
|
-
While React On Rails does not *enforce* a specific project structure, we do *recommend* a standard organization. The more we follow standards as a community, the easier it will be for all of us to move between various Rails projects that include React On Rails.
|
4
|
-
|
5
3
|
The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
|
6
4
|
|
7
5
|
```yml
|
@@ -14,21 +12,9 @@ app/javascript:
|
|
14
12
|
│ └── hello-world-bundle.js
|
15
13
|
```
|
16
14
|
|
17
|
-
|
18
|
-
|
19
|
-
1. No support for different entry points for server rendering.
|
20
|
-
2. Webpacker adds an extra layer of abstraction over Webpack, which you probably don't want.
|
21
|
-
|
22
|
-
This default rails/webpacker configuration is used for the generator because:
|
23
|
-
|
24
|
-
1. Minimizes the amount of generated code to get up and running with React on Rails.
|
25
|
-
2. Good enough for very simple projects.
|
26
|
-
3. Configuration of Webpack is not the goal of this library, React on Rails.
|
15
|
+
However, you may wish to move all your client side files to a single directory called something like `/client`.
|
27
16
|
|
28
|
-
|
29
|
-
Thus, the generator structure and using rails/webpacker for Webpack configuration **is not recommended** for any commercial projects, especially those that will use server rendering. Instead, the recommended structure is shown in this example app: [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and described below.
|
30
|
-
|
31
|
-
## Steps to convert from the generator defaults to use the recommended `/client` directory structure.
|
17
|
+
## Steps to convert from the generator defaults to use a `/client` directory structure.
|
32
18
|
|
33
19
|
1. Move the directory:
|
34
20
|
|
@@ -44,7 +30,7 @@ mv app/javascript client
|
|
44
30
|
|
45
31
|
## Moving node_modules from `/` to `/client` with a custom webpack setup.
|
46
32
|
|
47
|
-
`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration
|
33
|
+
`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
|
48
34
|
|
49
35
|
1. Move the `/package.json` to `/client/package.json`
|
50
36
|
2. Create a `/package.json` that delegates to `/client/package.json`. See the example in [spec/dummy/package.json](../../spec/dummy/package.json).
|
@@ -57,7 +43,7 @@ mv app/javascript client
|
|
57
43
|
1. `/client/app/bundles`: Top level of different app domains. Use a name within this directory for you app domains. For example, if you had a domain called `widget-editing`, then you would have: `/client/app/bundles/widget-editing`
|
58
44
|
1. `/client/app/lib`: Common code for bundles
|
59
45
|
1. Within each bundle directory (or the lib directory), such as a domain named "comments"
|
60
|
-
`/client/app/bundles/comments`, use following directory structure:
|
46
|
+
`/client/app/bundles/comments`, use following directory structure, if you're using redux. However, with React hooks, this will probably be a bit different:
|
61
47
|
|
62
48
|
* `/actions`: Redux actions.
|
63
49
|
* `/components`: "dumb" components (no connections to Redux or Ajax). These get props and can render themselves and children.
|
@@ -79,7 +65,7 @@ This isn't really any technique, as you keep handling all your styling assets us
|
|
79
65
|
1. Much simpler! There's no changes really from your current processes.
|
80
66
|
|
81
67
|
### Using Webpack to Manage Styling Assets
|
82
|
-
This technique involves customization of the webpack config files to generate CSS, image, and font assets.
|
68
|
+
This technique involves customization of the webpack config files to generate CSS, image, and font assets.
|
83
69
|
|
84
70
|
#### Directory structure
|
85
71
|
1. `/client/app/assets`: Assets for CSS for client app.
|
@@ -89,6 +75,3 @@ This technique involves customization of the webpack config files to generate CS
|
|
89
75
|
1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
|
90
76
|
1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.
|
91
77
|
1. You can run your client code on a mocked out express server for super fast prototyping. In other words, your client application can somewhat more easily be move to a different application server.
|
92
|
-
|
93
|
-
#### Updates 2017-03-04 Regarding CSS handled by Webpack
|
94
|
-
* See article [Best practices for CSS and CSS Modules using Webpack](https://forum.shakacode.com/t/best-practices-for-css-and-css-modules-using-webpack/799).
|