react_on_rails 8.0.2 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.eslintignore +2 -0
- data/.gitignore +2 -2
- data/.rubocop.yml +5 -0
- data/.travis.yml +12 -1
- data/CHANGELOG.md +185 -6
- data/CONTRIBUTING.md +2 -2
- data/Gemfile +6 -2
- data/Gemfile.rails32 +74 -0
- data/KUDOS.md +5 -0
- data/README.md +200 -84
- data/Rakefile +11 -1
- data/app/helpers/react_on_rails_helper.rb +1 -1
- data/docs/additional-reading/asset-pipeline.md +20 -0
- data/docs/additional-reading/hot-reloading-rails-development.md +4 -75
- data/docs/additional-reading/node-server-rendering.md +2 -166
- data/docs/additional-reading/rails-assets-relative-paths.md +3 -1
- data/docs/additional-reading/rails-engine-integration.md +1 -1
- data/docs/additional-reading/rspec-configuration.md +7 -24
- data/docs/api/ruby-api-hot-reload-view-helpers.md +2 -2
- data/{lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt → docs/basics/configuration.md} +80 -41
- data/docs/basics/generator.md +0 -5
- data/docs/basics/installation-overview.md +6 -5
- data/docs/contributor-info/generator-testing.md +0 -9
- data/docs/tutorial.md +31 -34
- data/lib/generators/USAGE +0 -4
- data/lib/generators/react_on_rails/base_generator.rb +43 -76
- data/lib/generators/react_on_rails/dev_tests_generator.rb +7 -5
- data/lib/generators/react_on_rails/install_generator.rb +5 -10
- data/lib/generators/react_on_rails/react_no_redux_generator.rb +10 -9
- data/lib/generators/react_on_rails/react_with_redux_generator.rb +27 -17
- data/lib/generators/react_on_rails/templates/.eslintrc +2 -0
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -0
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +5 -0
- data/lib/generators/react_on_rails/templates/base/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +1 -2
- data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +0 -1
- data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +12 -0
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +41 -0
- data/lib/generators/react_on_rails/templates/dev_tests/.eslintrc +25 -0
- data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +0 -1
- data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
- data/lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb +2 -0
- data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/startup/HelloWorldApp.jsx +1 -3
- data/lib/react_on_rails/configuration.rb +21 -16
- data/lib/react_on_rails/git_utils.rb +9 -3
- data/lib/react_on_rails/prerender_error.rb +15 -9
- data/lib/react_on_rails/server_rendering_pool/exec.rb +21 -8
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
- data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +3 -1
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +12 -8
- data/lib/react_on_rails/test_helper.rb +7 -6
- data/lib/react_on_rails/utils.rb +77 -16
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +2 -1
- data/lib/tasks/assets.rake +12 -4
- data/package.json +25 -21
- data/rakelib/dummy_apps.rake +9 -0
- data/rakelib/example_type.rb +4 -70
- data/rakelib/examples.rake +5 -55
- data/rakelib/node_package.rake +1 -0
- data/rakelib/release.rake +9 -1
- data/rakelib/run_rspec.rake +24 -5
- data/react_on_rails.gemspec +2 -1
- data/webpackConfigLoader.js +45 -72
- data/yarn.lock +638 -252
- metadata +36 -26
- data/lib/generators/react_on_rails/node_generator.rb +0 -24
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +0 -2
- data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb.tt +0 -15
- data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +0 -3
- data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -9
- data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -36
- data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +0 -77
- data/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml +0 -27
- data/lib/generators/react_on_rails/templates/base/base/package.json.tt +0 -8
- data/lib/generators/react_on_rails/templates/node/base/client/node/package.json +0 -10
- data/lib/generators/react_on_rails/templates/node/base/client/node/server.js +0 -105
- /data/lib/generators/react_on_rails/templates/base/base/{client/app/bundles/HelloWorld/startup/registration.jsx.tt → app/javascript/packs/registration.js.tt} +0 -0
- /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx → app/javascript/bundles/HelloWorld/actions/helloWorldActionCreators.js} +0 -0
- /data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +0 -0
- /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx → app/javascript/bundles/HelloWorld/constants/helloWorldConstants.js} +0 -0
- /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx → app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.js} +0 -0
- /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx → app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.js} +0 -0
- /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/store/helloWorldStore.jsx → app/javascript/bundles/HelloWorld/store/helloWorldStore.js} +0 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# Asset Pipeline
|
|
2
|
+
|
|
3
|
+
The plumbing of webpack produced assets through the asset pipeline is deprecated as of v9.0.
|
|
4
|
+
|
|
5
|
+
The information in this document is here for those that have not yet upgraded.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
This option still works for your `/config/initializers/react_on_rails.rb` if you are still using the
|
|
11
|
+
asset pipeline.
|
|
12
|
+
```
|
|
13
|
+
################################################################################
|
|
14
|
+
# MISCELLANEOUS OPTIONS
|
|
15
|
+
################################################################################
|
|
16
|
+
# If you want to use webpack for CSS and images, and still use the asset pipeline,
|
|
17
|
+
# see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md
|
|
18
|
+
# And you will use a setting like this.
|
|
19
|
+
config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/
|
|
20
|
+
```
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# Hot Reloading of Assets For Rails Development
|
|
2
2
|
|
|
3
|
+
_Note, this document is not yet updated for React on Rails v8+. See [PR #865](https://github.com/shakacode/react_on_rails/pull/865) for a detailed example of doing hot reloading using V8+ with Webpack v2. Any volunteers to update this page? See [#772](https://github.com/shakacode/react_on_rails/issues/772) and [#361](https://github.com/shakacode/react-webpack-rails-tutorial/issues/361)._
|
|
4
|
+
|
|
5
|
+
------
|
|
6
|
+
|
|
3
7
|
This document outlines the steps to setup your React On Rails Environment so that you can experience the pleasure of hot reloading of JavaScript and Sass during your Rails development work. See [Issue 332](https://github.com/shakacode/react_on_rails/issues/332) for troubleshooting. There are 3 examples of this setup:
|
|
4
8
|
|
|
5
9
|
1. [minimal demo here](https://github.com/retroalgic/react-on-rails-hot-minimal): The most simple and updated hot reloading setup.
|
|
@@ -16,8 +20,6 @@ We'll use a Webpack Dev server on port 3500 to provide the assets to Rails, rath
|
|
|
16
20
|
|
|
17
21
|
`Procfile.static` provides an alternative that uses "static" assets, similar to a production deployment.
|
|
18
22
|
|
|
19
|
-
The secret sauce is in the [app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb) where it uses view helps to configure the correct assets to load, being either the "hot" assets or the "static" assets.
|
|
20
|
-
|
|
21
23
|
## Places to Configure (Files to Examine)
|
|
22
24
|
|
|
23
25
|
1. See the Webpack config files. Note, these examples are now setup for using [CSS Modules](https://github.com/css-modules/css-modules).
|
|
@@ -40,76 +42,3 @@ The secret sauce is in the [app/views/layouts/application.html.erb](https://gith
|
|
|
40
42
|
## Code Snippets
|
|
41
43
|
Please refer to the examples linked above in `spec/dummy` as these code samples might be out of date.
|
|
42
44
|
|
|
43
|
-
|
|
44
|
-
### config/initializers/assets.rb
|
|
45
|
-
|
|
46
|
-
```ruby
|
|
47
|
-
# Add folder with webpack generated assets to assets.paths
|
|
48
|
-
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack")
|
|
49
|
-
|
|
50
|
-
# Precompile additional assets.
|
|
51
|
-
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
|
|
52
|
-
Rails.application.config.assets.precompile << "server-bundle.js"
|
|
53
|
-
|
|
54
|
-
type = ENV["REACT_ON_RAILS_ENV"] == "HOT" ? "non_webpack" : "static"
|
|
55
|
-
Rails.application.config.assets.precompile +=
|
|
56
|
-
[
|
|
57
|
-
"application_#{type}.js",
|
|
58
|
-
"application_#{type}.css"
|
|
59
|
-
]
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
### app/views/layouts/application.html.erb
|
|
63
|
-
|
|
64
|
-
```erb
|
|
65
|
-
<head>
|
|
66
|
-
<title>Dummy</title>
|
|
67
|
-
|
|
68
|
-
<!-- These do use turbolinks 5 -->
|
|
69
|
-
<%= env_stylesheet_link_tag(static: 'application_static',
|
|
70
|
-
hot: 'application_non_webpack',
|
|
71
|
-
media: 'all',
|
|
72
|
-
'data-turbolinks-track' => "reload") %>
|
|
73
|
-
|
|
74
|
-
<!-- These do not use turbolinks, so no data-turbolinks-track -->
|
|
75
|
-
<!-- This is to load the hot assets. -->
|
|
76
|
-
<%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
|
|
77
|
-
'http://localhost:3500/app-bundle.js']) %>
|
|
78
|
-
|
|
79
|
-
<!-- These do use turbolinks 5 -->
|
|
80
|
-
<%= env_javascript_include_tag(static: 'application_static',
|
|
81
|
-
hot: 'application_non_webpack',
|
|
82
|
-
'data-turbolinks-track' => "reload") %>
|
|
83
|
-
|
|
84
|
-
<%= csrf_meta_tags %>
|
|
85
|
-
</head>
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### Procfile.static
|
|
89
|
-
```
|
|
90
|
-
# Run Rails without hot reloading (static assets).
|
|
91
|
-
rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
|
|
92
|
-
|
|
93
|
-
# Build client assets, watching for changes.
|
|
94
|
-
rails-client-assets: yarn run build:dev:client
|
|
95
|
-
|
|
96
|
-
# Build server assets, watching for changes. Remove if not server rendering.
|
|
97
|
-
rails-server-assets: yarn run build:dev:server
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
### Procfile.hot
|
|
101
|
-
|
|
102
|
-
```
|
|
103
|
-
# Procfile for development with hot reloading of JavaScript and CSS
|
|
104
|
-
|
|
105
|
-
# Development rails requires both rails and rails-assets
|
|
106
|
-
# (and rails-server-assets if server rendering)
|
|
107
|
-
rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
|
|
108
|
-
|
|
109
|
-
# Run the hot reload server for client development
|
|
110
|
-
hot-assets: HOT_RAILS_PORT=3500 yarn run hot-assets
|
|
111
|
-
|
|
112
|
-
# Keep the JS fresh for server rendering. Remove if not server rendering
|
|
113
|
-
rails-server-assets: yarn run build:dev:server
|
|
114
|
-
```
|
|
115
|
-
|
|
@@ -1,169 +1,5 @@
|
|
|
1
1
|
# Node.js for Server Rendering
|
|
2
2
|
|
|
3
|
-
Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains.
|
|
3
|
+
Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains. While often ExecJS with [mini_racer](https://github.com/discourse/mini_racer) is "fast enough", we've heard of other large websites using Node.js for better server rendering performance.
|
|
4
4
|
|
|
5
|
-
If you
|
|
6
|
-
|
|
7
|
-
## Setup of React on Rails with Node.js Server Rendering
|
|
8
|
-
**Warning: this is an experimental feature.**
|
|
9
|
-
|
|
10
|
-
* Every time the webpack bundle changes, you have to restart the server yourself.
|
|
11
|
-
|
|
12
|
-
To do this you need to add a few files and then configure react_on_rails to use NodeJS. Here are the relevant files to add.
|
|
13
|
-
|
|
14
|
-
Node server rendering allows you to use separate NodeJS process as a renderer. The process loads your configured server_bundle_js file and then executes javascript to render the component inside its environment. The communication between rails and node occurs
|
|
15
|
-
via a socket (`client/node/node.sock`)
|
|
16
|
-
|
|
17
|
-
### Getting started
|
|
18
|
-
|
|
19
|
-
### Configuration
|
|
20
|
-
|
|
21
|
-
#### Update the React on Rails Initializer
|
|
22
|
-
|
|
23
|
-
To use node process just set `server_render_method = "NodeJS"` in `config/initializers/react_on_rails.rb`. To change back
|
|
24
|
-
to ExecJS set `server_render_method = "ExecJS"`
|
|
25
|
-
|
|
26
|
-
```ruby
|
|
27
|
-
# app/config/initializers/react_on_rails.rb
|
|
28
|
-
config.server_render_method = "NodeJS"
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
You need to configure the name of the server bundle in two places:
|
|
32
|
-
|
|
33
|
-
1. JavaScript: Change the name of server bundle and adjust yarn start script in `client/node/package.json`
|
|
34
|
-
2. Ruby: The configured server bundle file is defined in `config/react_on_rails.rb`, and you'll have a webpack file that creates this. You maybe using the same file for client rendering.
|
|
35
|
-
|
|
36
|
-
```ruby
|
|
37
|
-
# This is the file used for server rendering of React when using `(prerender: true)`
|
|
38
|
-
# If you are never using server rendering, you may set this to "".
|
|
39
|
-
# If you are using the same file for client and server rendering, having this set probably does
|
|
40
|
-
# not affect performance.
|
|
41
|
-
config.server_bundle_js_file = "webpack-bundle.js"
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
And in `client/node/package.json`
|
|
45
|
-
|
|
46
|
-
```javascript
|
|
47
|
-
// client/node/package.json
|
|
48
|
-
{
|
|
49
|
-
"name": "react_on_rails_node",
|
|
50
|
-
"version": "0.0.0",
|
|
51
|
-
"private": true,
|
|
52
|
-
"scripts": {
|
|
53
|
-
"start": "node ./server.js -s webpack-bundle.js"
|
|
54
|
-
},
|
|
55
|
-
"dependencies": {
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
And you'll need this file: `client/node/server.js`
|
|
61
|
-
|
|
62
|
-
```javascript
|
|
63
|
-
// client/node/server.js
|
|
64
|
-
const net = require('net');
|
|
65
|
-
const fs = require('fs');
|
|
66
|
-
|
|
67
|
-
const bundlePath = '../../app/assets/webpack/';
|
|
68
|
-
let bundleFileName = 'server-bundle.js';
|
|
69
|
-
|
|
70
|
-
let currentArg;
|
|
71
|
-
|
|
72
|
-
class Handler {
|
|
73
|
-
constructor() {
|
|
74
|
-
this.queue = [];
|
|
75
|
-
this.initialized = false;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
initialize() {
|
|
79
|
-
console.log(`Processing ${this.queue.length} pending requests`);
|
|
80
|
-
let callback;
|
|
81
|
-
|
|
82
|
-
// eslint-disable-next-line no-cond-assign
|
|
83
|
-
while (callback = this.queue.pop()) {
|
|
84
|
-
callback();
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
this.initialized = true;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
handle(connection) {
|
|
91
|
-
const callback = () => {
|
|
92
|
-
const terminator = '\r\n\0';
|
|
93
|
-
let request = '';
|
|
94
|
-
connection.setEncoding('utf8');
|
|
95
|
-
connection.on('data', (data) => {
|
|
96
|
-
console.log(`Processing chunk: ${data}`);
|
|
97
|
-
request += data;
|
|
98
|
-
if (data.slice(-terminator.length) === terminator) {
|
|
99
|
-
request = request.slice(0, -terminator.length);
|
|
100
|
-
|
|
101
|
-
// eslint-disable-next-line no-eval
|
|
102
|
-
const response = eval(request);
|
|
103
|
-
connection.write(`${response}${terminator}`);
|
|
104
|
-
request = '';
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
if (this.initialized) {
|
|
110
|
-
callback();
|
|
111
|
-
} else {
|
|
112
|
-
this.queue.push(callback);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
const handler = new Handler();
|
|
118
|
-
|
|
119
|
-
process.argv.forEach((val) => {
|
|
120
|
-
if (val[0] === '-') {
|
|
121
|
-
currentArg = val.slice(1);
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
if (currentArg === 's') {
|
|
126
|
-
bundleFileName = val;
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
function loadBundle() {
|
|
131
|
-
if (handler.initialized) {
|
|
132
|
-
console.log('Reloading server bundle must be implemented by restarting the node process!');
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* eslint-disable */
|
|
137
|
-
require(bundlePath + bundleFileName);
|
|
138
|
-
/* eslint-enable */
|
|
139
|
-
console.log(`Loaded server bundle: ${bundlePath}${bundleFileName}`);
|
|
140
|
-
handler.initialize();
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
try {
|
|
144
|
-
fs.mkdirSync(bundlePath);
|
|
145
|
-
} catch (e) {
|
|
146
|
-
if (e.code !== 'EEXIST') {
|
|
147
|
-
throw e;
|
|
148
|
-
} else {
|
|
149
|
-
loadBundle();
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
fs.watchFile(bundlePath + bundleFileName, (curr) => {
|
|
154
|
-
if (curr && curr.blocks && curr.blocks > 0) {
|
|
155
|
-
loadBundle();
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
const unixServer = net.createServer((connection) => {
|
|
160
|
-
handler.handle(connection);
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
unixServer.listen('node.sock');
|
|
164
|
-
|
|
165
|
-
process.on('SIGINT', () => {
|
|
166
|
-
unixServer.close();
|
|
167
|
-
process.exit();
|
|
168
|
-
});
|
|
169
|
-
```
|
|
5
|
+
If you want to use a node server for server rendering, [get in touch](mailto:justin@shakacode.com). ShakaCode has built a premium Node rendering server for React on Rails.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
*Note: this doc needs updating to reflect how v8.x+ no longer puts Webpack generated files through the asset pipeline. PR's welcome!*
|
|
2
|
+
|
|
1
3
|
# Using Webpack bundled assets with the Rails Asset Pipeline
|
|
2
4
|
|
|
3
5
|
**If you're looking to use assets in your react components, look no further. This doc is for you.**
|
|
@@ -136,7 +138,7 @@ module.exports = {
|
|
|
136
138
|
],
|
|
137
139
|
|
|
138
140
|
output: {
|
|
139
|
-
filename: '
|
|
141
|
+
filename: 'hello-world-bundle.js',
|
|
140
142
|
path: '../app/assets/webpack'
|
|
141
143
|
},
|
|
142
144
|
|
|
@@ -20,7 +20,7 @@ Rake.application.remove_task('react_on_rails:assets:compile_environment')
|
|
|
20
20
|
|
|
21
21
|
task 'react_on_rails:assets:compile_environment' do
|
|
22
22
|
path = File.join(YourEngineName::Engine.root, 'client')
|
|
23
|
-
sh "cd #{path} && #{ReactOnRails.configuration.
|
|
23
|
+
sh "cd #{path} && #{ReactOnRails.configuration.build_production_command}"
|
|
24
24
|
end
|
|
25
25
|
```
|
|
26
26
|
## In the project including your engine
|
|
@@ -5,7 +5,6 @@ ReactOnRails provides a helper method called `ReactOnRails::TestHelper.configure
|
|
|
5
5
|
|
|
6
6
|
```ruby
|
|
7
7
|
RSpec.configure do |config|
|
|
8
|
-
# Next line will ensure that assets are built if webpack -w is not running to build the bundles
|
|
9
8
|
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
10
9
|
```
|
|
11
10
|
|
|
@@ -24,7 +23,9 @@ If you are using Webpack to build CSS assets, you should do something like this
|
|
|
24
23
|
```
|
|
25
24
|
|
|
26
25
|
Please take note of the following:
|
|
27
|
-
- This utility uses your `
|
|
26
|
+
- This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using webpacker, the default value will come from the `config/webpacker.yml` value for the `public_output_path` and the `source_path`
|
|
27
|
+
- If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates. This is actually a common occurrence when you've built your test generated files and then you sync up your repository files.
|
|
28
|
+
|
|
28
29
|
- By default, the webpack processes look for the `app/assets/webpack` folders (configured as setting `webpack_generated_files` in the `config/react_on_rails.rb`. If this folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets. You can override the location of these files inside of `config/initializers/react_on_rails.rb` by passing a filepath (relative to the root of the app) to the `generated_assets_dir` configuration option.
|
|
29
30
|
|
|
30
31
|
The following `config/react_on_rails.rb` settings **must** match your setup:
|
|
@@ -35,37 +36,19 @@ The following `config/react_on_rails.rb` settings **must** match your setup:
|
|
|
35
36
|
config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
|
|
36
37
|
|
|
37
38
|
# Define the files we need to check for webpack compilation when running tests.
|
|
38
|
-
|
|
39
|
+
# Generally, the manifest.json is good enough for this check if using webpacker
|
|
40
|
+
config.webpack_generated_files = %w( hello-world-bundle.js )
|
|
39
41
|
|
|
40
42
|
# If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
41
43
|
# with rspec then this controls what yarn command is run
|
|
42
44
|
# to automatically refresh your webpack assets on every test run.
|
|
43
|
-
config.
|
|
45
|
+
config.build_test_command = "yarn run build:test"
|
|
44
46
|
```
|
|
45
47
|
|
|
46
|
-
If you want to speed up the re-compiling process
|
|
47
|
-
|
|
48
|
-
```
|
|
49
|
-
"scripts": {
|
|
50
|
-
"build:test": "webpack --config webpack.config.js",
|
|
51
|
-
"build:production": "NODE_ENV=production webpack --config webpack.config.js",
|
|
52
|
-
"build:development": "webpack -w --config webpack.config.js"
|
|
53
|
-
},
|
|
54
|
-
```
|
|
48
|
+
If you want to speed up the re-compiling process so you don't wait to run your tests to build the files, you can run your test compilation with the "watch" flags.
|
|
55
49
|
|
|
56
50
|
[spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) contains examples of how to set the proc files for this purpose.
|
|
57
51
|
|
|
58
|
-
## Hot Reloading
|
|
59
|
-
If you're using the hot reloading setup, you'll be running a Webpack development server to provide the JavaScript and mabye CSS assets to your Rails app. If you're doing server rendering, you'll also have a webpack watch process to refresh the server rendering file. **If your server and client bundles are different**, and you run specs, the client bundle files will not be created until React on Rails detects it's out of date. Then your script to create all bundle files will redo the server bundle file. There's a few simple remedies for this situation:
|
|
60
|
-
|
|
61
|
-
1. Switch to using static compilation of the webpack bundle files. This way, you're running a Webpack watch process to generate the same files used for tests as well as developmentment. You should have a separate Procfile for doing development using a "static" setup, rather than a "hot" setup.
|
|
62
|
-
2. Change your Procfile for starting the hot reloading server to also run a webpack process to automatically rebuild a the client assets while also doing hot reloading for browser testing.
|
|
63
|
-
|
|
64
|
-
Note, none of these issues matter if you're using the same file for both server and client side rendering.
|
|
65
|
-
|
|
66
|
-
## Using RubyMine and other IDEs that save files right before invoking tests
|
|
67
|
-
We had previously tried to allow using a process check to see if a Webpack watch process would already be automatically compiling the files. However, we removed this as it proved to be fragile with various setups. Thus, you want to hit the save keystroke when you save a JavaScript file, and then run your tests. Yes, you might not do this in time, and the test runner may be building the same files as you Webpack watch processes. This will probably happen infrequently, but if this does become an issue, we can look into bring back this functionality ([#398](https://github.com/shakacode/react_on_rails/pull/398)).
|
|
68
|
-
|
|
69
52
|
If you want to use a testing framework other than RSpec, please submit let us know on the changes you need to do and we'll update the docs.
|
|
70
53
|
|
|
71
54
|

|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
## NOTE: These helpers are NOT needed if using
|
|
1
|
+
## NOTE: These helpers are NOT needed if using webpacker
|
|
2
2
|
|
|
3
3
|
## Hot Reloading View Helpers
|
|
4
4
|
The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
|
|
@@ -17,7 +17,7 @@ static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"`
|
|
|
17
17
|
<!-- This is to load the hot assets. -->
|
|
18
18
|
|
|
19
19
|
<!-- Note, you can have multiple files here. It's an array. -->
|
|
20
|
-
<%= env_javascript_include_tag(hot: ['http://localhost:3500/
|
|
20
|
+
<%= env_javascript_include_tag(hot: ['http://localhost:3500/hello-world-bundle.js]') %>
|
|
21
21
|
|
|
22
22
|
<!-- These do use turbolinks -->
|
|
23
23
|
<%= env_javascript_include_tag(static: 'application_static',
|
|
@@ -1,54 +1,92 @@
|
|
|
1
|
-
|
|
2
|
-
ReactOnRails.configure do |config|
|
|
3
|
-
# Client bundles are configured in application.js
|
|
1
|
+
Here is the full set of config options.
|
|
4
2
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
|
|
3
|
+
```yaml
|
|
4
|
+
# frozen_string_literal: true
|
|
8
5
|
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
# NOTE: you typically will leave the commented out configurations set to their defaults.
|
|
7
|
+
# Thus, you only need to pay careful attention to the non-commented settings in this file.
|
|
11
8
|
|
|
12
|
-
|
|
13
|
-
#
|
|
14
|
-
#
|
|
15
|
-
|
|
16
|
-
config.server_bundle_js_file = "webpack-bundle.js"
|
|
17
|
-
|
|
18
|
-
# If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
19
|
-
# with rspec then this controls what yarn command is run
|
|
20
|
-
# to automatically refresh your webpack assets on every test run.
|
|
21
|
-
config.npm_build_test_command = "yarn run build:test"
|
|
9
|
+
ReactOnRails.configure do |config|
|
|
10
|
+
# defaults to "" (top level)
|
|
11
|
+
#
|
|
12
|
+
config.node_modules_location = ""
|
|
22
13
|
|
|
23
14
|
# This configures the script to run to build the production assets by webpack. Set this to nil
|
|
24
15
|
# if you don't want react_on_rails building this file for you.
|
|
25
|
-
config.
|
|
16
|
+
config.build_production_command = "RAILS_ENV=production bin/webpack"
|
|
26
17
|
|
|
27
18
|
################################################################################
|
|
28
|
-
# CLIENT RENDERING OPTIONS
|
|
29
|
-
# Below options can be overriden by passing options to the react_on_rails
|
|
30
|
-
# `render_component` view helper method.
|
|
31
19
|
################################################################################
|
|
32
|
-
#
|
|
33
|
-
|
|
20
|
+
# TEST CONFIGURATION OPTIONS
|
|
21
|
+
# Below options are used with the use of this test helper:
|
|
22
|
+
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
23
|
+
################################################################################
|
|
34
24
|
|
|
35
|
-
#
|
|
36
|
-
|
|
25
|
+
# If you are using this in your spec_helper.rb (or rails_helper.rb):
|
|
26
|
+
#
|
|
27
|
+
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
|
28
|
+
#
|
|
29
|
+
# with rspec then this controls what yarn command is run
|
|
30
|
+
# to automatically refresh your webpack assets on every test run.
|
|
31
|
+
#
|
|
32
|
+
config.build_test_command = "RAILS_ENV=test bin/webpack"
|
|
37
33
|
|
|
34
|
+
# Directory where your generated assets go. All generated assets must go to the same directory.
|
|
35
|
+
# If you are using webpacker, this value will come from your config/webpacker.yml file.
|
|
36
|
+
# This is the default in webpacker.yml:
|
|
37
|
+
# public_output_path: packs-test
|
|
38
|
+
# which means files in /public/packs-test
|
|
39
|
+
#
|
|
40
|
+
# Alternately, you may configure this. It is relative to your Rails root directory.
|
|
41
|
+
# A custom, non-webpacker, config might use something like:
|
|
42
|
+
#
|
|
43
|
+
config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
|
|
44
|
+
|
|
45
|
+
# The test helper needs to know where your JavaScript files exist. The default is configured
|
|
46
|
+
# by your config/webpacker.yml soure_path:
|
|
47
|
+
# source_path: app/javascript
|
|
48
|
+
#
|
|
49
|
+
# If you have a non-default `node_modules_location`, that is assumed to be the location of your source
|
|
50
|
+
# files.
|
|
51
|
+
|
|
52
|
+
# Define the files we need to check for webpack compilation when running tests.
|
|
53
|
+
# The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
|
|
54
|
+
#
|
|
55
|
+
config.webpack_generated_files = %w( manifest.json )
|
|
56
|
+
|
|
57
|
+
################################################################################
|
|
38
58
|
################################################################################
|
|
39
59
|
# SERVER RENDERING OPTIONS
|
|
40
60
|
################################################################################
|
|
61
|
+
# This is the file used for server rendering of React when using `(prerender: true)`
|
|
62
|
+
# If you are never using server rendering, you should set this to "".
|
|
63
|
+
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
|
|
64
|
+
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
|
|
65
|
+
# JavaScript execution instances which should handle any component requested.
|
|
66
|
+
#
|
|
67
|
+
# While you may configure this to be the same as your client bundle file, this file is typically
|
|
68
|
+
# different.
|
|
69
|
+
config.server_bundle_js_file = "server-bundle.js"
|
|
70
|
+
|
|
41
71
|
# If set to true, this forces Rails to reload the server bundle if it is modified
|
|
72
|
+
# Default value is Rails.env.development?
|
|
73
|
+
#
|
|
42
74
|
config.development_mode = Rails.env.development?
|
|
43
75
|
|
|
44
76
|
# For server rendering. This can be set to false so that server side messages are discarded.
|
|
45
77
|
# Default is true. Be cautious about turning this off.
|
|
78
|
+
# Default value is true
|
|
79
|
+
#
|
|
46
80
|
config.replay_console = true
|
|
47
81
|
|
|
48
82
|
# Default is true. Logs server rendering messages to Rails.logger.info
|
|
83
|
+
#
|
|
49
84
|
config.logging_on_server = true
|
|
50
85
|
|
|
51
|
-
|
|
86
|
+
# Default is to false to NOT raise exception on server if the JS code throws.
|
|
87
|
+
# Reason is that it's easier to debug this when you get the error over to the client.
|
|
88
|
+
#
|
|
89
|
+
config.raise_on_prerender_error = false
|
|
52
90
|
|
|
53
91
|
# Server rendering only (not for render_component helper)
|
|
54
92
|
# You can configure your pool of JS virtual machines and specify where it should load code:
|
|
@@ -65,25 +103,26 @@ ReactOnRails.configure do |config|
|
|
|
65
103
|
# Replace the following line to the location where you keep translation.js & default.js for use
|
|
66
104
|
# by the npm packages react-intl. Be sure this directory exists!
|
|
67
105
|
# config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
|
|
106
|
+
# If not using the i18n feature, then leave this section commented out or set the value
|
|
107
|
+
# of config.i18n_dir to nil.
|
|
68
108
|
#
|
|
69
109
|
# Replace the following line to the location where you keep your client i18n yml files
|
|
70
110
|
# that will source for automatic generation on translations.js & default.js
|
|
71
|
-
# By default(without this option) all yaml files from Rails.root.join("config", "locales")
|
|
72
|
-
#
|
|
111
|
+
# By default(without this option) all yaml files from Rails.root.join("config", "locales")
|
|
112
|
+
# and installed gems are loaded
|
|
113
|
+
config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
|
|
73
114
|
|
|
74
115
|
################################################################################
|
|
75
|
-
# MISCELLANEOUS OPTIONS
|
|
76
116
|
################################################################################
|
|
117
|
+
# CLIENT RENDERING OPTIONS
|
|
118
|
+
# Below options can be overriden by passing options to the react_on_rails
|
|
119
|
+
# `render_component` view helper method.
|
|
120
|
+
################################################################################
|
|
121
|
+
# default is false
|
|
122
|
+
config.prerender = false
|
|
77
123
|
|
|
78
|
-
#
|
|
79
|
-
|
|
80
|
-
config.server_render_method = "NodeJS"
|
|
81
|
-
<%- else -%>
|
|
82
|
-
config.server_render_method = "ExecJS"
|
|
83
|
-
<%- end -%>
|
|
84
|
-
|
|
85
|
-
# If you want to use webpack for CSS and images, and still use the asset pipeline,
|
|
86
|
-
# see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md
|
|
87
|
-
# And you will use a setting like this.
|
|
88
|
-
# config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/
|
|
124
|
+
# default is true for development, off otherwise
|
|
125
|
+
config.trace = Rails.env.development?
|
|
89
126
|
end
|
|
127
|
+
|
|
128
|
+
```
|
data/docs/basics/generator.md
CHANGED
|
@@ -13,7 +13,6 @@ Usage:
|
|
|
13
13
|
|
|
14
14
|
Options:
|
|
15
15
|
-R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example. Default: false
|
|
16
|
-
-N, [--node], [--no-node] # Sets up node as a server rendering option. Default: false
|
|
17
16
|
[--ignore-warnings], [--no-ignore-warnings] # Skip warnings. Default: false
|
|
18
17
|
|
|
19
18
|
Runtime options:
|
|
@@ -70,7 +69,3 @@ If you have used the `--redux` generator option, you will notice the familiar ad
|
|
|
70
69
|
|
|
71
70
|
Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
|
|
72
71
|
|
|
73
|
-
### Using Images and Fonts
|
|
74
|
-
The generator has amended the folders created in `client/assets/` to Rails's asset path. We recommend that if you have any existing assets that you want to use with your client code, you should move them to these folders and use webpack as normal. This allows webpack's development server to have access to your assets, as it will not be able to see any assets in the default Rails directories which are above the `/client` directory.
|
|
75
|
-
|
|
76
|
-
Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.
|
|
@@ -4,11 +4,14 @@ Here's an overview of installation if you're not using the generator.
|
|
|
4
4
|
|
|
5
5
|
Note, the best way to understand how to use ReactOnRails is to study the examples:
|
|
6
6
|
|
|
7
|
-
1. [
|
|
8
|
-
2. [
|
|
7
|
+
1. Run the generator per the [Tutorial](../../tutorial.md).
|
|
8
|
+
2. [spec/dummy](../../spec/dummy): Simple, no DB example.
|
|
9
|
+
3. [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial): Full featured example.
|
|
9
10
|
|
|
10
11
|
## Configure the `/client` Directory
|
|
11
12
|
|
|
13
|
+
Note, version 9.0 of React on Rails removed the requirement to place all client side files in the `/client` directory.
|
|
14
|
+
|
|
12
15
|
This directory has no references to Rails outside of the destination directory for the files created by the various Webpack config files.
|
|
13
16
|
|
|
14
17
|
The only requirements within this directory for basic React on Rails integration are:
|
|
@@ -23,12 +26,10 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
|
|
|
23
26
|
1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
|
|
24
27
|
|
|
25
28
|
## Rails Steps (outside of /client)
|
|
26
|
-
1. Add `gem "
|
|
29
|
+
1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
|
|
27
30
|
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.
|
|
28
31
|
1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
|
|
29
32
|
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. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development.md)
|
|
30
|
-
|
|
31
|
-
1. Configure your `lib/tasks/assets.rake` file to run webpack during asset precompilation.
|
|
32
33
|
1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/additional-reading/heroku-deployment.md)
|
|
33
34
|
|
|
34
35
|
If I missed anything, please submit a PR or file an issue.
|
|
@@ -9,12 +9,3 @@ We are currently using Travis for CI. Because of the way Travis works, it is not
|
|
|
9
9
|
## Configuring what Apps are Generated
|
|
10
10
|
You can specify additional apps to generate and test by adding to the rakelib/examples_config.yml file. The necessary build and test tasks will automatically be created for you dynamically at runtime.
|
|
11
11
|
|
|
12
|
-
## More on the Rake Tasks
|
|
13
|
-
In order to maximize efficiency, we took several steps to improve the performance of the rake tasks that utilize somewhat advanced rake functionality such as task dependencies, `file` tasks, task synthesizing, and concurrent tasks with `multitask`.
|
|
14
|
-
|
|
15
|
-
For example, re-generating the app, running `yarn`, and re-generating the webpack bundles are all only done when they need to be done. Rake will also run certain tasks, including those that generate multiple applications, concurrently.
|
|
16
|
-
|
|
17
|
-
For more insight, see:
|
|
18
|
-
|
|
19
|
-
- [Avdi Grimm's series of articles on Rake](http://devblog.avdi.org/2014/04/30/learn-advanced-rake-in-7-episodes/)
|
|
20
|
-
- [Martin Fowler's rake article](http://martinfowler.com/articles/rake.html)
|