react_on_rails 11.0.0.beta.1 → 11.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 +12 -0
- data/NEWS.md +2 -0
- data/README.md +62 -113
- data/docs/additional-reading/capistrano-deployment.md +18 -0
- data/docs/additional-reading/troubleshooting-when-using-webpacker.md +90 -0
- data/docs/basics/upgrading-react-on-rails.md +6 -0
- data/lib/generators/react_on_rails/base_generator.rb +1 -1
- data/lib/react_on_rails/assets_precompile.rb +5 -1
- data/lib/react_on_rails/react_on_rails_helper.rb +1 -0
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +29 -11
- data/package.json +1 -1
- data/rakelib/release.rake +1 -1
- metadata +6 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 31c09a3e5f99dd68c101be042157d0df07ce3d28
|
|
4
|
+
data.tar.gz: c1b5a351538f6f66b02fd6b7d9dbc9016f9b7a5a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ed448da2f9649ab1fe01df7e3f9f5391a0ab0a0d00d19588d4d4ec7463d0967ba4680c820175e20dc4c9a083561aa7783c9d0925c0a9013c8e0af49755c23309
|
|
7
|
+
data.tar.gz: c4db1f97a32d563a83e11fd0987160cabe408caa88fef4880d96be89da8ca752a5218a426370cf1834bdbdc36ea537c3d97bd5b98eb70110fd299d2ac9a72072
|
data/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,8 @@ All notable changes to this project's source code will be documented in this fil
|
|
|
3
3
|
|
|
4
4
|
Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
|
|
5
5
|
|
|
6
|
+
See [Upgrading React on Rails](./docs/basics/upgrading-react-on-rails.md) for more concise instructions on upgrading.
|
|
7
|
+
|
|
6
8
|
## [Unreleased]
|
|
7
9
|
Changes since last non-beta release.
|
|
8
10
|
|
|
@@ -19,6 +21,16 @@ Changes since last non-beta release.
|
|
|
19
21
|
- Errors raised are of type ReactOnRailsError, so you can see they came from React on Rails for debugging.
|
|
20
22
|
- Removed ReactOnRails::Utils.server_bundle_file_name and ReactOnRails::Utils.bundle_file_name.
|
|
21
23
|
- No longer logging the `railsContext` when server logging.
|
|
24
|
+
- Rails.env is provided in the default railsContext, as suggested in [issue #697](https://github.com/shakacode/react_on_rails/issues/697).
|
|
25
|
+
[PR 1018](https://github.com/shakacode/react_on_rails/pull/1065) by [justin808](https://github.com/justin808).
|
|
26
|
+
|
|
27
|
+
#### Fixes
|
|
28
|
+
- More exact version checking. We keep the react_on_rails gem and the react-on-rails node package at
|
|
29
|
+
the same exact versions so that we can be sure that the interaction between them is precise.
|
|
30
|
+
This is so that if a bug is detected after some update, it's critical that
|
|
31
|
+
both the gem and the node package get the updates. This change ensures that the package.json specification does not use a
|
|
32
|
+
~ or ^ as reported in [issue #1062](https://github.com/shakacode/react_on_rails/issues/1062). [PR 1063](https://github.com/shakacode/react_on_rails/pull/1063) by [justin808](https://github.com/justin808).
|
|
33
|
+
- Sprockets: Now use the most recent manifest when creating symlinks. See [issue #1023](https://github.com/shakacode/react_on_rails/issues/1023). [PR 1064](https://github.com/shakacode/react_on_rails/pull/1064) by [justin808](https://github.com/justin808).
|
|
22
34
|
|
|
23
35
|
### [10.1.4] - 2018-04-11
|
|
24
36
|
|
data/NEWS.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
*We'll keep a history of the news. A few bullets at the top will also show on the [README.md](./README.md).*
|
|
4
4
|
|
|
5
|
+
* 2018-02-27: **Version 10.1.2** Supports the React API for ReactDOM.hydrate.
|
|
6
|
+
* 2017-09-06: **VERSION 9.0.0 shipped!** This version depends on Webpacker directly. See [Upgrading React on Rails](./docs/basics/upgrading-react-on-rails.md) for more concise instructions on upgrading.
|
|
5
7
|
* Always see the [CHANGELOG.md](./CHANGELOG.md) for the latest project changes.
|
|
6
8
|
* [VERSION 8.1.0](https://rubygems.org/gems/react_on_rails/) shipped with [webpacker_lite](https://github.com/shakacode/webpacker_lite) (soon [**webpacker**](https://github.com/rails/webpacker/issues/464#issuecomment-310986140) support! [react-webpack-rails-tutorial PR #395](https://github.com/shakacode/react-webpack-rails-tutorial/pull/395) shows the changes needed to migrate from the Asset Pipeline to Webpacker Lite. For more information, see my article: [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92). Per recent discussions, we [will merge Webpacker Lite changes back into Webpacker](https://github.com/rails/webpacker/issues/464#issuecomment-310986140). There's no reason to wait for this. The upgrade will eventually be trivial.
|
|
7
9
|
* 2017-04-25: 7.0.0 Shipped! Performance improvements! Please upgrade! Only "breaking" change is that you have to update both the node module and the Ruby gem.
|
data/README.md
CHANGED
|
@@ -2,26 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
*If this projects helps you, please give us a star!*
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
5
|
+
## Need Help with Rails + Webpack + React? Want better performance?
|
|
6
|
+
Aloha, I'm Justin Gordon the creator and maintainer of React on Rails. I offer a [React on Rails Pro Support Plan](http://www.shakacode.com/work/shakacode-pro-support.pdf), and I can help you with:
|
|
7
|
+
* Optimizing your webpack setup for React on Rails.
|
|
8
|
+
* Upgrading from older React on Rails to newer versions.
|
|
9
|
+
* Better performance client and server side.
|
|
10
|
+
* Migrating from Angular to React.
|
|
11
|
+
* Best practices based on 4 years of React on Rails experience.
|
|
12
|
+
* Early access to the React on Rails Pro Gem and Node code, including:
|
|
13
|
+
* ShakaCode's Node.js rendering server for better performance for server rendering (used now at [egghead.io](https://egghead.io/)).
|
|
14
|
+
* Performance helpers, especially for server rendering
|
|
15
|
+
* Webpack configuration examples
|
|
16
|
+
|
|
17
|
+
Please [email me](mailto:justin@shakacode.com) for a free half-hour project consultation, on anything from React on Rails to any aspect of web development.
|
|
15
18
|
|
|
16
19
|
----
|
|
17
20
|
|
|
18
|
-
|
|
21
|
+
## React on Rails is based on Webpacker!
|
|
22
|
+
|
|
23
|
+
Given that Webpacker already provides React integration, why would you use "React on Rails"? Additional features of React on Rails include:
|
|
19
24
|
|
|
20
25
|
1. Server rendering, often for SEO optimization.
|
|
21
26
|
2. 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.
|
|
22
27
|
3. Redux and React-Router integration
|
|
23
28
|
4. Localization support
|
|
24
29
|
5. Rspec test helpers to ensure your Webpack bundles are ready for tests
|
|
30
|
+
6. A supportive community
|
|
25
31
|
|
|
26
32
|
----
|
|
27
33
|
|
|
@@ -32,7 +38,7 @@ First be sure to run `rails -v` and check that you are using Rails 5.1.3 or abov
|
|
|
32
38
|
*See below for steps on an existing Rails app*
|
|
33
39
|
|
|
34
40
|
1. New Rails app: `rails new my-app --webpack=react`. `cd` into the directory.
|
|
35
|
-
2. Add gem version: `gem 'react_on_rails', '
|
|
41
|
+
2. Add gem version: `gem 'react_on_rails', '11.0.0' # Use the exact gem version to match npm version`
|
|
36
42
|
3. `bundle install`
|
|
37
43
|
4. Commit this to git (or else you cannot run the generator unless you pass the option --ignore-warnings).
|
|
38
44
|
5. Run the generator: `rails generate react_on_rails:install`
|
|
@@ -41,8 +47,6 @@ First be sure to run `rails -v` and check that you are using Rails 5.1.3 or abov
|
|
|
41
47
|
|
|
42
48
|
### Turn on server rendering
|
|
43
49
|
|
|
44
|
-
*The rails/wepbacker default setup does not work with hot or live reloading, yet, per [Webpacker issue #842](https://github.com/rails/webpacker/issues/842). If you want the combination of both server rendering and hot reloading during development, you will need to a custom webpack setup as shown [here](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.client.rails.hot.config.js)*
|
|
45
|
-
|
|
46
50
|
1. Edit `app/views/hello_world/index.html.erb` and set `prerender` to `true`.
|
|
47
51
|
2. Refresh the page.
|
|
48
52
|
|
|
@@ -52,43 +56,19 @@ This is the line where you turn server rendering on by setting prerender to true
|
|
|
52
56
|
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
|
|
53
57
|
```
|
|
54
58
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
|
|
59
|
+
-----
|
|
58
60
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
* **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
|
|
62
|
-
* [Front-End Sadness to Happiness: The React on Rails Story at GORUCO 2017](https://blog.shakacode.com/front-end-sadness-to-happiness-the-react-on-rails-story-at-goruco-2017-d63b8fd26ca4)
|
|
63
|
-
|
|
64
|
-
We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
|
|
65
|
-
|
|
66
|
-
* Providing priority support and training for anything related to React + Webpack + Rails in our [Pro Support program](http://www.shakacode.com/work/shakacode-pro-support.pdf).
|
|
67
|
-
* Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.
|
|
68
|
-
* Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).
|
|
69
|
-
* Augmenting your team to get your product completed more efficiently and quickly.
|
|
70
|
-
|
|
71
|
-
My article "[Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9)" provides additional details about our projects.
|
|
72
|
-
|
|
73
|
-
If any of this resonates with you, please email me, [justin@shakacode.com](mailto:justin@shakacode.com). I offer a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products.
|
|
74
|
-
|
|
75
|
-
We are **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com).
|
|
76
|
-
|
|
77
|
-
I appreciate your attention and sharing of these offerings with anybody that we can help. Your support allows me to bring you and your team [front-end happiness in the Rails world](https://www.youtube.com/watch?v=SGkTvKRPYrk).
|
|
78
|
-
|
|
79
|
-
Aloha and best wishes from the ShakaCode team!
|
|
80
|
-
|
|
81
|
-
------
|
|
82
|
-
|
|
83
|
-
# Community
|
|
61
|
+
# Community Resources
|
|
84
62
|
Please [**click to subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
|
|
85
63
|
|
|
86
64
|
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
87
65
|
|
|
88
66
|
* **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room! Let us know if you want to contribute.
|
|
89
67
|
* **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
|
90
|
-
* **[@
|
|
68
|
+
* **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
|
|
91
69
|
* For a live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [www.reactrails.com](http://www.reactrails.com).
|
|
70
|
+
* See [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
|
|
71
|
+
* *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
92
72
|
|
|
93
73
|
------
|
|
94
74
|
|
|
@@ -104,13 +84,14 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
104
84
|
# Articles, Videos, and Podcasts
|
|
105
85
|
|
|
106
86
|
### Articles
|
|
107
|
-
|
|
108
|
-
* [Front-End Sadness to Happiness: The React on Rails Story at GORUCO 2017](https://blog.shakacode.com/front-end-sadness-to-happiness-the-react-on-rails-story-at-goruco-2017-d63b8fd26ca4)
|
|
87
|
+
* [Introducing React on Rails v9 with Webpacker Support](https://blog.shakacode.com/introducing-react-on-rails-v9-with-webpacker-support-f2584c6c8fa4) for an overview of the integration of React on Rails with Webpacker.
|
|
109
88
|
* [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92)
|
|
110
89
|
* [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy)
|
|
111
90
|
* [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
|
91
|
+
* [Simple Tutorial](https://github.com/shakacode/react_on_rails/blob/master/docs/tutorial.md).
|
|
112
92
|
|
|
113
93
|
### Videos
|
|
94
|
+
* [Video of running the v9 installer with Webpacker v3](https://youtu.be/M0WUM_XPaII). History, motivations, philosophy, and overview.
|
|
114
95
|
1. [GORUCO 2017: Front-End Sadness to Happiness: The React on Rails Story by Justin Gordon](https://www.youtube.com/watch?v=SGkTvKRPYrk)
|
|
115
96
|
1. [egghead.io: Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
|
|
116
97
|
1. [egghead.io: Creating a redux component with React on Rails](https://egghead.io/lessons/react-add-redux-state-management-to-a-react-on-rails-project)
|
|
@@ -119,18 +100,6 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
119
100
|
1. [Basic Tutorial Walkthrough](https://youtu.be/_bjScw60FBk)
|
|
120
101
|
1. [Code Walkthrough](https://youtu.be/McQ9UM-_ocQ)
|
|
121
102
|
|
|
122
|
-
### Podcasts
|
|
123
|
-
* [284 Ruby Rogues: React on Rails with Justin Gordon and Rob Wise](https://devchat.tv/ruby-rogues/284-rr-react-on-rails-with-justin-gordon-and-rob-wise)
|
|
124
|
-
|
|
125
|
-
------
|
|
126
|
-
|
|
127
|
-
# NEWS
|
|
128
|
-
* 2018-02-27: **Version 10.1.2** Supports the React API for ReactDOM.hydrate.
|
|
129
|
-
* 2017-09-06: **VERSION 9.0.0 shipped!** This version depends on Webpacker directly. See the [CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md) for migration instructions.
|
|
130
|
-
* The Docs here on `master` refer to 9.x including support for [rails/webpacker](https://github.com/rails/webpacker).
|
|
131
|
-
*Use the [7.0.4 docs](https://github.com/shakacode/react_on_rails/tree/7.0.4) to refer to the older asset pipeline way.*
|
|
132
|
-
* *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
133
|
-
|
|
134
103
|
------
|
|
135
104
|
|
|
136
105
|
# React on Rails
|
|
@@ -139,6 +108,8 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
139
108
|
|
|
140
109
|
React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x and greater is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-router) are supported as well, also with server rendering, using **execJS**.
|
|
141
110
|
|
|
111
|
+
The ability to use a standalone Node Rendering server for better performance and tooling is supported for React on Rails Pro. Contact [justin@shakacode.com](mailto:justin@shakacode.com) for more information.
|
|
112
|
+
|
|
142
113
|
## Table of Contents
|
|
143
114
|
|
|
144
115
|
+ [Features](#features)
|
|
@@ -214,25 +185,22 @@ Version 9 made this the default for generated apps for 2 reasons:
|
|
|
214
185
|
1. It's less code to generate and thus less to explain.
|
|
215
186
|
2. `rails/webpacker` might be viewed as a convention in the Rails community.
|
|
216
187
|
|
|
217
|
-
The *advantage* of this is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization. The *big disadvantage* to this is that you will need to learn the ins and outs of the [rails/webpacker way to customize Webpack](
|
|
188
|
+
The *advantage* of this is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization. The *big disadvantage* to this is that you will need to learn the ins and outs of the [rails/webpacker way to customize Webpack](https://github.com/rails/webpacker/blob/master/docs/webpack.md) which differs from the plain [Webpack way](https://webpack.js.org/).
|
|
218
189
|
|
|
219
190
|
Overall, consider carefully if you prefer the `rails/webpacker` directory structure and Webpack configuration, over the placement of all client side files within the `/client` directory along with conventional Webpack configuration.
|
|
220
191
|
|
|
221
192
|
See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.
|
|
222
193
|
|
|
223
|
-
## Upgrade
|
|
224
|
-
|
|
225
|
-
To upgrade existing apps to React on Rails 8 see the [Installation Overview](docs/basics/installation-overview.md)
|
|
226
194
|
|
|
227
195
|
## Getting Started with an existing Rails app
|
|
228
196
|
|
|
229
197
|
**For more detailed instructions on a fresh Rails app**, see the [React on Rails Basic Tutorial](docs/tutorial.md).
|
|
230
198
|
|
|
231
|
-
**If you have rails-5 API only project**,
|
|
199
|
+
**If you have rails-5 API only project**, first [convert the rails-5 API only app to rails app](#convert-rails-5-api-only-app-to-rails-app) before [getting started](#getting-started-with-an-existing-rails-app).
|
|
232
200
|
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.
|
|
233
201
|
|
|
234
202
|
```ruby
|
|
235
|
-
gem "react_on_rails", "
|
|
203
|
+
gem "react_on_rails", "11.0.0"
|
|
236
204
|
gem "webpacker", "~> 3.0"
|
|
237
205
|
```
|
|
238
206
|
|
|
@@ -343,16 +311,15 @@ Rails will start creating the app and will skip the files you have already creat
|
|
|
343
311
|
All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command (assuming you are in the directory where you have your `node_modules`):
|
|
344
312
|
|
|
345
313
|
```bash
|
|
346
|
-
yarn add react-on-rails
|
|
314
|
+
yarn add react-on-rails --exact
|
|
347
315
|
```
|
|
348
316
|
|
|
349
|
-
That will install the latest version and update your package.json.
|
|
317
|
+
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.
|
|
350
318
|
|
|
351
319
|
### Webpacker Configuration
|
|
352
320
|
|
|
353
321
|
React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
|
|
354
322
|
|
|
355
|
-
|
|
356
323
|
## How it Works
|
|
357
324
|
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.
|
|
358
325
|
|
|
@@ -363,21 +330,18 @@ In most cases, you should use the `prerender: false` (default behavior) with the
|
|
|
363
330
|
|
|
364
331
|
Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you (once we complete [#501](https://github.com/shakacode/react_on_rails/issues/501)).
|
|
365
332
|
|
|
366
|
-
|
|
333
|
+
If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
|
|
367
334
|
|
|
368
|
-
1. A
|
|
369
|
-
2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component
|
|
335
|
+
1. A script tag containing the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads, using this data to build and initialize your React components.
|
|
336
|
+
2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component.
|
|
370
337
|
3. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server side logs can be configured only to be sent to the server logs.
|
|
371
338
|
|
|
372
339
|
**Note**:
|
|
373
340
|
|
|
374
341
|
* If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
|
|
375
|
-
* The below image is not yet updated for version 7.0.0 which uses a `<script>` tag for the props. Instead of a hidden div, we have the props inside of the `<script>` tag.
|
|
376
|
-
|
|
377
|
-
|
|
378
342
|
|
|
379
343
|
### Building the Bundles
|
|
380
|
-
Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included Foreman `Procfile.dev` will take care of this for you by
|
|
344
|
+
Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included Foreman `Procfile.dev` will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Simply run `foreman start -f Procfile.dev`.
|
|
381
345
|
|
|
382
346
|
On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You can see the source code for what gets added to your precompilation [here](https://github.com/shakacode/react_on_rails/tree/master/lib/tasks/assets.rake). For more information on this topic, see [the doc on Heroku deployment](./docs/additional-reading/heroku-deployment.md#more-details-on-precompilation-using-webpack-to-create-javascript-assets).
|
|
383
347
|
|
|
@@ -385,21 +349,19 @@ If you have used the provided generator, these bundles will automatically be add
|
|
|
385
349
|
|
|
386
350
|
|
|
387
351
|
### Generator Functions
|
|
388
|
-
|
|
352
|
+
You have 2 ways to specify your React components. You can either register the React component directly, or you can create a function that returns a React component. Creating a function has the following benefits:
|
|
389
353
|
|
|
390
|
-
1. You
|
|
391
|
-
1. You
|
|
392
|
-
1. You
|
|
354
|
+
1. You have access to the `railsContext`. See documentation for the railsContext in terms of why you might need it. You **need** a generator function to access the `railsContext`.
|
|
355
|
+
1. You can use the passed-in props to initialize a redux store or set up react-router.
|
|
356
|
+
1. You can return different components depending on what's in the props.
|
|
393
357
|
|
|
394
358
|
ReactOnRails will automatically detect a registered generator function. Thus, there is no difference between registering a React Component versus a "generator function."
|
|
395
359
|
|
|
396
|
-
Another reason to use a generator function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }.
|
|
360
|
+
Another reason to use a generator function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }. Make sure you use this function with `react_component_hash`.
|
|
397
361
|
|
|
398
362
|
For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
|
|
399
363
|
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
400
364
|
|
|
401
|
-
Note: The functionality in the above paragraph requires the use of our new `react_component_hash` method. Said functionality in our `react_component` method is now deprecated.
|
|
402
|
-
|
|
403
365
|
### Rails Context and Generator Functions
|
|
404
366
|
When you use a "generator function" to create react components (or renderedHtml on the server), or you used shared redux stores, you get two params passed to your function that creates a React component:
|
|
405
367
|
|
|
@@ -446,6 +408,7 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](h
|
|
|
446
408
|
|
|
447
409
|
```ruby
|
|
448
410
|
{
|
|
411
|
+
railsEnv: Rails.env
|
|
449
412
|
# URL settings
|
|
450
413
|
href: request.original_url,
|
|
451
414
|
location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
|
|
@@ -483,6 +446,9 @@ Consider this line in depth:
|
|
|
483
446
|
The outer `{...` is for the [JSX spread operator for attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) and the innner `{...` is for the [Spread in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals).
|
|
484
447
|
|
|
485
448
|
#### Use Cases
|
|
449
|
+
##### Heroku Preboot Considerations
|
|
450
|
+
[Heroku Preboot](https://devcenter.heroku.com/articles/preboot) is a feature on Heroku that allows for faster deploy times. When you promote your staging app to production, Preboot simply switches the production server to point at the staging app's container. This means it can deploy much faster since it doesn't have to rebuild anything. However, this means that if you use the [Define Plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to provide the rails environment to your client code as a variable, that variable will erroneously still have a value of `Staging` instead of `Production`. The `Rails.env` provided at runtime in the railsContext is, however, accurate.
|
|
451
|
+
|
|
486
452
|
##### Needing the current URL path for server rendering
|
|
487
453
|
Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server-render the code, your code will need to know the current URL/path. The new `railsContext` has this information. Your application will apply something like an "active" class on the server rendering.
|
|
488
454
|
|
|
@@ -532,7 +498,7 @@ This is how to expose a component to the `react_component` view helper.
|
|
|
532
498
|
|
|
533
499
|
#### Different Server-Side Rendering Code (and a Server Specific Bundle)
|
|
534
500
|
|
|
535
|
-
You may want different initialization for your server-rendered components. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. However, the `railsContext` will tell you if your JavaScript code is running client side or server side. So code that required a different server bundle previously may no longer require this
|
|
501
|
+
You may want different initialization for your server-rendered components. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. However, the `railsContext` will tell you if your JavaScript code is running client side or server side. So code that required a different server bundle previously may no longer require this. Note, check if `window` is defined has a similar effect.
|
|
536
502
|
|
|
537
503
|
If you want different code to run, you'd set up a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note: you might be initializing HelloWorld with version specialized for server rendering.
|
|
538
504
|
|
|
@@ -681,16 +647,16 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
|
|
|
681
647
|
[React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
|
|
682
648
|
|
|
683
649
|
1. [React on Rails docs for react-router](./docs/additional-reading/react-router.md)
|
|
684
|
-
1. Examples in [spec/dummy/app/views/react_router](
|
|
650
|
+
1. Examples in [spec/dummy/app/views/react_router](./spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx).
|
|
685
651
|
1. [Code Splitting docs](./docs/additional-reading/code-splitting.md) for information about how to set up code splitting for server rendered routes.
|
|
686
652
|
|
|
687
653
|
## Caching and Performance
|
|
688
654
|
Consider fragment and http caching of pages that contain React on Rails components. See [Caching and Performance](./docs/additional-reading/caching-and-performance.md) for more details.
|
|
689
655
|
|
|
690
656
|
## Deployment
|
|
691
|
-
* React on Rails 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](
|
|
692
|
-
* `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
|
|
657
|
+
* React on Rails 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](./docs/additional-reading/rspec_configuration.md).
|
|
693
658
|
* `build_production_command`: Set to nil to turn off the precompilation of the js assets.
|
|
659
|
+
* `config.symlink_non_digested_assets_regex`: Default is nil, turning off the setup of non-js assets. This should be nil except when when using Sprockets rather than Webpacker.
|
|
694
660
|
* See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
|
|
695
661
|
|
|
696
662
|
## Integration with Node.js for Server Rendering
|
|
@@ -698,7 +664,7 @@ Consider fragment and http caching of pages that contain React on Rails componen
|
|
|
698
664
|
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.
|
|
699
665
|
|
|
700
666
|
## Additional Documentation
|
|
701
|
-
**Try out our
|
|
667
|
+
**Try out our [Documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) for improved readability & reference.**
|
|
702
668
|
|
|
703
669
|
+ **Rails**
|
|
704
670
|
+ [Rails Assets](./docs/additional-reading/rails-assets.md)
|
|
@@ -739,12 +705,8 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
|
|
|
739
705
|
+ [Ruby API](./docs/api/ruby-api.md)
|
|
740
706
|
+ [Setting up Hot Reloading during Rails Development, API docs](./docs/api/ruby-api-hot-reload-view-helpers.md)
|
|
741
707
|
|
|
742
|
-
+ **[CONTRIBUTING](CONTRIBUTING.md)**
|
|
743
|
-
+ [Generator Testing](./docs/contributor-info/generator-testing.md)
|
|
744
|
-
+ [Linting](./docs/contributor-info/linters.md)
|
|
745
|
-
+ [Releasing](./docs/contributor-info/releasing.md)
|
|
746
|
-
|
|
747
708
|
+ **Misc**
|
|
709
|
+
+ [Upgrading](./docs/basics/upgrading-react-on-rails.md)
|
|
748
710
|
+ [Tips](./docs/additional-reading/tips.md)
|
|
749
711
|
+ [Changelog](./CHANGELOG.md)
|
|
750
712
|
+ [Projects](./PROJECTS.md)
|
|
@@ -753,6 +715,10 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
|
|
|
753
715
|
+ [Code of Conduct](./docs/misc/code_of_conduct.md)
|
|
754
716
|
+ [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
|
755
717
|
+ [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy)
|
|
718
|
+
+ [Generator Testing](./docs/contributor-info/generator-testing.md)
|
|
719
|
+
+ [Linting](./docs/contributor-info/linters.md)
|
|
720
|
+
+ [Releasing](./docs/contributor-info/releasing.md)
|
|
721
|
+
+ **[CONTRIBUTING](CONTRIBUTING.md)**
|
|
756
722
|
|
|
757
723
|
## Demos
|
|
758
724
|
+ [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
|
|
@@ -765,14 +731,13 @@ If you want to use a node server for server rendering, [get in touch](mailto:jus
|
|
|
765
731
|
|
|
766
732
|
## Dependencies
|
|
767
733
|
+ Ruby 2.1 or greater
|
|
768
|
-
+ Rails
|
|
769
|
-
+ Rails 3.2 will work and is tested up to 6.8.x. We are not testing it for new releases. If you find an issue, you will have to submit a PR to get it fixed.
|
|
734
|
+
+ Rails 3.2 or greater
|
|
770
735
|
+ Node 5.5 or greater
|
|
771
736
|
|
|
772
737
|
## Contributing
|
|
773
|
-
Bug reports and pull requests are welcome. This project is intended to be a
|
|
738
|
+
Bug reports and pull requests are welcome. This project is intended to be a welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant Code of Conduct](docs/misc/code_of_conduct.md)).
|
|
774
739
|
|
|
775
|
-
See [Contributing](CONTRIBUTING.md) to get started.
|
|
740
|
+
See [Contributing](CONTRIBUTING.md) to get started. See [contribution help wanted](https://github.com/shakacode/react_on_rails/labels/contributions%3A%20up%20for%20grabs%21).
|
|
776
741
|
|
|
777
742
|
## License
|
|
778
743
|
The gem is available as open source under the terms of the [MIT License](./docs/LICENSE.md).
|
|
@@ -780,11 +745,11 @@ The gem is available as open source under the terms of the [MIT License](./docs/
|
|
|
780
745
|
## Authors
|
|
781
746
|
[The Shaka Code team!](http://www.shakacode.com/about/)
|
|
782
747
|
|
|
783
|
-
The origins of the project began with the need to do a rich JavaScript interface for ShakaCode's client
|
|
748
|
+
The origins of the project began with the need to do a rich JavaScript interface for a ShakaCode's client. The choice to use Webpack and Rails is described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).
|
|
784
749
|
|
|
785
750
|
The gem project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators. Many others have [contributed](https://github.com/shakacode/react_on_rails/graphs/contributors).
|
|
786
751
|
|
|
787
|
-
|
|
752
|
+
The gem was initially inspired by the [react-rails gem](https://github.com/reactjs/react-rails).
|
|
788
753
|
|
|
789
754
|
# Thanks!
|
|
790
755
|
The following companies support open source, and ShakaCode uses their products!
|
|
@@ -794,24 +759,12 @@ The following companies support open source, and ShakaCode uses their products!
|
|
|
794
759
|
|
|
795
760
|
*If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
|
|
796
761
|
|
|
797
|
-
# FINAL NOTES
|
|
798
|
-
* See [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
|
|
799
|
-
* Follow [@railsonmaui](https://twitter.com/railsonmaui) and [@shakacode](https://twitter.com/shakacode) on Twitter for updates on releases. We've also got a forum category dedicated to [react_on_rails](https://forum.shakacode.com/c/rails/reactonrails).
|
|
800
|
-
* Please [Subscribe](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
|
|
801
|
-
|
|
802
|
-
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
803
|
-
|
|
804
762
|
---
|
|
805
763
|
|
|
806
|
-
*Identical to top of page*
|
|
807
|
-
|
|
808
764
|
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
|
|
809
765
|
|
|
810
766
|
Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
|
|
811
767
|
|
|
812
|
-
* **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
|
|
813
|
-
* *[Click here for talk slides](http://www.shakacode.com/talks).*
|
|
814
|
-
|
|
815
768
|
We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
|
|
816
769
|
|
|
817
770
|
* Providing priority support and training for anything related to React + Webpack + Rails in our [Pro Support program](http://www.shakacode.com/work/shakacode-pro-support.pdf).
|
|
@@ -825,8 +778,4 @@ If any of this resonates with you, please email me, [justin@shakacode.com](mailt
|
|
|
825
778
|
|
|
826
779
|
We are **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com).
|
|
827
780
|
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
Aloha and best wishes from the ShakaCode team!
|
|
831
|
-
|
|
832
|
-
------
|
|
781
|
+
Aloha and best wishes from Justin and the ShakaCode team!
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# Capistrano Deployment
|
|
2
|
+
Make sure ReactOnRails is working in development environment.
|
|
3
|
+
|
|
4
|
+
Add the following to development your Gemfile and bundle install.
|
|
5
|
+
``` ruby
|
|
6
|
+
group :development do
|
|
7
|
+
gem 'capistrano-yarn'
|
|
8
|
+
end
|
|
9
|
+
```
|
|
10
|
+
Then run Bundler to ensure Capistrano is downloaded and installed.
|
|
11
|
+
``` sh
|
|
12
|
+
$ bundle install
|
|
13
|
+
```
|
|
14
|
+
Add the following in your Capfile.
|
|
15
|
+
``` ruby
|
|
16
|
+
require 'capistrano/yarn'
|
|
17
|
+
```
|
|
18
|
+
If the deployment is taking too long or getting stuck at assets:precompile stage, it probably is because of memory. Webpack consumes a lot of memory so if possible, try increasing the RAM of your server.
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
## Context
|
|
2
|
+
|
|
3
|
+
Rails: 5.0.2
|
|
4
|
+
react_on_rails: upgraded from 6.6.0 to 9.0.3
|
|
5
|
+
|
|
6
|
+
## The failure
|
|
7
|
+
|
|
8
|
+
Rspec failing with
|
|
9
|
+
```
|
|
10
|
+
Failure/Error: raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
|
|
11
|
+
|
|
12
|
+
Webpacker::Manifest::MissingEntryError:
|
|
13
|
+
Webpacker can't find webpack-bundle.js in /home/user/ws/pp/code/pp-core-checkout_spa_update_npm/public/webpack-test/manifest.json. Possible causes:
|
|
14
|
+
1. You want to set webpacker.yml value of compile to true for your environment
|
|
15
|
+
unless you are using the `webpack -w` or the webpack-dev-server.
|
|
16
|
+
2. Webpack has not yet re-run to reflect updates.
|
|
17
|
+
3. You have misconfigured Webpacker's config/webpacker.yml file.
|
|
18
|
+
4. Your Webpack configuration is not creating a manifest.
|
|
19
|
+
Your manifest contains:
|
|
20
|
+
{
|
|
21
|
+
"main.css": "/webpack-test/main-bundle.css",
|
|
22
|
+
"main.js": "/webpack-test/main-dde0e05a2817931424c3.js"
|
|
23
|
+
}
|
|
24
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:44:in `handle_missing_entry'
|
|
25
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:40:in `find'
|
|
26
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:27:in `lookup'
|
|
27
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/utils.rb:145:in `bundle_js_file_path_from_webpacker'
|
|
28
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/utils.rb:90:in `bundle_js_file_path'
|
|
29
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:56:in `block in all_compiled_assets'
|
|
30
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:55:in `map'
|
|
31
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:55:in `all_compiled_assets'
|
|
32
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:35:in `stale_generated_webpack_files'
|
|
33
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/ensure_assets_compiled.rb:34:in `call'
|
|
34
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper.rb:85:in `ensure_assets_compiled'
|
|
35
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper.rb:39:in `block (2 levels) in configure_rspec_to_compile_assets'
|
|
36
|
+
# /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rspec-core-3.5.4/lib/rspec/core/example.rb:443:in `instance_exec'
|
|
37
|
+
...
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
At the same time dev/prod environments works fine (with extra webpack calling step outside rails).
|
|
41
|
+
|
|
42
|
+
## Configs
|
|
43
|
+
|
|
44
|
+
### webpack.config.js
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
...
|
|
48
|
+
const ManifestPlugin = require('webpack-manifest-plugin');
|
|
49
|
+
...
|
|
50
|
+
const { output } = webpackConfigLoader(configPath);
|
|
51
|
+
...
|
|
52
|
+
output: {
|
|
53
|
+
filename: '[name]-[hash].js',
|
|
54
|
+
|
|
55
|
+
// Leading and trailing slashes ARE necessary.
|
|
56
|
+
publicPath: output.publicPath,
|
|
57
|
+
path: output.path,
|
|
58
|
+
},
|
|
59
|
+
...
|
|
60
|
+
plugins: [
|
|
61
|
+
...
|
|
62
|
+
new ManifestPlugin({
|
|
63
|
+
publicPath: output.publicPath,
|
|
64
|
+
writeToFileEmit: true
|
|
65
|
+
}),
|
|
66
|
+
...
|
|
67
|
+
]
|
|
68
|
+
...
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### config/webpacker.yml
|
|
72
|
+
|
|
73
|
+
is default from sample appliction v9.x
|
|
74
|
+
|
|
75
|
+
### config/initializers/react_on_rails.rb
|
|
76
|
+
|
|
77
|
+
```ruby
|
|
78
|
+
...
|
|
79
|
+
# Define the files we need to check for webpack compilation when running tests.
|
|
80
|
+
config.webpack_generated_files = %w( webpack-bundle.js main-bundle.css )
|
|
81
|
+
...
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## The problem
|
|
85
|
+
|
|
86
|
+
When `ReactOnRails.configuration.webpack_generated_files` is specified, it prevents usage of `manifest.json`
|
|
87
|
+
|
|
88
|
+
## Solution
|
|
89
|
+
|
|
90
|
+
Removing of `config.webpack_generated_files` from `config/initializers/react_on_rails.rb` resolving issue.
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Upgrading React on Rails
|
|
2
2
|
|
|
3
|
+
## Upgrading to version 11
|
|
4
|
+
* Remove `server_render_method` from config/initializers/react_on_rails.rb. Alternate server rendering methods are part of React on Rails Pro. If you want to use a custom renderer, contact justin@shakacode.com. We have a custom node rendering solution in production for egghead.io.
|
|
5
|
+
* Remove your usage of ENV["TRACE_REACT_ON_RAILS"] usage. You can get all tracing with either specifying trace at your component or in your config/initializers/react_on_rails.rb file.
|
|
6
|
+
* ReactOnRails::Utils.server_bundle_file_name and ReactOnRails::Utils.bundle_file_name were removed. React on Rails Pro contains upgrades to enable component and other types caching with React on Rails.
|
|
7
|
+
|
|
8
|
+
|
|
3
9
|
## Upgrading to version 10
|
|
4
10
|
|
|
5
11
|
Pretty simple:
|
|
@@ -72,7 +72,7 @@ module ReactOnRails
|
|
|
72
72
|
"or manifest.yml at #{@assets_path}, but found none. Canceling symlinking tasks."
|
|
73
73
|
return -1
|
|
74
74
|
end
|
|
75
|
-
manifest_path = manifest_glob
|
|
75
|
+
manifest_path = take_most_recent_manifest_path(manifest_glob)
|
|
76
76
|
manifest_file = File.new(manifest_path)
|
|
77
77
|
manifest_data = if File.extname(manifest_file) == ".json"
|
|
78
78
|
manifest_file_data = File.read(manifest_path)
|
|
@@ -128,6 +128,10 @@ module ReactOnRails
|
|
|
128
128
|
|
|
129
129
|
private
|
|
130
130
|
|
|
131
|
+
def take_most_recent_manifest_path(manifest_glob)
|
|
132
|
+
manifest_glob.max_by { |name| File.mtime(name) }
|
|
133
|
+
end
|
|
134
|
+
|
|
131
135
|
def symlink_and_points_to_existing_file?(symlink_path)
|
|
132
136
|
# File.exist?(symlink_path) will check the file the sym is pointing to is existing
|
|
133
137
|
# File.lstat(symlink_path).symlink? confirms that this is a symlink
|
|
@@ -22,23 +22,37 @@ module ReactOnRails
|
|
|
22
22
|
return if node_package_version.relative_path?
|
|
23
23
|
node_major_minor_patch = node_package_version.major_minor_patch
|
|
24
24
|
gem_major_minor_patch = gem_major_minor_patch_version
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
versions_match = node_major_minor_patch[0] == gem_major_minor_patch[0] &&
|
|
26
|
+
node_major_minor_patch[1] == gem_major_minor_patch[1] &&
|
|
27
|
+
node_major_minor_patch[2] == gem_major_minor_patch[2]
|
|
28
28
|
|
|
29
|
-
raise_differing_versions_warning
|
|
29
|
+
raise_differing_versions_warning unless versions_match
|
|
30
|
+
|
|
31
|
+
raise_node_semver_version_warning if node_package_version.semver_wildcard?
|
|
30
32
|
end
|
|
31
33
|
|
|
32
34
|
private
|
|
33
35
|
|
|
36
|
+
def common_error_msg
|
|
37
|
+
<<-MSG.strip_heredoc
|
|
38
|
+
Detected: #{node_package_version.raw}
|
|
39
|
+
gem: #{gem_version}
|
|
40
|
+
Ensure the installed version of the gem is the same as the version of
|
|
41
|
+
your installed node package. Do not use >= or ~> in your Gemfile for react_on_rails.
|
|
42
|
+
Do not use ^ or ~ in your package.json for react-on-rails.
|
|
43
|
+
Run `yarn add react-on-rails --exact` in the directory containing folder node_modules.
|
|
44
|
+
MSG
|
|
45
|
+
end
|
|
46
|
+
|
|
34
47
|
def raise_differing_versions_warning
|
|
35
|
-
msg = "**ERROR** ReactOnRails: ReactOnRails gem and node package versions do not match\n"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
48
|
+
msg = "**ERROR** ReactOnRails: ReactOnRails gem and node package versions do not match\n#{common_error_msg}"
|
|
49
|
+
raise ReactOnRails::Error, msg
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
def raise_node_semver_version_warning
|
|
53
|
+
msg = "**ERROR** ReactOnRails: Your node package version for react-on-rails contains a "\
|
|
54
|
+
"^ or ~\n#{common_error_msg}"
|
|
55
|
+
raise ReactOnRails::Error, msg
|
|
42
56
|
end
|
|
43
57
|
|
|
44
58
|
def gem_version
|
|
@@ -75,6 +89,10 @@ module ReactOnRails
|
|
|
75
89
|
end
|
|
76
90
|
end
|
|
77
91
|
|
|
92
|
+
def semver_wildcard?
|
|
93
|
+
raw.match(/[~^]/).present?
|
|
94
|
+
end
|
|
95
|
+
|
|
78
96
|
def relative_path?
|
|
79
97
|
raw.match(%r{(\.\.|\Afile:///)}).present?
|
|
80
98
|
end
|
data/package.json
CHANGED
data/rakelib/release.rake
CHANGED
|
@@ -70,7 +70,7 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
|
|
|
70
70
|
sh_in_dir(gem_root, "gem release")
|
|
71
71
|
|
|
72
72
|
# Update master with new npm version
|
|
73
|
-
sh_in_dir(File.join(gem_root, "spec", "dummy", "client"), "yarn add react-on-rails@#{npm_version}")
|
|
73
|
+
sh_in_dir(File.join(gem_root, "spec", "dummy", "client"), "yarn add react-on-rails@#{npm_version} --exact")
|
|
74
74
|
sh_in_dir(gem_root, "git commit -am 'Updated spec/dummy/client/package.json latest version'")
|
|
75
75
|
sh_in_dir(gem_root, "git push")
|
|
76
76
|
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: react_on_rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 11.0.0
|
|
4
|
+
version: 11.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Justin Gordon
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-04-
|
|
11
|
+
date: 2018-04-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: addressable
|
|
@@ -355,6 +355,7 @@ files:
|
|
|
355
355
|
- docs/additional-reading/asset-pipeline.md
|
|
356
356
|
- docs/additional-reading/babel.md
|
|
357
357
|
- docs/additional-reading/caching-and-performance.md
|
|
358
|
+
- docs/additional-reading/capistrano-deployment.md
|
|
358
359
|
- docs/additional-reading/code-splitting.md
|
|
359
360
|
- docs/additional-reading/elastic-beanstalk.md
|
|
360
361
|
- docs/additional-reading/foreman-issues.md
|
|
@@ -374,6 +375,7 @@ files:
|
|
|
374
375
|
- docs/additional-reading/rspec-configuration.md
|
|
375
376
|
- docs/additional-reading/server-rendering-tips.md
|
|
376
377
|
- docs/additional-reading/tips.md
|
|
378
|
+
- docs/additional-reading/troubleshooting-when-using-webpacker.md
|
|
377
379
|
- docs/additional-reading/turbolinks.md
|
|
378
380
|
- docs/additional-reading/updating-dependencies.md
|
|
379
381
|
- docs/additional-reading/webpack-dev-server.md
|
|
@@ -490,9 +492,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
490
492
|
version: 2.1.0
|
|
491
493
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
492
494
|
requirements:
|
|
493
|
-
- - "
|
|
495
|
+
- - ">="
|
|
494
496
|
- !ruby/object:Gem::Version
|
|
495
|
-
version:
|
|
497
|
+
version: '0'
|
|
496
498
|
requirements: []
|
|
497
499
|
rubyforge_project:
|
|
498
500
|
rubygems_version: 2.6.14
|