You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* See CHANGELOG.md for summary of changes
* Change webpack-bundle to hello-world-bundle
See https://github.com/shakacode/react-on-rails-v9-rc-generator/pulls
for examples of new generator output.
* Remove gen examples optimizations for spec
Older optimizations were for times npm was super slow.
1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
2. Renamed
* config.npm_build_test_command ==> config.build_test_command
* config.build_production_command ==> config.build_production_command
- Update the gemfile. Switch over to using the webpacker gem.
```rb
gem "webpacker"
```
- Update for the renaming in the `WebpackConfigLoader` in your webpack configuration.
You will need to rename the following object properties:
- webpackOutputPath ==> output.path
- webpackPublicOutputDir ==> output.publicPath
- hotReloadingUrl ==> output.publicPathWithHost
- hotReloadingHostname ==> settings.dev_server.host
- hotReloadingPort ==> settings.dev_server.port
- hmr ==> settings.dev_server.hmr
- manifest ==> Remove this one. We use the default for Webpack of manifest.json
- env ==> Use `const { env } = require('process');`
- devBuild ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
- Edit your Webpack.config files:
- Change your Webpack output to be like:
```
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
const configPath = resolve('..', 'config');
const { output, settings } = webpackConfigLoader(configPath);
const hmr = settings.dev_server.hmr;
const devBuild = process.env.NODE_ENV !== 'production';
output: {
filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].chunk.js',
publicPath: output.publicPath,
path: output.path,
},
```
- Change your ManifestPlugin definition to something like the following
```
new ManifestPlugin({
publicPath: output.publicPath,
writeToFileEmit: true
}),
```
- Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
- Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
- If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
- Alternately, if you are updating from webpacker_lite, you can manually change these:
- Add a default setting
```
cache_manifest: false
```
- For production, set:
```
cache_manifest: true
```
- Add a section like this under your development env:
```
dev_server:
host: localhost
port: 3035
hmr: false
```
Set hmr to your preference.
- See the example `spec/dummy/config/webpacker.yml`.
- Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
- Rename `webpack_public_output_dir` to `public_output_path`.
- Edit your Procfile.dev
- Remove the env value WEBPACKER_DEV_SERVER as it's not used
- For hot loading:
- Set the `hmr` key in your `webpacker.yml` to `true`.
Copy file name to clipboardExpand all lines: CHANGELOG.md
+154-4
Original file line number
Diff line number
Diff line change
@@ -8,11 +8,148 @@ Changes since last non-beta release.
8
8
9
9
*Please add entries here for your pull requests.*
10
10
11
+
- Fix regression where `react_component(... prerender: true)` wouldn't find the generated asset bundle, because it wasn't looking for the hashed path.
12
+
13
+
14
+
## 9.0 from 8.x. Upgrade Instructions
15
+
All 9.0.0 beta versions can be viewed in [PR 908](https://github.com/shakacode/react_on_rails/pull/908)
16
+
17
+
For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https://github.com/shakacode/react-webpack-rails-tutorial/pull/416).
18
+
19
+
- Breaking Configuration Changes
20
+
1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
- Change your ManifestPlugin definition to something like the following
61
+
```
62
+
new ManifestPlugin({
63
+
publicPath: output.publicPath,
64
+
writeToFileEmit: true
65
+
}),
66
+
67
+
```
68
+
69
+
- Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
70
+
- Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
71
+
- If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
72
+
- Alternately, if you are updating from webpacker_lite, you can manually change these:
73
+
- Add a default setting
74
+
```
75
+
cache_manifest: false
76
+
```
77
+
- For production, set:
78
+
```
79
+
cache_manifest: true
80
+
```
81
+
- Add a section like this under your development env:
82
+
```
83
+
dev_server:
84
+
host: localhost
85
+
port: 3035
86
+
hmr: false
87
+
```
88
+
Set hmr to your preference.
89
+
- See the example `spec/dummy/config/webpacker.yml`.
90
+
- Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
91
+
- Rename `webpack_public_output_dir` to `public_output_path`.
92
+
93
+
- Edit your Procfile.dev
94
+
- Remove the env value WEBPACKER_DEV_SERVER as it's not used
95
+
- For hot loading:
96
+
- Set the `hmr` key in your `webpacker.yml` to `true`.
97
+
98
+
99
+
#### Troubleshooting
100
+
101
+
102
+
103
+
### [9.0.0]
104
+
*Diffs for the beta to master*
105
+
106
+
### [9.0.0-beta.12]
107
+
- Updated for latest rails/webpacker using the official gem
108
+
- hot reloading working in generator
109
+
110
+
### [9.0.0-beta.11]
111
+
- Updated for latest rails_webpacker.
112
+
- hot reloading working in spec/dummy
113
+
114
+
### [9.0.0-beta.10]
115
+
- Updated for the latest rails/webpacker. Added the cache_manifest setting.
116
+
117
+
### [9.0.0-beta.9]
118
+
- Fixes precompile task going to Webpacker's. You need to set `custom_compile: true` in your `webpacker.yml`.
119
+
- Changed webpack-bundle.js name to hello-world-bundle.js
- Fixed problems when running in development mode for both the generator and spec/dummy.
145
+
146
+
### [9.0.0-beta.1]
147
+
- First version of depending on Webpacker rather than Webpacker Lite
148
+
11
149
### [8.0.7]
12
150
#### fixed
13
151
- Fixes generator bug by keeping blank line at top in case existing .gitignore does not end in a newline. [#916](https://github.com/shakacode/react_on_rails/pull/916) by [justin808](https://github.com/justin808).
14
152
15
-
16
153
### [8.0.6]
17
154
#### fixed
18
155
- Fixes server rendering when using a CDN. Server rendering would try to fetch a file with the "asset_host". This change updates the webpacker_lite dependency to 2.1.0 which has a new helper `pack_path`. [#901](https://github.com/shakacode/react_on_rails/pull/901) by [justin808](https://github.com/justin808). Be sure to update webpacker_lite to 2.1.0.
@@ -313,7 +450,7 @@ No changes.
313
450
- See [shakacode/react-webpack-rails-tutorial/pull/287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287) for an example of upgrading from v5.
314
451
315
452
- To configure the asset compliation you can either
316
-
1. Specify a `config/react_on_rails` setting for `npm_build_production_command` to be nil to turn this feature off.
453
+
1. Specify a `config/react_on_rails` setting for `build_production_command` to be nil to turn this feature off.
317
454
2. Specify the script command you want to run to build your production assets, and remove your assets.rake file.
318
455
319
456
- If you are using the ReactOnRails test helper, then you will need to add the 'config.npm_build_test_command' to your config to tell react_on_rails what command to run when you run rspec.
@@ -324,7 +461,7 @@ Here is the addition to the generated config file:
324
461
```ruby
325
462
# This configures the script to run to build the production assets by webpack. Set this to nil
326
463
# if you don't want react_on_rails building this file for you.
327
-
config.npm_build_production_command="npm run build:production"
464
+
config.build_production_command = "npm run build:production"
328
465
329
466
# If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
330
467
# with rspec then this controls what npm command is run
@@ -631,7 +768,20 @@ Best done with Object destructing:
@@ -145,7 +145,7 @@ yarn run install-react-on-rails
145
145
```
146
146
_Note: this runs npm under the hood as explained in **Test NPM for react-on-rails** section above_
147
147
148
-
From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:prepare_all` rake task.
148
+
From now on, the example and dummy apps will use your local node_package folder as the react-on-rails node package. This will also be done automatically for you via the `rake examples:gen_all` rake task.
149
149
150
150
*Side note: It's critical to use the alias section of the webpack config to avoid a double inclusion error. This has already been done for you in the example and dummy apps, but for reference:*
Copy file name to clipboardExpand all lines: README.md
+21-14
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,6 @@ Turn on HMR (Hot reloading)
24
24
25
25
---------------
26
26
27
-
28
27
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
29
28
30
29
Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
@@ -148,7 +147,7 @@ See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpac
148
147
149
148
## Why Webpack?
150
149
151
-
Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker_lite](https://github.com/shakacode/webpacker_lite) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
150
+
Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly processing your Webpack output via the Webpack config files.
152
151
153
152
This usage of webpack fits neatly and simply into existing Rails apps. You can include React components on a Rails view with a simple helper.
154
153
@@ -166,10 +165,18 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
166
165
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.
167
166
168
167
```ruby
169
-
gem "react_on_rails", "8.0.0"
168
+
gem "react_on_rails", "9.0.0"
169
+
gem "webpacker", "~> 3.0"
170
170
```
171
171
172
-
2. Commit this to git (you cannot run the generator unless you do this or pass the option `--ignore-warnings`).
172
+
2. Run the following 2 commands to install Webpacker with React:
173
+
```
174
+
bundle exec rails webpacker:install
175
+
bundle exec rails webpacker:install:react
176
+
177
+
```
178
+
179
+
2. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
173
180
174
181
3. See help for the generator:
175
182
@@ -183,13 +190,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
183
190
rails generate react_on_rails:install
184
191
```
185
192
186
-
5. Bundle and NPM install. Make sure you are on a recent version of node. Please use at least Node v5. Bundle is for adding execJs. You can remove that if you are sure you will not server render.
187
-
188
-
```bash
189
-
bundle && yarn
190
-
```
191
-
192
-
6. Ensure that you have `foreman` installed: `gem install foreman`.
193
+
5. Ensure that you have `foreman` installed: `gem install foreman`.
193
194
194
195
7. Start your Rails server:
195
196
@@ -259,6 +260,11 @@ cd client && yarn add react-on-rails
259
260
260
261
That will install the latest version and update your package.json.
261
262
263
+
## Webpacker Configuration
264
+
265
+
React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
266
+
267
+
262
268
## How it Works
263
269
The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/webpack`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
264
270
@@ -423,12 +429,12 @@ end
423
429
In this case, a prop and value for `somethingUseful` will go into the railsContext passed to all react_component and redux_store calls. You may set any values available in the view rendering context.
424
430
425
431
### Globally Exposing Your React Components
426
-
Place your JavaScript code inside of the provided `client/app` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
432
+
Place your JavaScript code inside of the default `app/javascript` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
427
433
428
434
This is how to expose a component to the `react_component` view helper.
@@ -591,7 +597,7 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
591
597
## Deployment
592
598
* Version 6.0 puts the necessary precompile steps automatically in the rake precompile step. You can, however, disable this by setting certain values to nil in the [config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb).
593
599
*`config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
594
-
*`npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
600
+
*`build_production_command`: Set to nil to turn off the precompilation of the js assets.
595
601
* See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
596
602
597
603
## Integration with Node.js for Server Rendering
@@ -628,6 +634,7 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
628
634
+**Development**
629
635
+[React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
0 commit comments