react_on_rails 8.0.3 → 8.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.travis.yml +1 -1
- data/CHANGELOG.md +9 -1
- data/Gemfile +1 -1
- data/KUDOS.md +5 -0
- data/README.md +152 -70
- data/Rakefile +3 -0
- data/docs/additional-reading/node-server-rendering.md +2 -166
- data/docs/additional-reading/rails-assets-relative-paths.md +2 -0
- data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx +1 -2
- data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx +1 -3
- data/lib/react_on_rails/version.rb +1 -1
- data/package.json +1 -1
- data/rakelib/node_package.rake +1 -0
- data/rakelib/release.rake +7 -4
- data/react_on_rails.gemspec +2 -1
- data/webpackConfigLoader.js +1 -2
- metadata +19 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 176a62cd952fdd4bf0d60c20a51edfdcef3e2138
|
|
4
|
+
data.tar.gz: af938ed09a22d34460ae7ee6a4737ee8df734b0f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 51d8f30d5f34be33abb0cf9065a33fa310b514def59d754a866a90c2b8425e057f24d2636b49ccfc3d3a2b3873e7df623c3caa693ed7a2ef0d07ff8766050a7c
|
|
7
|
+
data.tar.gz: bba8dd2e79cf5903054f101e082c0dead7835760bd15342188847349b4766b2aba8fc3376e3bd1b4b705a0e3959e6b92f302fea397624201660d7bc40599d51f
|
data/.travis.yml
CHANGED
|
@@ -36,7 +36,7 @@ install:
|
|
|
36
36
|
- travis_retry gem install bundler
|
|
37
37
|
- travis_retry nvm install node 8.0.0
|
|
38
38
|
- node -v
|
|
39
|
-
- travis_retry npm i -g yarn@0.
|
|
39
|
+
- travis_retry npm i -g yarn@0.27.5
|
|
40
40
|
- travis_retry yarn global add babel-cli
|
|
41
41
|
- travis_retry bundle install
|
|
42
42
|
- travis_retry yarn
|
data/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,13 @@ Changes since last non-beta release.
|
|
|
8
8
|
|
|
9
9
|
*Please add entries here for your pull requests.*
|
|
10
10
|
|
|
11
|
+
## [8.0.4]
|
|
12
|
+
### Fixed
|
|
13
|
+
- Corrects `devBuild` value for webpack production build from webpackConfigLoader. [#877](https://github.com/shakacode/react_on_rails/pull/877) by [chenqingspring](https://github.com/chenqingspring).
|
|
14
|
+
- Remove contentBase deprecation warning message. [#878](https://github.com/shakacode/react_on_rails/pull/878) by [ened ](https://github.com/ened).
|
|
15
|
+
- Removes invalid reference to _railsContext in the generated files. [#886](https://github.com/shakacode/react_on_rails/pull/8876) by [justin808](https://github.com/justin808)
|
|
16
|
+
- All tests run against Rails 5.1.2
|
|
17
|
+
|
|
11
18
|
## [8.0.3]
|
|
12
19
|
### Fixed
|
|
13
20
|
- Ruby 2.1 issue due to `<<~` as reported in [issue #870](https://github.com/shakacode/react_on_rails/issues/870). [#867](https://github.com/shakacode/react_on_rails/pull/867) by [justin808](https://github.com/justin808)
|
|
@@ -611,7 +618,8 @@ Best done with Object destructing:
|
|
|
611
618
|
##### Fixed
|
|
612
619
|
- Fix several generator related issues.
|
|
613
620
|
|
|
614
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/8.0.
|
|
621
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/8.0.4...master
|
|
622
|
+
[8.0.4]: https://github.com/shakacode/react_on_rails/compare/8.0.3...8.0.4
|
|
615
623
|
[8.0.3]: https://github.com/shakacode/react_on_rails/compare/8.0.2...8.0.3
|
|
616
624
|
[8.0.2]: https://github.com/shakacode/react_on_rails/compare/8.0.1...8.0.2
|
|
617
625
|
[8.0.1]: https://github.com/shakacode/react_on_rails/compare/8.0.0...8.0.1
|
data/Gemfile
CHANGED
data/KUDOS.md
CHANGED
|
@@ -2,6 +2,11 @@ This is a sibling file to [PROJECTS.md](./PROJECTS.md).
|
|
|
2
2
|
|
|
3
3
|
I'm looking for quotes on why you like using React on Rails. You might mention any benefits you particularly like and if you've migrated from react-rails. Just click to edit and github will automatically open up a PR. Thanks to everybody that contributes!
|
|
4
4
|
|
|
5
|
+
## June 9, 2017
|
|
6
|
+
By Github Issue [#868](https://github.com/shakacode/react_on_rails/issues/868)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
5
10
|
### May 6, 2017
|
|
6
11
|
By Email
|
|
7
12
|
|
data/README.md
CHANGED
|
@@ -1,39 +1,52 @@
|
|
|
1
1
|
[](https://travis-ci.org/shakacode/react_on_rails) [](https://app.codeship.com/projects/187011) [](https://gemnasium.com/shakacode/react_on_rails) [](https://badge.fury.io/rb/react_on_rails) [](https://badge.fury.io/js/react-on-rails) [](https://codeclimate.com/github/shakacode/react_on_rails) [](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
|
|
4
|
+
|
|
5
|
+
Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
* **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
|
|
8
|
+
* *[Click here for talk slides](http://www.shakacode.com/talks).*
|
|
7
9
|
|
|
8
|
-
|
|
10
|
+
We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
* Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-coaching-plan.pdf).
|
|
13
|
+
* 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.
|
|
14
|
+
* 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).
|
|
15
|
+
* Augmenting your team to get your product completed more efficiently and quickly.
|
|
11
16
|
|
|
12
|
-
|
|
17
|
+
My article "[Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9)" provides additional details about our projects.
|
|
13
18
|
|
|
14
|
-
I
|
|
19
|
+
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.
|
|
15
20
|
|
|
16
|
-
|
|
21
|
+
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 [Friends and Guests](https://www.friendsandguests.com).
|
|
17
22
|
|
|
18
|
-
Your support
|
|
23
|
+
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).
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
Aloha and best wishes from the ShakaCode team!
|
|
26
|
+
|
|
27
|
+
------
|
|
21
28
|
|
|
22
29
|
# Community
|
|
23
|
-
Please [
|
|
30
|
+
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.
|
|
24
31
|
|
|
25
32
|
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
26
33
|
|
|
27
|
-
* **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room!
|
|
34
|
+
* **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room! Let us know if you want to contribute.
|
|
28
35
|
* **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
|
29
36
|
* **[@ShakaCode on Twitter](https://twitter.com/shakacode)**
|
|
37
|
+
* 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).
|
|
38
|
+
|
|
39
|
+
------
|
|
30
40
|
|
|
31
41
|
# Testimonials
|
|
32
42
|
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
|
43
|
+
|
|
33
44
|
|
|
34
45
|
|
|
35
46
|
For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
36
47
|
|
|
48
|
+
-------
|
|
49
|
+
|
|
37
50
|
# Articles, Videos, and Podcasts
|
|
38
51
|
|
|
39
52
|
### Articles
|
|
@@ -43,7 +56,7 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
43
56
|
* [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
|
44
57
|
|
|
45
58
|
### Videos
|
|
46
|
-
|
|
59
|
+
1. [GORUCO 2017: Front-End Sadness to Happiness: The React on Rails Story by Justin Gordon](https://www.youtube.com/watch?v=SGkTvKRPYrk)
|
|
47
60
|
1. [egghead.io: Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
|
|
48
61
|
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)
|
|
49
62
|
1. [React On Rails Tutorial Series](https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU)
|
|
@@ -54,11 +67,16 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
|
54
67
|
### Podcasts
|
|
55
68
|
* [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)
|
|
56
69
|
|
|
70
|
+
------
|
|
71
|
+
|
|
57
72
|
# NEWS
|
|
58
|
-
*
|
|
59
|
-
*
|
|
73
|
+
* The Docs here on `master` refer to 8.0.0 including support for [webpacker_lite](https://github.com/shakacode/webpacker_lite)!
|
|
74
|
+
*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.*
|
|
75
|
+
* **[VERSION 8.0.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.
|
|
60
76
|
* *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
61
77
|
|
|
78
|
+
------
|
|
79
|
+
|
|
62
80
|
# React on Rails
|
|
63
81
|
|
|
64
82
|
**Project Objective**: To provide an opinionated and optimal framework for integrating Ruby on Rails with modern JavaScript tooling and libraries, including [**Webpack**](http://webpack.github.io/), [**Babel**](https://babeljs.io/), [**React**](https://facebook.github.io/react/), [**Redux**](https://github.com/reactjs/redux), [**React-Router**](https://github.com/reactjs/react-router). This differs significantly from typical Rails architecture. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. If you are interested in implementing React using traditional Rails architecture, see [react-rails](https://github.com/reactjs/react-rails).
|
|
@@ -175,7 +193,7 @@ Configure the `config/initializers/react_on_rails.rb`. You can adjust some neces
|
|
|
175
193
|
<%= react_component("HelloWorld", props: @some_props, prerender: true) %>
|
|
176
194
|
```
|
|
177
195
|
|
|
178
|
-
+ The `component_name` parameter is a string matching the name you used to expose your React component globally. So, in the above examples, if you had a React component named "HelloWorld,
|
|
196
|
+
+ The `component_name` parameter is a string matching the name you used to expose your React component globally. So, in the above examples, if you had a React component named "HelloWorld", you would register it with the following lines:
|
|
179
197
|
|
|
180
198
|
```js
|
|
181
199
|
import ReactOnRails from 'react-on-rails';
|
|
@@ -208,7 +226,7 @@ See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
|
|
|
208
226
|
## NPM
|
|
209
227
|
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:
|
|
210
228
|
|
|
211
|
-
```
|
|
229
|
+
```bash
|
|
212
230
|
cd client && yarn add react-on-rails
|
|
213
231
|
```
|
|
214
232
|
|
|
@@ -226,14 +244,14 @@ Now the server will interpret your JavaScript using [ExecJS](https://github.com/
|
|
|
226
244
|
|
|
227
245
|
In the following screenshot you can see the 3 parts of React on Rails rendering:
|
|
228
246
|
|
|
229
|
-
1. A hidden HTML div
|
|
247
|
+
1. A hidden HTML div contains the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads to take this data and build initialize React components.
|
|
230
248
|
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
|
|
231
|
-
3. Additional JavaScript is placed to console
|
|
249
|
+
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.
|
|
232
250
|
|
|
233
251
|
**Note**:
|
|
234
252
|
|
|
235
253
|
* 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.
|
|
236
|
-
* 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
|
|
254
|
+
* 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.
|
|
237
255
|
|
|
238
256
|
|
|
239
257
|
|
|
@@ -244,28 +262,60 @@ On production deployments that use asset precompilation, such as Heroku deployme
|
|
|
244
262
|
|
|
245
263
|
If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
|
|
246
264
|
|
|
247
|
-
### Rails Context
|
|
248
|
-
When you use a "generator function" to create react components (or renderedHtml on the server) or you used shared redux stores, you get 2 params passed to your function:
|
|
249
265
|
|
|
250
|
-
|
|
251
|
-
|
|
266
|
+
### Generator Functions
|
|
267
|
+
Why would you create a function that returns a React component?
|
|
268
|
+
|
|
269
|
+
1. You need access to the `railsContext`. See documentation for the railsContext in terms of why you might need it.
|
|
270
|
+
1. You may want the ability to use the passed-in props to initialize a redux store or set up react-router
|
|
271
|
+
1. You may want to return different components depending on what's in the props.
|
|
272
|
+
|
|
273
|
+
ReactOnRails will automatically detect a registered generator function. Thus, there is no difference between registering a React Component versus a "generator function."
|
|
252
274
|
|
|
253
|
-
|
|
275
|
+
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 }.
|
|
276
|
+
|
|
277
|
+
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:
|
|
278
|
+
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
279
|
+
|
|
280
|
+
### Rails Context and Generator Functions
|
|
281
|
+
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:
|
|
282
|
+
|
|
283
|
+
1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
|
|
284
|
+
2. `railsContext`: Rails contextual information, such as the current pathname. You can customize this in your config file.
|
|
285
|
+
|
|
286
|
+
This parameters (`props` and `railsContext`) will be the same regardless of either client or server side rendering, except for the key `serverSide` based on whether or not you are server rendering.
|
|
287
|
+
|
|
288
|
+
While you could manually configure your Rails code to pass the "`railsContext` information" with the rest of your "props", the `railsContext` is a convenience because it's passed consistently to all invocations of generator functions.
|
|
254
289
|
|
|
255
|
-
|
|
290
|
+
For example, suppose you create a "generator function" called MyAppComponent.
|
|
291
|
+
|
|
292
|
+
```js
|
|
293
|
+
import React from 'react';
|
|
294
|
+
const MyAppComponent = (props, railsContext) => (
|
|
295
|
+
<div>
|
|
296
|
+
<p>props are: {JSON.stringify(props)}</p>
|
|
297
|
+
<p>railsContext is: {JSON.stringify(railsContext)}
|
|
298
|
+
</p>
|
|
299
|
+
</div>
|
|
300
|
+
);
|
|
301
|
+
export default MyAppComponent;
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
*Note: you will get a React browser console warning if you try to serverRender this since the value of `serverSide` will be different for server rendering.*
|
|
256
305
|
|
|
257
306
|
So if you register your generator function `MyAppComponent`, it will get called like:
|
|
258
307
|
|
|
259
308
|
```js
|
|
260
309
|
reactComponent = MyAppComponent(props, railsContext);
|
|
261
310
|
```
|
|
262
|
-
|
|
311
|
+
|
|
312
|
+
and, similarly, any redux store always initialized with 2 parameters:
|
|
263
313
|
|
|
264
314
|
```js
|
|
265
315
|
reduxStore = MyReduxStore(props, railsContext);
|
|
266
316
|
```
|
|
267
317
|
|
|
268
|
-
Note, you never make these calls.
|
|
318
|
+
Note, you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it.
|
|
269
319
|
|
|
270
320
|
(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.)
|
|
271
321
|
|
|
@@ -289,9 +339,29 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](h
|
|
|
289
339
|
}
|
|
290
340
|
```
|
|
291
341
|
|
|
342
|
+
#### Why the railsContext is only passed to generator functions
|
|
343
|
+
There's no reason that the railsContext would ever get passed to your React component unless the value is explicitly put into the props used for rendering. If you create a react component, rather than a generator function, for use by React on Rails, then you get whatever props are passed in from the view helper, which **does not include the Rails Context**. It's trivial to wrap your component in a "generator function" to return a new component that takes both:
|
|
344
|
+
|
|
345
|
+
```js
|
|
346
|
+
import React from 'react';
|
|
347
|
+
import AppComponent from './AppComponent';
|
|
348
|
+
const AppComponentWithRailsContext = (props, railsContext) => (
|
|
349
|
+
<AppComponent {...{...props, railsContext}}/>
|
|
350
|
+
)
|
|
351
|
+
export default AppComponentWithRailsContext;
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
Consider this line in depth:
|
|
355
|
+
|
|
356
|
+
```js
|
|
357
|
+
<AppComponent {...{ ...props, railsContext }}/>
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
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).
|
|
361
|
+
|
|
292
362
|
#### Use Cases
|
|
293
|
-
##### Needing the current
|
|
294
|
-
Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server
|
|
363
|
+
##### Needing the current URL path for server rendering
|
|
364
|
+
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.
|
|
295
365
|
|
|
296
366
|
##### Configuring different code for server side rendering
|
|
297
367
|
Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
|
|
@@ -326,9 +396,9 @@ end
|
|
|
326
396
|
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.
|
|
327
397
|
|
|
328
398
|
### Globally Exposing Your React Components
|
|
329
|
-
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 **
|
|
399
|
+
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**.
|
|
330
400
|
|
|
331
|
-
This is
|
|
401
|
+
This is how to expose a component to the `react_component` view helper.
|
|
332
402
|
|
|
333
403
|
```javascript
|
|
334
404
|
// client/app/bundles/HelloWorld/startup/HelloWorld.jsx
|
|
@@ -339,27 +409,17 @@ This is an example of how to expose a component to the `react_component` view he
|
|
|
339
409
|
|
|
340
410
|
#### Different Server-Side Rendering Code (and a Server Specific Bundle)
|
|
341
411
|
|
|
342
|
-
You may want different initialization for your server
|
|
343
|
-
|
|
344
|
-
If you do want different code to run, you'd setup 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.
|
|
412
|
+
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!
|
|
345
413
|
|
|
346
|
-
|
|
347
|
-
Why would you create a function that returns a React component? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props. ReactOnRails will automatically detect a registered generator function.
|
|
348
|
-
|
|
349
|
-
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 }.
|
|
350
|
-
|
|
351
|
-
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. This is useful when you 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:
|
|
352
|
-
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
414
|
+
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.
|
|
353
415
|
|
|
354
416
|
#### Renderer Functions
|
|
355
|
-
A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to
|
|
417
|
+
A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to render a React component into the dom. Why would you want to call `ReactDOM.render` yourself? One possible use case is [code splitting](./docs/additional-reading/code-splitting.md).
|
|
356
418
|
|
|
357
|
-
Renderer functions are not meant to be used on the server
|
|
419
|
+
Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a generator function. Attempting to server render with a renderer function will cause an error.
|
|
358
420
|
|
|
359
421
|
## ReactOnRails View Helpers API
|
|
360
|
-
Once the bundled files have been generated in your `app/assets/webpack` folder and you have
|
|
361
|
-
|
|
362
|
-
This is how you actually render the React components you exposed to `window` inside of `clientRegistration` (and `global` inside of `serverRegistration` if you are server rendering).
|
|
422
|
+
Once the bundled files have been generated in your `app/assets/webpack` folder and you have registered your components, you will want to render these components on your Rails views using the included helper method, `react_component`.
|
|
363
423
|
|
|
364
424
|
### react_component
|
|
365
425
|
```ruby
|
|
@@ -373,19 +433,19 @@ react_component(component_name,
|
|
|
373
433
|
html_options: {})
|
|
374
434
|
```
|
|
375
435
|
|
|
376
|
-
+ **component_name:** Can be a React component, created using
|
|
436
|
+
+ **component_name:** Can be a React component, created using an ES6 class or a generator function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only).
|
|
377
437
|
+ **options:**
|
|
378
438
|
+ **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
|
|
379
|
-
+ **prerender:** enable server-side rendering of component. Set to false when debugging!
|
|
439
|
+
+ **prerender:** enable server-side rendering of a component. Set to false when debugging!
|
|
380
440
|
+ **id:** Id for the div, will be used to attach the React component. This will get assigned automatically if you do not provide an id. Must be unique.
|
|
381
|
-
+ **html_options:** Any other
|
|
382
|
-
+ **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Note, on the client you will
|
|
383
|
-
+ **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the default configuration of logging_on_server set to true, you'll still see the errors on the server.
|
|
441
|
+
+ **html_options:** Any other HTML options get placed on the added div for the component. For example, you can set a class (or inline style) on the outer div so that it behaves like a span, with the styling of `display:inline-block`.
|
|
442
|
+
+ **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Note, on the client, you will see both the `railsContext` and your props. On the server, you only see the `railsContext` being logged.
|
|
443
|
+
+ **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the default configuration of `logging_on_server` set to true, you'll still see the errors on the server.
|
|
384
444
|
+ **raise_on_prerender_error:** Default is false. True will throw an error on the server side rendering. Your controller will have to handle the error.
|
|
385
445
|
|
|
386
446
|
### redux_store
|
|
387
447
|
#### Controller Extension
|
|
388
|
-
Include the module ReactOnRails::Controller in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
|
|
448
|
+
Include the module `ReactOnRails::Controller` in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
|
|
389
449
|
|
|
390
450
|
`redux_store(store_name, props: {})`
|
|
391
451
|
|
|
@@ -399,28 +459,28 @@ For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://git
|
|
|
399
459
|
#### View Helper
|
|
400
460
|
`redux_store(store_name, props: {})`
|
|
401
461
|
|
|
402
|
-
|
|
462
|
+
This method has the same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note, you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
|
|
403
463
|
|
|
404
464
|
`redux_store_hydration_data`
|
|
405
465
|
|
|
406
|
-
Place this view helper (no parameters) at the end of your shared layout
|
|
466
|
+
Place this view helper (no parameters) at the end of your shared layout so ReactOnRails will 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).
|
|
407
467
|
|
|
408
468
|
#### Redux Store Notes
|
|
409
|
-
Note, you don't need to
|
|
469
|
+
Note, you don't need to initialize your redux store. You can pass the props to your React component in a "generator function." However, consider using the `redux_store` helper for the two following use cases:
|
|
410
470
|
|
|
411
|
-
1. You want to have multiple components
|
|
471
|
+
1. You want to have multiple React components accessing the same store at once.
|
|
412
472
|
2. You want to place the props to hydrate the client side stores at the very end of your HTML so that the browser can render all earlier HTML first. This is particularly useful if your props will be large.
|
|
413
473
|
|
|
414
474
|
### server_render_js
|
|
415
475
|
`server_render_js(js_expression, options = {})`
|
|
416
476
|
|
|
417
|
-
+ js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught and console messages handled properly
|
|
477
|
+
+ js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught, and console messages will be handled properly
|
|
418
478
|
+ Currently, the only option you may pass is `replay_console` (boolean)
|
|
419
479
|
|
|
420
480
|
This is a helper method that takes any JavaScript expression and returns the output from evaluating it. If you have more than one line that needs to be executed, wrap it in an IIFE. JS exceptions will be caught and console messages handled properly.
|
|
421
481
|
|
|
422
482
|
## Multiple React Components on a Page with One Store
|
|
423
|
-
You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity.
|
|
483
|
+
You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
|
|
424
484
|
|
|
425
485
|
Suppose the Redux store is called `appStore`, and you have 3 React components that each needs to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
|
|
426
486
|
|
|
@@ -450,7 +510,7 @@ return (
|
|
|
450
510
|
);
|
|
451
511
|
```
|
|
452
512
|
|
|
453
|
-
From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note, for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`.
|
|
513
|
+
From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note, for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. In other words, the Rails controller would set `@react_props` to the properties to hydrate the Redux store.
|
|
454
514
|
|
|
455
515
|
**app/views/layouts/application.html.erb**
|
|
456
516
|
```erb
|
|
@@ -480,7 +540,7 @@ See [ReactOnRails JavaScript API](docs/api/javascript-api.md).
|
|
|
480
540
|
|
|
481
541
|
#### Using Rails built-in CSRF protection in JavaScript
|
|
482
542
|
|
|
483
|
-
Rails has built-in protection for Cross-Site Request Forgery (CSRF), see [Rails Documentation](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf). To nicely utilize this feature in JavaScript requests, React on Rails
|
|
543
|
+
Rails has built-in protection for Cross-Site Request Forgery (CSRF), see [Rails Documentation](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf). To nicely utilize this feature in JavaScript requests, React on Rails provides two helpers that can be used as following for POST, PUT or DELETE requests:
|
|
484
544
|
|
|
485
545
|
```js
|
|
486
546
|
import ReactOnRails from 'react-on-rails';
|
|
@@ -495,7 +555,7 @@ header = ReactOnRails.authenticityHeaders(otherHeader);
|
|
|
495
555
|
If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX calls, then these helpers are not needed because the [jquery-ujs](https://github.com/rails/jquery-ujs) library updates header automatically, see [jquery-ujs documentation](https://robots.thoughtbot.com/a-tour-of-rails-jquery-ujs#cross-site-request-forgery-protection).
|
|
496
556
|
|
|
497
557
|
## React Router
|
|
498
|
-
[React Router](https://github.com/reactjs/react-router) is supported, including server
|
|
558
|
+
[React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
|
|
499
559
|
|
|
500
560
|
1. [React on Rails docs for react-router](./docs/additional-reading/react-router.md)
|
|
501
561
|
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).
|
|
@@ -506,10 +566,10 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
|
|
|
506
566
|
* `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
|
|
507
567
|
* `npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
|
|
508
568
|
* See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
|
|
509
|
-
* If you're using the node server for server rendering, you may want to do your own AWS install. We'll have more docs on this in the future. [Get in touch](mailto:justin@shakacode.com) if you're keenly interested in this feature.
|
|
510
569
|
|
|
511
|
-
## Integration with Node
|
|
512
|
-
|
|
570
|
+
## Integration with Node.js for Server Rendering
|
|
571
|
+
|
|
572
|
+
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.
|
|
513
573
|
|
|
514
574
|
## Additional Documentation
|
|
515
575
|
**Try out our new [Documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) for improved readability & reference!**
|
|
@@ -606,19 +666,41 @@ The following companies support open source, and ShakaCode uses their products!
|
|
|
606
666
|
* [JetBrains](https://www.jetbrains.com/)
|
|
607
667
|
* [](https://www.browserstack.com)
|
|
608
668
|
|
|
669
|
+
*If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
|
|
670
|
+
|
|
609
671
|
# FINAL NOTES
|
|
610
672
|
* 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.
|
|
611
673
|
* 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).
|
|
612
|
-
* 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
|
|
674
|
+
* 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.
|
|
613
675
|
|
|
614
676
|
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
615
677
|
|
|
616
678
|
---
|
|
617
679
|
|
|
618
|
-
|
|
680
|
+
*Identical to top of page*
|
|
681
|
+
|
|
682
|
+
## Thank you from Justin Gordon and [ShakaCode](http://www.shakacode.com)
|
|
683
|
+
|
|
684
|
+
Thank you for considering using [React on Rails](https://github.com/shakacode/react_on_rails).
|
|
685
|
+
|
|
686
|
+
* **Video:** [Front-End Sadness to Happiness: The React on Rails Story](https://www.youtube.com/watch?v=SGkTvKRPYrk): History, motivations, philosophy, and overview.
|
|
687
|
+
* *[Click here for talk slides](http://www.shakacode.com/talks).*
|
|
688
|
+
|
|
689
|
+
We at [ShakaCode](http://www.shakacode.com) are a small, boutique, remote-first application development company. We fund this project by:
|
|
690
|
+
|
|
691
|
+
* Providing priority support and training for anything related to React + Webpack + Rails in our [Coaching Program](http://www.shakacode.com/work/shakacode-coaching-plan.pdf).
|
|
692
|
+
* 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.
|
|
693
|
+
* 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).
|
|
694
|
+
* Augmenting your team to get your product completed more efficiently and quickly.
|
|
695
|
+
|
|
696
|
+
My article "[Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9)" provides additional details about our projects.
|
|
697
|
+
|
|
698
|
+
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.
|
|
699
|
+
|
|
700
|
+
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 [Friends and Guests](https://www.friendsandguests.com).
|
|
619
701
|
|
|
620
|
-
|
|
702
|
+
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).
|
|
621
703
|
|
|
622
|
-
|
|
704
|
+
Aloha and best wishes from the ShakaCode team!
|
|
623
705
|
|
|
624
|
-
|
|
706
|
+
------
|
data/Rakefile
CHANGED
|
@@ -17,3 +17,6 @@ task all_but_examples: ["run_rspec:all_but_examples", "lint"]
|
|
|
17
17
|
|
|
18
18
|
desc "Prepare for ci, including node_package, dummy app, and generator examples"
|
|
19
19
|
task prepare_for_ci: %w[node_package dummy_apps examples]
|
|
20
|
+
|
|
21
|
+
desc "Runs prepare_for_ci and tasks"
|
|
22
|
+
task ci: [:prepare_for_ci, *tasks]
|
|
@@ -1,169 +1,5 @@
|
|
|
1
1
|
# Node.js for Server Rendering
|
|
2
2
|
|
|
3
|
-
Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains.
|
|
3
|
+
Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains. While often ExecJS with [mini_racer](https://github.com/discourse/mini_racer) is "fast enough", we've heard of other large websites using Node.js for better server rendering performance.
|
|
4
4
|
|
|
5
|
-
If you
|
|
6
|
-
|
|
7
|
-
## Setup of React on Rails with Node.js Server Rendering
|
|
8
|
-
**Warning: this is an experimental feature.**
|
|
9
|
-
|
|
10
|
-
* Every time the webpack bundle changes, you have to restart the server yourself.
|
|
11
|
-
|
|
12
|
-
To do this you need to add a few files and then configure react_on_rails to use NodeJS. Here are the relevant files to add.
|
|
13
|
-
|
|
14
|
-
Node server rendering allows you to use separate NodeJS process as a renderer. The process loads your configured server_bundle_js file and then executes javascript to render the component inside its environment. The communication between rails and node occurs
|
|
15
|
-
via a socket (`client/node/node.sock`)
|
|
16
|
-
|
|
17
|
-
### Getting started
|
|
18
|
-
|
|
19
|
-
### Configuration
|
|
20
|
-
|
|
21
|
-
#### Update the React on Rails Initializer
|
|
22
|
-
|
|
23
|
-
To use node process just set `server_render_method = "NodeJS"` in `config/initializers/react_on_rails.rb`. To change back
|
|
24
|
-
to ExecJS set `server_render_method = "ExecJS"`
|
|
25
|
-
|
|
26
|
-
```ruby
|
|
27
|
-
# app/config/initializers/react_on_rails.rb
|
|
28
|
-
config.server_render_method = "NodeJS"
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
You need to configure the name of the server bundle in two places:
|
|
32
|
-
|
|
33
|
-
1. JavaScript: Change the name of server bundle and adjust yarn start script in `client/node/package.json`
|
|
34
|
-
2. Ruby: The configured server bundle file is defined in `config/react_on_rails.rb`, and you'll have a webpack file that creates this. You maybe using the same file for client rendering.
|
|
35
|
-
|
|
36
|
-
```ruby
|
|
37
|
-
# This is the file used for server rendering of React when using `(prerender: true)`
|
|
38
|
-
# If you are never using server rendering, you may set this to "".
|
|
39
|
-
# If you are using the same file for client and server rendering, having this set probably does
|
|
40
|
-
# not affect performance.
|
|
41
|
-
config.server_bundle_js_file = "webpack-bundle.js"
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
And in `client/node/package.json`
|
|
45
|
-
|
|
46
|
-
```javascript
|
|
47
|
-
// client/node/package.json
|
|
48
|
-
{
|
|
49
|
-
"name": "react_on_rails_node",
|
|
50
|
-
"version": "0.0.0",
|
|
51
|
-
"private": true,
|
|
52
|
-
"scripts": {
|
|
53
|
-
"start": "node ./server.js -s webpack-bundle.js"
|
|
54
|
-
},
|
|
55
|
-
"dependencies": {
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
And you'll need this file: `client/node/server.js`
|
|
61
|
-
|
|
62
|
-
```javascript
|
|
63
|
-
// client/node/server.js
|
|
64
|
-
const net = require('net');
|
|
65
|
-
const fs = require('fs');
|
|
66
|
-
|
|
67
|
-
const bundlePath = '../../app/assets/webpack/';
|
|
68
|
-
let bundleFileName = 'server-bundle.js';
|
|
69
|
-
|
|
70
|
-
let currentArg;
|
|
71
|
-
|
|
72
|
-
class Handler {
|
|
73
|
-
constructor() {
|
|
74
|
-
this.queue = [];
|
|
75
|
-
this.initialized = false;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
initialize() {
|
|
79
|
-
console.log(`Processing ${this.queue.length} pending requests`);
|
|
80
|
-
let callback;
|
|
81
|
-
|
|
82
|
-
// eslint-disable-next-line no-cond-assign
|
|
83
|
-
while (callback = this.queue.pop()) {
|
|
84
|
-
callback();
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
this.initialized = true;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
handle(connection) {
|
|
91
|
-
const callback = () => {
|
|
92
|
-
const terminator = '\r\n\0';
|
|
93
|
-
let request = '';
|
|
94
|
-
connection.setEncoding('utf8');
|
|
95
|
-
connection.on('data', (data) => {
|
|
96
|
-
console.log(`Processing chunk: ${data}`);
|
|
97
|
-
request += data;
|
|
98
|
-
if (data.slice(-terminator.length) === terminator) {
|
|
99
|
-
request = request.slice(0, -terminator.length);
|
|
100
|
-
|
|
101
|
-
// eslint-disable-next-line no-eval
|
|
102
|
-
const response = eval(request);
|
|
103
|
-
connection.write(`${response}${terminator}`);
|
|
104
|
-
request = '';
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
if (this.initialized) {
|
|
110
|
-
callback();
|
|
111
|
-
} else {
|
|
112
|
-
this.queue.push(callback);
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
const handler = new Handler();
|
|
118
|
-
|
|
119
|
-
process.argv.forEach((val) => {
|
|
120
|
-
if (val[0] === '-') {
|
|
121
|
-
currentArg = val.slice(1);
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
if (currentArg === 's') {
|
|
126
|
-
bundleFileName = val;
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
function loadBundle() {
|
|
131
|
-
if (handler.initialized) {
|
|
132
|
-
console.log('Reloading server bundle must be implemented by restarting the node process!');
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* eslint-disable */
|
|
137
|
-
require(bundlePath + bundleFileName);
|
|
138
|
-
/* eslint-enable */
|
|
139
|
-
console.log(`Loaded server bundle: ${bundlePath}${bundleFileName}`);
|
|
140
|
-
handler.initialize();
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
try {
|
|
144
|
-
fs.mkdirSync(bundlePath);
|
|
145
|
-
} catch (e) {
|
|
146
|
-
if (e.code !== 'EEXIST') {
|
|
147
|
-
throw e;
|
|
148
|
-
} else {
|
|
149
|
-
loadBundle();
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
fs.watchFile(bundlePath + bundleFileName, (curr) => {
|
|
154
|
-
if (curr && curr.blocks && curr.blocks > 0) {
|
|
155
|
-
loadBundle();
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
const unixServer = net.createServer((connection) => {
|
|
160
|
-
handler.handle(connection);
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
unixServer.listen('node.sock');
|
|
164
|
-
|
|
165
|
-
process.on('SIGINT', () => {
|
|
166
|
-
unixServer.close();
|
|
167
|
-
process.exit();
|
|
168
|
-
});
|
|
169
|
-
```
|
|
5
|
+
If you want to use a node server for server rendering, [get in touch](mailto:justin@shakacode.com). ShakaCode has built a premium Node rendering server for React on Rails.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
*Note: this doc needs updating to reflect how v8.x+ no longer puts Webpack generated files through the asset pipeline. PR's welcome!*
|
|
2
|
+
|
|
1
3
|
# Using Webpack bundled assets with the Rails Asset Pipeline
|
|
2
4
|
|
|
3
5
|
**If you're looking to use assets in your react components, look no further. This doc is for you.**
|
|
@@ -8,9 +8,8 @@ export default class HelloWorld extends React.Component {
|
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* @param props - Comes from your rails view.
|
|
11
|
-
* @param _railsContext - Comes from React on Rails
|
|
12
11
|
*/
|
|
13
|
-
constructor(props
|
|
12
|
+
constructor(props) {
|
|
14
13
|
super(props);
|
|
15
14
|
|
|
16
15
|
// How to set initial state in ES6 class syntax
|
|
@@ -7,9 +7,7 @@ import HelloWorldContainer from '../containers/HelloWorldContainer';
|
|
|
7
7
|
// See documentation for https://github.com/reactjs/react-redux.
|
|
8
8
|
// This is how you get props from the Rails view into the redux store.
|
|
9
9
|
// This code here binds your smart component to the redux store.
|
|
10
|
-
|
|
11
|
-
// knowing the locale. See the React on Rails documentation for more info on the railsContext
|
|
12
|
-
const HelloWorldApp = (props, _railsContext) => (
|
|
10
|
+
const HelloWorldApp = (props) => (
|
|
13
11
|
<Provider store={configureStore(props)}>
|
|
14
12
|
<HelloWorldContainer />
|
|
15
13
|
</Provider>
|
data/package.json
CHANGED
data/rakelib/node_package.rake
CHANGED
data/rakelib/release.rake
CHANGED
|
@@ -66,9 +66,12 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
|
|
|
66
66
|
sh_in_dir(gem_root, release_it_command)
|
|
67
67
|
|
|
68
68
|
# Release the new gem version
|
|
69
|
-
|
|
69
|
+
unless is_dry_run
|
|
70
|
+
sh_in_dir(gem_root, "gem release")
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
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}")
|
|
74
|
+
sh_in_dir(gem_root, "git commit -am 'Updated spec/dummy/client/package.json latest version'")
|
|
75
|
+
sh_in_dir(gem_root, "git push")
|
|
76
|
+
end
|
|
74
77
|
end
|
data/react_on_rails.gemspec
CHANGED
|
@@ -32,9 +32,10 @@ Gem::Specification.new do |s|
|
|
|
32
32
|
s.add_dependency "rails", ">= 3.2"
|
|
33
33
|
s.add_dependency "addressable"
|
|
34
34
|
|
|
35
|
-
s.add_development_dependency "rails", "~> 5.1.
|
|
35
|
+
s.add_development_dependency "rails", "~> 5.1.2"
|
|
36
36
|
s.add_development_dependency "bundler", "~> 1.10"
|
|
37
37
|
s.add_development_dependency "rake", "~> 10.0"
|
|
38
|
+
s.add_development_dependency "listen"
|
|
38
39
|
s.add_development_dependency "rspec"
|
|
39
40
|
s.add_development_dependency "coveralls"
|
|
40
41
|
s.add_development_dependency "generator_spec"
|
data/webpackConfigLoader.js
CHANGED
|
@@ -55,8 +55,7 @@ const configLoader = (configPath) => {
|
|
|
55
55
|
const configEnv = (process.env.NODE_ENV || process.env.RAILS_ENV || 'development');
|
|
56
56
|
const ymlConfigPath = join(configPath, 'webpacker_lite.yml');
|
|
57
57
|
const configuration = safeLoad(readFileSync(ymlConfigPath, 'utf8'))[configEnv];
|
|
58
|
-
|
|
59
|
-
const devBuild = env !== 'production';
|
|
58
|
+
const devBuild = configEnv !== 'production';
|
|
60
59
|
const hotReloadingHost = configuration.hot_reloading_host || DEFAULT_HOT_RELOADING_HOST;
|
|
61
60
|
|
|
62
61
|
// NOTE: Rails path is hard coded to `/public`
|
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: 8.0.
|
|
4
|
+
version: 8.0.4
|
|
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-
|
|
11
|
+
date: 2017-07-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rainbow
|
|
@@ -86,14 +86,14 @@ dependencies:
|
|
|
86
86
|
requirements:
|
|
87
87
|
- - "~>"
|
|
88
88
|
- !ruby/object:Gem::Version
|
|
89
|
-
version: 5.1.
|
|
89
|
+
version: 5.1.2
|
|
90
90
|
type: :development
|
|
91
91
|
prerelease: false
|
|
92
92
|
version_requirements: !ruby/object:Gem::Requirement
|
|
93
93
|
requirements:
|
|
94
94
|
- - "~>"
|
|
95
95
|
- !ruby/object:Gem::Version
|
|
96
|
-
version: 5.1.
|
|
96
|
+
version: 5.1.2
|
|
97
97
|
- !ruby/object:Gem::Dependency
|
|
98
98
|
name: bundler
|
|
99
99
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -122,6 +122,20 @@ dependencies:
|
|
|
122
122
|
- - "~>"
|
|
123
123
|
- !ruby/object:Gem::Version
|
|
124
124
|
version: '10.0'
|
|
125
|
+
- !ruby/object:Gem::Dependency
|
|
126
|
+
name: listen
|
|
127
|
+
requirement: !ruby/object:Gem::Requirement
|
|
128
|
+
requirements:
|
|
129
|
+
- - ">="
|
|
130
|
+
- !ruby/object:Gem::Version
|
|
131
|
+
version: '0'
|
|
132
|
+
type: :development
|
|
133
|
+
prerelease: false
|
|
134
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
135
|
+
requirements:
|
|
136
|
+
- - ">="
|
|
137
|
+
- !ruby/object:Gem::Version
|
|
138
|
+
version: '0'
|
|
125
139
|
- !ruby/object:Gem::Dependency
|
|
126
140
|
name: rspec
|
|
127
141
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -461,7 +475,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
461
475
|
version: '0'
|
|
462
476
|
requirements: []
|
|
463
477
|
rubyforge_project:
|
|
464
|
-
rubygems_version: 2.6.
|
|
478
|
+
rubygems_version: 2.6.12
|
|
465
479
|
signing_key:
|
|
466
480
|
specification_version: 4
|
|
467
481
|
summary: Rails with react server rendering with webpack.
|