react_on_rails 6.5.0.beta.1 → 6.5.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 +19 -2
- data/CONTRIBUTING.md +14 -2
- data/PROJECTS.md +3 -9
- data/README.md +29 -12
- data/docs/additional-reading/code-splitting.md +6 -6
- data/docs/additional-reading/heroku-deployment.md +0 -2
- data/docs/additional-reading/hot-reloading-rails-development.md +12 -12
- data/docs/additional-reading/node-server-rendering.md +69 -48
- data/docs/additional-reading/rspec-configuration.md +1 -1
- data/lib/generators/react_on_rails/install_generator.rb +2 -2
- data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -1
- data/lib/generators/react_on_rails/templates/node/base/client/node/server.js +39 -37
- data/lib/react_on_rails/utils.rb +4 -0
- data/lib/react_on_rails/version.rb +1 -1
- data/package.json +1 -1
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e72d8d450abc3b2aa072d0dd347910a0b44f6b77
|
4
|
+
data.tar.gz: 1cde3eeb6aef6b151a1b3cfdc1a42c1361bf4575
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6107837818ab9652f7f7ec15b4ca8a4d7ccb5f3361b00d9b706e168122db2410c6a252f43298ec0aed7d21981983f33365df0153800257e1aa3314aa541a7ed1
|
7
|
+
data.tar.gz: a261cd0ed7f4c5898270dd7d79605991ab198a85133d18e317a6ab35cdb95e195d5acf85bdb6f37deb1fa3d4ef329c918ced27cc53e0cdcf25dd35b701979bce
|
data/CHANGELOG.md
CHANGED
@@ -6,10 +6,24 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
|
|
6
6
|
## [Unreleased]
|
7
7
|
*Please add entries here for your pull requests.*
|
8
8
|
|
9
|
+
## [6.5.0] - 2017-01-31
|
10
|
+
### Added
|
11
|
+
- Allow generator function to return Object with property `renderedHtml` (already could return Object with props `redirectLocation, error`) rather than a React component or a function that returns a React component. One reason to use a generator function is that sometimes in server rendering, specifically with React Router v4, you need to return the result of calling ReactDOMServer.renderToString(element). [#689](https://github.com/shakacode/react_on_rails/issues/689) by [justin808](https://github.com/justin808).
|
12
|
+
|
13
|
+
### Fixed
|
14
|
+
- Fix incorrect "this" references of Node.js SSR [#690](https://github.com/shakacode/react_on_rails/issues/689) by [nostophilia](https://github.com/nostophilia).
|
15
|
+
|
16
|
+
## [6.4.2] - 2017-01-17
|
17
|
+
### Fixed
|
18
|
+
- Added OS detection for install generator, system call for Windows and unit-tests for it. [#666](https://github.com/shakacode/react_on_rails/pull/666) by [GeorgeGorbanev](https://github.com/GeorgeGorbanev).
|
19
|
+
|
20
|
+
## [6.4.1] - 2017-1-17
|
21
|
+
No changes.
|
22
|
+
|
9
23
|
## [6.4.0] - 2017-1-12
|
10
24
|
|
11
25
|
### Possible Breaking Change
|
12
|
-
- Since foreman is no longer a dependency of the React on Rails gem, please run `gem install foreman`. If you are using rvm, you may wish to run `rvm @global do gem install foreman` to install foreman for all your gemsets.
|
26
|
+
- Since foreman is no longer a dependency of the React on Rails gem, please run `gem install foreman`. If you are using rvm, you may wish to run `rvm @global do gem install foreman` to install foreman for all your gemsets.
|
13
27
|
|
14
28
|
### Fixed
|
15
29
|
- Removed foreman as a dependency. [#678](https://github.com/shakacode/react_on_rails/pull/678) by [x2es](https://github.com/x2es).
|
@@ -428,7 +442,10 @@ Best done with Object destructing:
|
|
428
442
|
##### Fixed
|
429
443
|
- Fix several generator related issues.
|
430
444
|
|
431
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.
|
445
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.5.0...master
|
446
|
+
[6.5.0]: https://github.com/shakacode/react_on_rails/compare/6.4.2...6.5.0
|
447
|
+
[6.4.2]: https://github.com/shakacode/react_on_rails/compare/6.4.1...6.4.2
|
448
|
+
[6.4.1]: https://github.com/shakacode/react_on_rails/compare/6.4.0...6.4.1
|
432
449
|
[6.4.0]: https://github.com/shakacode/react_on_rails/compare/6.3.5...6.4.0
|
433
450
|
[6.3.5]: https://github.com/shakacode/react_on_rails/compare/6.3.4...6.3.5
|
434
451
|
[6.3.4]: https://github.com/shakacode/react_on_rails/compare/6.3.3...6.3.4
|
data/CONTRIBUTING.md
CHANGED
@@ -29,6 +29,18 @@ From [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/
|
|
29
29
|
1. Use the body to explain what and why vs. how
|
30
30
|
|
31
31
|
|
32
|
+
## Doc Changes
|
33
|
+
|
34
|
+
When making doc changes, we want the change to work on both the gitbook and the regular github site. The issue is that non-doc files will not go to the gitbook site, so doc references to non doc files must use the github URL.
|
35
|
+
|
36
|
+
### Links to other docs:
|
37
|
+
* When making references to doc files, use a relative URL path like:
|
38
|
+
`[Installation Overview](docs/basics/installation-overview.md)`
|
39
|
+
|
40
|
+
* When making references to source code files, use a full url path like:
|
41
|
+
`[spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb)`
|
42
|
+
|
43
|
+
|
32
44
|
## To run tests:
|
33
45
|
* After updating code via git, to prepare all examples and run all tests:
|
34
46
|
|
@@ -86,7 +98,7 @@ npm install --save "react-on-rails@../../react_on_rails"
|
|
86
98
|
|
87
99
|
When you use a relative path, be sure to run the above `npm install` command whenever you change the node package for react-on-rails.
|
88
100
|
|
89
|
-
|
101
|
+
While we'd prefer to use `npm link`, we get errors. If you can figure out how to get `npm link react-on-rails` to work with this project, please file an issue or PR! This used to work with babel 5.
|
90
102
|
|
91
103
|
This is the error:
|
92
104
|
|
@@ -162,7 +174,7 @@ spec/dummy.
|
|
162
174
|
# Optionally change default selenium_firefox driver
|
163
175
|
export DRIVER=poltergeist
|
164
176
|
cd <top level>
|
165
|
-
npm dummy:spec
|
177
|
+
npm run dummy:spec
|
166
178
|
```
|
167
179
|
|
168
180
|
### Run NPM JS tests
|
data/PROJECTS.md
CHANGED
@@ -4,11 +4,13 @@
|
|
4
4
|
|
5
5
|
## Commercial Products Live
|
6
6
|
* **[Friends and Guests](https://www.friendsandguests.com/)**, the signature product of [ShakaCode](http://www.shakacode.com), which is a "Network Connecting Hosts and Guests".
|
7
|
+
* **[Nootrobox](https://nootrobox.com)**: Web ecommerce site for "biohacking" products.
|
8
|
+
* **[GuavaPass](https://guavapass.com/)**: Coaching client of [ShakaCode](http://www.shakacode.com) and React on Rails fan!
|
9
|
+
* **[Pivotal Tracker](http://www.pivotaltracker.com/)**: The first (and most-loved) agile project management tool built on Rails. React on Rails has greatly simplified integration and workflow for our React components in Rails!
|
7
10
|
* **[Blink Inc](https://www.blinkinc.com)**: Website and more built by [ShakaCode](http://www.shakacode.com).
|
8
11
|
* **[Madrone Analytics](http://madroneco.com/)**: The original client of [ShakaCode](http://www.shakacode.com) that led to the development of React on Rails, as 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/).
|
9
12
|
* **[Deliveroo](https://deliveroo.co.uk/)**: The leading food delivery site in Europe has gone live with React on Rails, with multi-lingual JavaScript support!
|
10
13
|
![2016-05-03_19-18-34](https://cloud.githubusercontent.com/assets/1118459/15027253/91fd151a-11de-11e6-93e3-720518995fe0.png)
|
11
|
-
* **[Nootrobox](https://nootrobox.com)**: Web ecommerce site for "biohacking" products.
|
12
14
|
* **[Airgoat](https://airgoat.com/)**: Marketplace for sneakers.
|
13
15
|
* **[Apprentus](https://www.apprentus.com/)**: A marketplace to find the best private teachers. Using react-on-rails from the homepage to infinity!
|
14
16
|
* **[Confident Financial Solutions](https://www.mycfsapp.com/)**: Auto Repair Financing to help people get back on the road and back to life.
|
@@ -16,14 +18,6 @@
|
|
16
18
|
* **[Undeveloped](https://undeveloped.com/)**: Buy and sell domain names. ![image](https://cloud.githubusercontent.com/assets/1118459/19623703/7c6d63d0-9870-11e6-83f2-8b83ca49daa9.png)
|
17
19
|
* **[Foxford.ru](http://foxford.ru/)**: Online School ![2016-12-17_13-23-21](https://cloud.githubusercontent.com/assets/1118459/21290377/1adacdf2-c45c-11e6-97c1-f726ab749b2d.png)
|
18
20
|
|
19
|
-
|
20
|
-
## Commercial Products in Development
|
21
|
-
* **[GuavaPass](https://guavapass.com/)**: Coaching client of [ShakaCode](http://www.shakacode.com) and React on Rails fan!
|
22
|
-
* **[Pivotal Tracker](http://www.pivotaltracker.com/)**: The first (and most-loved) agile project management tool built on Rails. React on Rails has greatly simplified integration and workflow for our React components in Rails!
|
23
|
-
|
24
|
-
|
25
|
-
--------
|
26
|
-
|
27
21
|
## Demos and Tutorials
|
28
22
|
* [reactrails.com](http://www.reactrails.com), source code [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/)
|
29
23
|
* [Relay Rails Blog](https://github.com/gauravtiwari/relay-rails-blog): Tutorial to learn Relay with Rails.
|
data/README.md
CHANGED
@@ -8,11 +8,24 @@ I'm offering a free half-hour project consultation, on anything from React on Ra
|
|
8
8
|
|
9
9
|
Whether you have a new project or need help on an existing project, feel free to contact me directly at [justin@shakacode.com](mailto:justin@shakacode.com) and thanks in advance for any referrals!
|
10
10
|
|
11
|
-
Your support keeps this project going
|
11
|
+
Your support keeps this project going!
|
12
|
+
|
13
|
+
(Want to become a contributor? [Contact us](mailto:contact@shakacode.com) for a Slack room invite and let us know that you want to contribute.)
|
14
|
+
|
15
|
+
# Community
|
16
|
+
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 a monthly summary including 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.
|
12
17
|
|
13
|
-
|
18
|
+
[![2017-01-31_14-16-56](https://cloud.githubusercontent.com/assets/1118459/22490211/f7a70418-e7bf-11e6-9bef-b3ccd715dbf8.png)](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
14
19
|
|
15
|
-
|
20
|
+
* **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room!
|
21
|
+
* **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
22
|
+
* **[@ShakaCode on Twitter](https://twitter.com/shakacode)**
|
23
|
+
|
24
|
+
# Testimonials
|
25
|
+
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
26
|
+
![2017-01-30_11-33-59](https://cloud.githubusercontent.com/assets/1118459/22443635/b3549fb4-e6e3-11e6-8ea2-6f589dc93ed3.png)
|
27
|
+
|
28
|
+
For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
16
29
|
|
17
30
|
# Articles, Videos, and Podcasts
|
18
31
|
|
@@ -24,6 +37,7 @@ Follow [@ShakaCode](https://twitter.com/shakacode) for notications of new releas
|
|
24
37
|
### Videos
|
25
38
|
|
26
39
|
1. [egghead.io: Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
|
40
|
+
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)
|
27
41
|
1. [React On Rails Tutorial Series](https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU)
|
28
42
|
1. [History and Motivation](https://youtu.be/F4oymbUHvoY)
|
29
43
|
1. [Basic Tutorial Walkthrough](https://youtu.be/_bjScw60FBk)
|
@@ -135,7 +149,7 @@ See the [Installation Overview](docs/basics/installation-overview.md) for a conc
|
|
135
149
|
|
136
150
|
### Initializer Configuration
|
137
151
|
|
138
|
-
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.
|
152
|
+
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](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
|
139
153
|
|
140
154
|
### Including your React Component in your Rails Views
|
141
155
|
|
@@ -192,7 +206,7 @@ That will install the latest version and update your package.json.
|
|
192
206
|
## How it Works
|
193
207
|
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.
|
194
208
|
|
195
|
-
Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper. You can also initialize a Redux store with view or controller helper `redux_store` so that the store can be shared amongst multiple React components. See the docs for `redux_store` below and scan the code inside of the [/spec/dummy](spec/dummy) sample app.
|
209
|
+
Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper. You can also initialize a Redux store with view or controller helper `redux_store` so that the store can be shared amongst multiple React components. See the docs for `redux_store` below and scan the code inside of the [/spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) sample app.
|
196
210
|
|
197
211
|
### Client-Side Rendering vs. Server-Side Rendering
|
198
212
|
In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
|
@@ -241,7 +255,7 @@ Note, you never make these calls. This is what React on Rails does when either s
|
|
241
255
|
|
242
256
|
(Note, see below [section](#multiple-react-components-on-a-page-with-one-store) on how to setup redux stores that allow multiple components to talk to the same store.)
|
243
257
|
|
244
|
-
The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](app/helpers/react_on_rails_helper.rb), method `rails_context` for the definitive list).
|
258
|
+
The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/app/helpers/react_on_rails_helper.rb), method `rails_context` for the definitive list).
|
245
259
|
|
246
260
|
```ruby
|
247
261
|
{
|
@@ -279,7 +293,7 @@ Set the config value for the `rendering_extension`:
|
|
279
293
|
|
280
294
|
Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.
|
281
295
|
|
282
|
-
See [spec/dummy/config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb) for a detailed example.
|
296
|
+
See [spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example.
|
283
297
|
|
284
298
|
```ruby
|
285
299
|
module RenderingExtension
|
@@ -363,7 +377,7 @@ Include the module ReactOnRails::Controller in your controller, probably in Appl
|
|
363
377
|
2. In your component definition, you'll call `ReactOnRails.getStore('storeName')` to get the hydrated Redux store to attach to your components.
|
364
378
|
+ **props:** Named parameter `props`. ReactOnRails takes care of setting up the hydration of your store with props from the view.
|
365
379
|
|
366
|
-
For an example, see [spec/dummy/app/controllers/pages_controller.rb](spec/dummy/app/controllers/pages_controller.rb). Note, this is preferable to using the equivalent view_helper `redux_store` in that you can be assured that the store is initialized before your components.
|
380
|
+
For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/controllers/pages_controller.rb). Note, this is preferable to using the equivalent view_helper `redux_store` in that you can be assured that the store is initialized before your components.
|
367
381
|
|
368
382
|
#### View Helper
|
369
383
|
`redux_store(store_name, props: {})`
|
@@ -372,7 +386,7 @@ Same API as the controller extension. **HOWEVER**, we recommend the controller e
|
|
372
386
|
|
373
387
|
`redux_store_hydration_data`
|
374
388
|
|
375
|
-
Place this view helper (no parameters) at the end of your shared layout. This tell ReactOnRails where to client render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](spec/dummy/app/views/layouts/application.html.erb).
|
389
|
+
Place this view helper (no parameters) at the end of your shared layout. This tell ReactOnRails where to client render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
|
376
390
|
|
377
391
|
#### Redux Store Notes
|
378
392
|
Note, you don't need to separately initialize your redux store. However, it's recommended for the two following use cases:
|
@@ -467,11 +481,11 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
|
|
467
481
|
[React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See:
|
468
482
|
|
469
483
|
1. [React on Rails docs for react-router](docs/additional-reading/react-router.md)
|
470
|
-
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).
|
484
|
+
1. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
|
471
485
|
1. [Code Splitting docs](docs/additional-reading/code-splitting.md) for information about how to set up code splitting for server rendered routes.
|
472
486
|
|
473
487
|
## Deployment
|
474
|
-
* 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](spec/dummy/config/initializers/react_on_rails.rb).
|
488
|
+
* 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).
|
475
489
|
* `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
|
476
490
|
* `npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
|
477
491
|
* See the [Heroku Deployment](docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku.
|
@@ -534,7 +548,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
|
|
534
548
|
|
535
549
|
## Demos
|
536
550
|
+ [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
|
537
|
-
+ [spec app](spec/dummy): Great simple examples used for our tests.
|
551
|
+
+ [spec app](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy): Great simple examples used for our tests.
|
538
552
|
```
|
539
553
|
cd spec/dummy
|
540
554
|
bundle && npm i
|
@@ -566,6 +580,9 @@ We owe much gratitude to the work of the [react-rails gem](https://github.com/re
|
|
566
580
|
# FINAL NOTES
|
567
581
|
* 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.
|
568
582
|
* 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).
|
583
|
+
* 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 a monthly summary including 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.
|
584
|
+
|
585
|
+
[![2017-01-31_14-16-56](https://cloud.githubusercontent.com/assets/1118459/22490211/f7a70418-e7bf-11e6-9bef-b3ccd715dbf8.png)](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
569
586
|
|
570
587
|
---
|
571
588
|
|
@@ -111,12 +111,12 @@ There's an implemented example of code splitting in the `spec/dummy` folder of t
|
|
111
111
|
|
112
112
|
See:
|
113
113
|
|
114
|
-
- [spec/dummy/client/app/startup/clientRegistration.jsx](
|
115
|
-
- [spec/dummy/client/app/startup/serverRegistration.jsx](
|
116
|
-
- [spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx](
|
117
|
-
- [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](
|
118
|
-
- [spec/dummy/client/app/components/DeferredRender.jsx](
|
119
|
-
- [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](
|
114
|
+
- [spec/dummy/client/app/startup/clientRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/clientRegistration.jsx)
|
115
|
+
- [spec/dummy/client/app/startup/serverRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/serverRegistration.jsx)
|
116
|
+
- [spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx) <-- Code splitting implemented here
|
117
|
+
- [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
|
118
|
+
- [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
|
119
|
+
- [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)
|
120
120
|
|
121
121
|
### Caveats
|
122
122
|
|
@@ -47,8 +47,6 @@ heroku buildpacks:add --index 1 heroku/nodejs
|
|
47
47
|
|
48
48
|
For more information, see [Using Multiple Buildpacks for an App](https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app)
|
49
49
|
|
50
|
-
If for some reason you need custom buildpacks that are not officially supported by Heroku ([see this page](https://devcenter.heroku.com/articles/buildpacks)), we recommend checking out [heroku-buildpack-multi](https://github.com/ddollar/heroku-buildpack-multi).
|
51
|
-
|
52
50
|
## Fresh Rails Install
|
53
51
|
|
54
52
|
### Swap out sqlite for postgres by doing the following:
|
@@ -11,26 +11,26 @@ We'll use a Webpack Dev server on port 3500 to provide the assets to Rails, rath
|
|
11
11
|
|
12
12
|
`Procfile.static` provides an alternative that uses "static" assets, similar to a production deployment.
|
13
13
|
|
14
|
-
The secret sauce is in the [app/views/layouts/application.html.erb](
|
14
|
+
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.
|
15
15
|
|
16
16
|
## Places to Configure (Files to Examine)
|
17
17
|
|
18
18
|
1. See the Webpack config files. Note, these examples are now setup for using [CSS Modules](https://github.com/css-modules/css-modules).
|
19
|
-
1. [client/webpack.client.base.config.js](
|
20
|
-
1. [client/webpack.client.rails.hot.config.js](
|
21
|
-
1. [client/webpack.client.rails.build.config.js](
|
22
|
-
1. [app/views/layouts/application.html.erb](
|
23
|
-
1. See the Procfiles: [Procfile.hot](
|
19
|
+
1. [client/webpack.client.base.config.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/webpack.client.base.config.js): Common configuration for hot or static assets.
|
20
|
+
1. [client/webpack.client.rails.hot.config.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/webpack.client.rails.hot.config.js): Setup for hot loading, using react-transform-hmr.
|
21
|
+
1. [client/webpack.client.rails.build.config.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/webpack.client.rails.build.config.js): Setup for static loading, as is done in a production deployment.
|
22
|
+
1. [app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb): Uses the view helpers `env_stylesheet_link_tag` and `env_javascript_include_tag` which will either do the hot reloading or the static loading.
|
23
|
+
1. See the Procfiles: [Procfile.hot](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/Procfile.hot) and [Procfile.static](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/Procfile.static). These:
|
24
24
|
1. Start the webpack processes, depending on the mode or HOT or not.
|
25
25
|
2. Start the rails server, setting an ENV value of REACT_ON_RAILS_ENV to HOT if we're hot loading or else setting this to blank.
|
26
26
|
1. Configure the file Rails asset pipeline files:
|
27
|
-
1. [app/assets/javascripts/application_static.js](
|
28
|
-
1. [app/assets/stylesheets/application_static.css.scss](
|
29
|
-
1. Be sure your [config/initializers/assets.rb](
|
30
|
-
1. Copy the [client/server-rails-hot.js](
|
27
|
+
1. [app/assets/javascripts/application_static.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/assets/javascripts/application_static.js)
|
28
|
+
1. [app/assets/stylesheets/application_static.css.scss](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/assets/stylesheets/application_static.css.scss)
|
29
|
+
1. Be sure your [config/initializers/assets.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/assets.rb) is configured to include the webpack generated files.
|
30
|
+
1. Copy the [client/server-rails-hot.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/server-rails-hot.js) to the your client directory.
|
31
31
|
1. Copy the scripts in the top level and client level `package.json` files:
|
32
|
-
1. Top Level: [package.json](
|
33
|
-
1. Client Level: [package.json](
|
32
|
+
1. Top Level: [package.json](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/package.json)
|
33
|
+
1. Client Level: [package.json](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/package.json)
|
34
34
|
|
35
35
|
|
36
36
|
## Code Snippets
|
@@ -39,7 +39,7 @@ You need to configure the name of the server bundle in two places:
|
|
39
39
|
# If you are using the same file for client and server rendering, having this set probably does
|
40
40
|
# not affect performance.
|
41
41
|
config.server_bundle_js_file = "webpack-bundle.js"
|
42
|
-
```
|
42
|
+
```
|
43
43
|
|
44
44
|
And in `client/node/package.json`
|
45
45
|
|
@@ -61,79 +61,102 @@ And you'll need this file: `client/node/server.js`
|
|
61
61
|
|
62
62
|
```javascript
|
63
63
|
// client/node/server.js
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
var bundlePath = '../../app/assets/webpack/';
|
68
|
-
var bundleFileName = 'webpack-bundle.js';
|
64
|
+
const net = require('net');
|
65
|
+
const fs = require('fs');
|
69
66
|
|
70
|
-
|
67
|
+
const bundlePath = '../../app/assets/webpack/';
|
68
|
+
let bundleFileName = 'server-bundle.js';
|
71
69
|
|
72
|
-
|
73
|
-
this.queue = [];
|
74
|
-
this.initialized = false;
|
75
|
-
}
|
70
|
+
let currentArg;
|
76
71
|
|
77
|
-
Handler
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
console.log('Processing request: ' + data);
|
82
|
-
var result = eval(data);
|
83
|
-
connection.write(result);
|
84
|
-
});
|
85
|
-
};
|
86
|
-
|
87
|
-
if (this.initialized) {
|
88
|
-
callback();
|
89
|
-
} else {
|
90
|
-
this.queue.push(callback);
|
72
|
+
class Handler {
|
73
|
+
constructor() {
|
74
|
+
this.queue = [];
|
75
|
+
this.initialized = false;
|
91
76
|
}
|
92
|
-
};
|
93
77
|
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
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;
|
99
88
|
}
|
100
89
|
|
101
|
-
|
102
|
-
|
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
|
+
}
|
103
116
|
|
104
|
-
|
117
|
+
const handler = new Handler();
|
105
118
|
|
106
119
|
process.argv.forEach((val) => {
|
107
|
-
if (val[0]
|
120
|
+
if (val[0] === '-') {
|
108
121
|
currentArg = val.slice(1);
|
109
122
|
return;
|
110
123
|
}
|
111
124
|
|
112
|
-
if (currentArg
|
125
|
+
if (currentArg === 's') {
|
113
126
|
bundleFileName = val;
|
114
127
|
}
|
115
128
|
});
|
116
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
|
+
|
117
143
|
try {
|
118
144
|
fs.mkdirSync(bundlePath);
|
119
145
|
} catch (e) {
|
120
|
-
if (e.code
|
146
|
+
if (e.code !== 'EEXIST') {
|
147
|
+
throw e;
|
148
|
+
} else {
|
149
|
+
loadBundle();
|
150
|
+
}
|
121
151
|
}
|
122
152
|
|
123
153
|
fs.watchFile(bundlePath + bundleFileName, (curr) => {
|
124
154
|
if (curr && curr.blocks && curr.blocks > 0) {
|
125
|
-
|
126
|
-
console.log('Reloading server bundle must be implemented by restarting the node process!');
|
127
|
-
return;
|
128
|
-
}
|
129
|
-
|
130
|
-
require(bundlePath + bundleFileName);
|
131
|
-
console.log('Loaded server bundle: ' + bundlePath + bundleFileName);
|
132
|
-
handler.initialize();
|
155
|
+
loadBundle();
|
133
156
|
}
|
134
157
|
});
|
135
158
|
|
136
|
-
|
159
|
+
const unixServer = net.createServer((connection) => {
|
137
160
|
handler.handle(connection);
|
138
161
|
});
|
139
162
|
|
@@ -143,6 +166,4 @@ process.on('SIGINT', () => {
|
|
143
166
|
unixServer.close();
|
144
167
|
process.exit();
|
145
168
|
});
|
146
|
-
|
147
169
|
```
|
148
|
-
|
@@ -40,7 +40,7 @@ If you want to speed up the re-compiling process, you can call `npm run build:de
|
|
40
40
|
},
|
41
41
|
```
|
42
42
|
|
43
|
-
[spec/dummy](
|
43
|
+
[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.
|
44
44
|
|
45
45
|
## Hot Reloading
|
46
46
|
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:
|
@@ -64,7 +64,7 @@ module ReactOnRails
|
|
64
64
|
end
|
65
65
|
|
66
66
|
def missing_npm?
|
67
|
-
return false unless `which npm`.blank?
|
67
|
+
return false unless ReactOnRails::Utils.running_on_windows? ? `where npm`.blank? : `which npm`.blank?
|
68
68
|
error = "npm is required. Please install it before continuing. "
|
69
69
|
error << "https://www.npmjs.com/"
|
70
70
|
GeneratorMessages.add_error(error)
|
@@ -72,7 +72,7 @@ module ReactOnRails
|
|
72
72
|
end
|
73
73
|
|
74
74
|
def missing_node?
|
75
|
-
return false unless `which node`.blank?
|
75
|
+
return false unless ReactOnRails::Utils.running_on_windows? ? `where node`.blank? : `which node`.blank?
|
76
76
|
error = "** nodejs is required. Please install it before continuing. "
|
77
77
|
error << "https://nodejs.org/en/"
|
78
78
|
GeneratorMessages.add_error(error)
|
@@ -6,48 +6,50 @@ let bundleFileName = 'server-bundle.js';
|
|
6
6
|
|
7
7
|
let currentArg;
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
Handler.prototype.handle = (connection) => {
|
15
|
-
const callback = () => {
|
16
|
-
const terminator = '\r\n\0';
|
17
|
-
let request = '';
|
18
|
-
connection.setEncoding('utf8');
|
19
|
-
connection.on('data', (data) => {
|
20
|
-
console.log(`Processing chunk: ${data}`);
|
21
|
-
request += data;
|
22
|
-
if (data.slice(-terminator.length) === terminator) {
|
23
|
-
request = request.slice(0, -terminator.length);
|
24
|
-
|
25
|
-
// eslint-disable-next-line no-eval
|
26
|
-
const response = eval(request);
|
27
|
-
connection.write(`${response}${terminator}`);
|
28
|
-
request = '';
|
29
|
-
}
|
30
|
-
});
|
31
|
-
};
|
32
|
-
|
33
|
-
if (this.initialized) {
|
34
|
-
callback();
|
35
|
-
} else {
|
36
|
-
this.queue.push(callback);
|
9
|
+
class Handler {
|
10
|
+
constructor() {
|
11
|
+
this.queue = [];
|
12
|
+
this.initialized = false;
|
37
13
|
}
|
38
|
-
};
|
39
14
|
|
40
|
-
|
41
|
-
|
42
|
-
|
15
|
+
initialize() {
|
16
|
+
console.log(`Processing ${this.queue.length} pending requests`);
|
17
|
+
let callback;
|
43
18
|
|
44
|
-
|
45
|
-
|
46
|
-
|
19
|
+
// eslint-disable-next-line no-cond-assign
|
20
|
+
while (callback = this.queue.pop()) {
|
21
|
+
callback();
|
22
|
+
}
|
23
|
+
|
24
|
+
this.initialized = true;
|
47
25
|
}
|
48
26
|
|
49
|
-
|
50
|
-
|
27
|
+
handle(connection) {
|
28
|
+
const callback = () => {
|
29
|
+
const terminator = '\r\n\0';
|
30
|
+
let request = '';
|
31
|
+
connection.setEncoding('utf8');
|
32
|
+
connection.on('data', (data) => {
|
33
|
+
console.log(`Processing chunk: ${data}`);
|
34
|
+
request += data;
|
35
|
+
if (data.slice(-terminator.length) === terminator) {
|
36
|
+
request = request.slice(0, -terminator.length);
|
37
|
+
|
38
|
+
// eslint-disable-next-line no-eval
|
39
|
+
const response = eval(request);
|
40
|
+
connection.write(`${response}${terminator}`);
|
41
|
+
request = '';
|
42
|
+
}
|
43
|
+
});
|
44
|
+
};
|
45
|
+
|
46
|
+
if (this.initialized) {
|
47
|
+
callback();
|
48
|
+
} else {
|
49
|
+
this.queue.push(callback);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
51
53
|
|
52
54
|
const handler = new Handler();
|
53
55
|
|
data/lib/react_on_rails/utils.rb
CHANGED
@@ -20,6 +20,10 @@ module ReactOnRails
|
|
20
20
|
ReactOnRails.configuration.server_bundle_js_file)
|
21
21
|
end
|
22
22
|
|
23
|
+
def self.running_on_windows?
|
24
|
+
(/cygwin|mswin|mingw|bccwin|wince|emx/ =~ RUBY_PLATFORM) != nil
|
25
|
+
end
|
26
|
+
|
23
27
|
module Required
|
24
28
|
def required(arg_name)
|
25
29
|
raise ArgumentError, "#{arg_name} is required"
|
data/package.json
CHANGED
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: 6.5.0
|
4
|
+
version: 6.5.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: 2017-01
|
11
|
+
date: 2017-02-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: connection_pool
|
@@ -445,9 +445,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
445
445
|
version: 2.0.0
|
446
446
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
447
447
|
requirements:
|
448
|
-
- - "
|
448
|
+
- - ">="
|
449
449
|
- !ruby/object:Gem::Version
|
450
|
-
version:
|
450
|
+
version: '0'
|
451
451
|
requirements: []
|
452
452
|
rubyforge_project:
|
453
453
|
rubygems_version: 2.6.8
|