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
Copy file name to clipboardExpand all lines: CHANGELOG.md
+146-16
Original file line number
Diff line number
Diff line change
@@ -8,26 +8,143 @@ Changes since last non-beta release.
8
8
9
9
*Please add entries here for your pull requests.*
10
10
11
-
### [9.0.0.beta.1]
12
-
- Switch over to using Webpacker
11
+
- Fix regression where `react_component(... prerender: true)` wouldn't find the generated asset bundle, because it wasn't looking for the hashed path.
13
12
14
-
- If using the WebpackConfigLoader, you will need to rename the following object properties:
15
-
- hotReloadingUrl devServerUrl
16
-
- hotReloadingHostname devServerHost
17
-
- hotReloadingPort devServerPort
18
13
19
-
- Find your webpacker_lite.yml and rename it to webpacker.yml
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
+
```
20
81
- Add a section like this under your development env:
21
82
```
22
83
dev_server:
23
84
host: localhost
24
-
port: 8080
25
-
https: false
26
-
# Can be enabled by export WEBPACKER_HMR=TRUE in env
27
-
hot: false
85
+
port: 3035
86
+
hmr: false
28
87
```
29
-
- remove `hot_reloading_host` and `hot_reloading_enabled_by_default`
30
-
- rename `webpack_public_output_dir` to `public_output_path`
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
31
148
32
149
### [8.0.7]
33
150
#### fixed
@@ -333,7 +450,7 @@ No changes.
333
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.
334
451
335
452
- To configure the asset compliation you can either
336
-
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.
337
454
2. Specify the script command you want to run to build your production assets, and remove your assets.rake file.
338
455
339
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.
@@ -344,7 +461,7 @@ Here is the addition to the generated config file:
344
461
```ruby
345
462
# This configures the script to run to build the production assets by webpack. Set this to nil
346
463
# if you don't want react_on_rails building this file for you.
347
-
config.npm_build_production_command = "npm run build:production"
464
+
config.build_production_command = "npm run build:production"
348
465
349
466
# If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
350
467
# with rspec then this controls what npm command is run
@@ -651,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
+40-12
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,26 @@
4
4
5
5
[rails/webpacker](https://github.com/rails/webpacker) just shipped 3.0. This now enables me to ship version 9.0. See [PR #908](https://github.com/shakacode/react_on_rails/pull/908) for more details.
6
6
7
+
# React on Rails v9 beta 12 is based on Webpacker 3.0!
8
+
9
+
* See the updated [Tutorial](https://github.com/shakacode/react_on_rails/blob/rails-webpacker/docs/tutorial.md).
10
+
* I'm grateful for any [PR 908 reviews](https://github.com/shakacode/react_on_rails/pull/908).
11
+
12
+
## Steps to a New App with rails/webpacker v3 plus React on Rails v9.beta:
13
+
1. New Rails app: `rails new my-app --webpack=react`. `cd` into the directory.
3. Run the generator: `rails generate react_on_rails:install`
16
+
4. Start the app: `foreman start -f Procfile.dev`
17
+
5. Visit http://localhost:3000/hello_world
18
+
19
+
Turn on HMR (Hot reloading)
20
+
1. Edit `config/webpacker.yml` and set `hmr: true`
21
+
2. Start the app: `foreman start -f Procfile.dev-server`
22
+
3. Visit http://localhost:3000/hello_world
23
+
4. Edit `app/javascript/bundles/HelloWorld/components/HelloWorld.jsx`, hit save, and see the screen update.
24
+
25
+
---------------
26
+
7
27
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
8
28
9
29
Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
@@ -145,10 +165,18 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
145
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.
146
166
147
167
```ruby
148
-
gem "react_on_rails", "8.0.0"
168
+
gem "react_on_rails", "9.0.0"
169
+
gem "webpacker", "~> 3.0"
149
170
```
150
171
151
-
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`).
152
180
153
181
3. See help for the generator:
154
182
@@ -162,13 +190,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
162
190
rails generate react_on_rails:install
163
191
```
164
192
165
-
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.
166
-
167
-
```bash
168
-
bundle && yarn
169
-
```
170
-
171
-
6. Ensure that you have `foreman` installed: `gem install foreman`.
193
+
5. Ensure that you have `foreman` installed: `gem install foreman`.
172
194
173
195
7. Start your Rails server:
174
196
@@ -238,6 +260,11 @@ cd client && yarn add react-on-rails
238
260
239
261
That will install the latest version and update your package.json.
240
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
+
241
268
## How it Works
242
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.
243
270
@@ -402,12 +429,12 @@ end
402
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.
403
430
404
431
### Globally Exposing Your React Components
405
-
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**.
406
433
407
434
This is how to expose a component to the `react_component` view helper.
@@ -570,7 +597,7 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
570
597
## Deployment
571
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).
572
599
*`config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
573
-
*`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.
574
601
* See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
575
602
576
603
## Integration with Node.js for Server Rendering
@@ -607,6 +634,7 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
607
634
+**Development**
608
635
+[React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
0 commit comments