react_on_rails 6.0.5 → 6.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.eslintrc +2 -3
- data/.gitignore +1 -1
- data/.travis.yml +15 -13
- data/CHANGELOG.md +27 -15
- data/{docs/contributor-info/contributing.md → CONTRIBUTING.md} +24 -1
- data/Gemfile +1 -1
- data/KUDOS.md +3 -0
- data/NEWS.md +3 -0
- data/PROJECTS.md +1 -1
- data/README.md +143 -202
- data/app/helpers/react_on_rails_helper.rb +29 -17
- data/docs/additional-reading/node-server-rendering.md +127 -7
- data/docs/additional-reading/rails-assets.md +74 -10
- data/docs/additional-reading/react-router.md +1 -1
- data/docs/additional-reading/server-rendering-tips.md +3 -0
- data/docs/api/javascript-api.md +23 -0
- data/docs/contributor-info/releasing.md +1 -1
- data/docs/misc/doctrine.md +6 -6
- data/docs/tutorial.md +74 -93
- data/lib/generators/USAGE +5 -1
- data/lib/generators/react_on_rails/base_generator.rb +2 -2
- data/lib/generators/react_on_rails/install_generator.rb +8 -0
- data/lib/generators/react_on_rails/node_generator.rb +22 -0
- data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +1 -1
- data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +3 -2
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt +7 -3
- data/lib/generators/react_on_rails/templates/node/base/client/node/package.json +10 -0
- data/lib/generators/react_on_rails/templates/node/base/client/node/server.js +87 -0
- data/lib/react_on_rails/assets_precompile.rb +112 -0
- data/lib/react_on_rails/configuration.rb +1 -1
- data/lib/react_on_rails/server_rendering_pool.rb +1 -0
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
- data/lib/react_on_rails/utils.rb +1 -0
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +3 -2
- data/lib/tasks/assets.rake +10 -73
- data/package.json +9 -7
- metadata +7 -5
- data/Dockerfile_tests +0 -12
- data/docker-compose.yml +0 -11
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 72ff43753d92d5152c1904fefec146611cb131c0
|
4
|
+
data.tar.gz: dc1a7c39e2bc236ddd8c3332658591fa898a0e39
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e23da97d02dcfe67f2696d227af396041622fbed07d9d5da70440c8adb5bfac51d807e099e66d4481b25de215e85e92a1c79e7cd9309539969e4e02a1ddb5b63
|
7
|
+
data.tar.gz: c92cc09eab269a74d6920144eca5ee5803a6521ffca285a6f8588ab9ae7d9dbc58524f01231ceae9afb6c0f2c67d8dce656c4e90158b3a35d5aa4b814b84ed62
|
data/.eslintrc
CHANGED
data/.gitignore
CHANGED
data/.travis.yml
CHANGED
@@ -8,37 +8,40 @@ rvm:
|
|
8
8
|
services:
|
9
9
|
- docker
|
10
10
|
|
11
|
+
cache:
|
12
|
+
bundler: true
|
13
|
+
directories:
|
14
|
+
- node_modules # NPM packages
|
15
|
+
|
11
16
|
gemfile:
|
12
17
|
- spec/dummy/Gemfile
|
13
18
|
|
14
19
|
env:
|
15
|
-
|
20
|
+
global:
|
21
|
+
- RAILS_ENV=test
|
22
|
+
- DRIVER=selenium_chrome
|
23
|
+
- CHROME_BIN=/usr/bin/google-chrome
|
24
|
+
- ENABLE_TURBOLINKS_5=TRUE
|
16
25
|
|
17
26
|
before_install:
|
18
27
|
- sudo apt-get update
|
19
|
-
- curl -L https://github.com/docker/compose/releases/download/1.4.0/docker-compose-`uname -s`-`uname -m` > docker-compose
|
20
|
-
- chmod +x docker-compose
|
21
|
-
- sudo mv docker-compose /usr/local/bin
|
22
28
|
- sudo apt-get install -y xvfb libappindicator1 fonts-liberation
|
23
29
|
- wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
|
24
30
|
- sudo dpkg -i google-chrome*.deb
|
31
|
+
- "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen scn 1600x1200x16"
|
25
32
|
|
26
33
|
install:
|
27
|
-
-
|
28
|
-
-
|
29
|
-
- npm
|
30
|
-
- gem install bundler
|
31
|
-
- bundle install
|
32
|
-
- ENABLE_TURBOLINKS_5=TRUE bundle install
|
34
|
+
- nvm install node
|
35
|
+
- node -v
|
36
|
+
- npm config set spin false
|
33
37
|
- npm install
|
38
|
+
- bundle install
|
34
39
|
- rake dummy_apps
|
35
40
|
- rake examples
|
36
41
|
- rake node_package
|
37
|
-
- docker-compose up lint
|
38
42
|
|
39
43
|
before_script:
|
40
44
|
- "export DISPLAY=:99"
|
41
|
-
- Xvfb :99 -ac -screen scn 1600x1200x16 &
|
42
45
|
|
43
46
|
script:
|
44
47
|
- rake
|
@@ -46,4 +49,3 @@ script:
|
|
46
49
|
notifications:
|
47
50
|
slack:
|
48
51
|
secure: LfcUk4AJ4vAxWwRIyw4tFh8QNbYefMwfG/oLfsN3CdRMWMOtCOHR1GGsRhAOlfVVJ/FvHqVqWj5gK7z7CaO5Uvl7rD3/zJ8QzExKx/iH9yWj55iIPuKLzwFNnBwRpFW/cqyU2lFPPRxGD50BUn3c+qybkuSqtKZ6qtTowwqlxLa5iyM3N95aZp7MEIKCP7cPcnHfLbJyP8wBpotp/rtw62eXM2HIRJJwgjcp+n+My7VFR9DnBXNFf6R91aZHM4U4cHHDbu15HFtH8honVrzK1JQdyqMNHga+j04dFuaS7z9Q369/hsELMOBp/227+Pz7ZRfWZFK4UASguOvyeX7RmGTRpTuWLm1XJeUzfsPZVROecaSVQBve+U7F12yKqilt97QlvRXn2EGyBILqvxtFNNR4S9kgAf72/6EFgiM1TKq7i9zy6lVOnagU2+7amq7UeopX1uoFsUfNKMR7YbgV1WjF0IK95UP0b0/7ZOJlPYgi5zzkQi129qAFWSMmxGk+ZpsttHh/tjJtvAh0A3mHq/zb5w4ub/MbSyZqeDUNgGj72QArOWUFSAStQT1ybsVLeDoKPgOvVq7OV1D64rpcHjBXcqOCit8tDZ+TqkFhcYJo2cITSaqE4zJXn+4F5s7So5O8CyfKYQq+kFJCooYGmfgTUckJpGl7eIvKmL4TN9Q=
|
49
|
-
|
data/CHANGELOG.md
CHANGED
@@ -3,43 +3,54 @@ All notable changes to this project will be documented in this file. Items under
|
|
3
3
|
|
4
4
|
Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
|
5
5
|
|
6
|
-
## [
|
6
|
+
## [6.1.0] 2016-08-21
|
7
7
|
|
8
|
-
## [6.0.5]
|
9
8
|
##### Added
|
10
|
-
-
|
9
|
+
- Node option for installer added as alternative for server rendering [#469](https://github.com/shakacode/react_on_rails/pull/469) by [jbhatab](https://github.com/jbhatab).
|
10
|
+
- Server rendering now supports contexts outside of browser rendering, such as ActionMailer templates [#486](https://github.com/shakacode/react_on_rails/pull/486) by [eacaps](https://github.com/eacaps).
|
11
|
+
- Added authenticityToken() and authenticityHeaders() javascript helpers for easier use when working with CSRF protection tag generated by Rails [#517](https://github.com/shakacode/react_on_rails/pull/517) by [dzirtusss](https://github.com/dzirtusss).
|
12
|
+
- Updated JavaScript error handling on the client side. Errors in client rendering now pass through to the browser [#521](https://github.com/shakacode/react_on_rails/pull/521) by [dzirtusss](https://github.com/dzirtusss).
|
11
13
|
|
12
|
-
## [6.0.4]
|
13
14
|
##### Fixed
|
14
|
-
-
|
15
|
+
- React on Rails now correctly parses single-digit version strings from package.json [#491](https://github.com/shakacode/react_on_rails/pull/491) by [samphilipd ](https://github.com/samphilipd).
|
16
|
+
- Fixed assets symlinking to correctly use filenames with spaces. Begining in [#510](https://github.com/shakacode/react_on_rails/pull/510), ending in [#513](https://github.com/shakacode/react_on_rails/pull/513) by [dzirtusss](https://github.com/dzirtusss).
|
17
|
+
- Check encoding of request's original URL and force it to UTF-8 [#527](https://github.com/shakacode/react_on_rails/pull/527) by [lucke84](https://github.com/lucke84)
|
15
18
|
|
16
|
-
## [6.0.
|
19
|
+
## [6.0.5] - 2016-07-11
|
20
|
+
##### Added
|
21
|
+
- Added better error messages to avoid issues with shared redux stores [#470](https://github.com/shakacode/react_on_rails/pull/470) by by [justin808](https://github.com/justin808).
|
22
|
+
|
23
|
+
## [6.0.4] - 2016-06-13
|
24
|
+
##### Fixed
|
25
|
+
- Added polyfill for clearTimeout which is used by babel-polyfill [#451](https://github.com/shakacode/react_on_rails/pull/451) by [martyphee](https://github.com/martyphee)
|
26
|
+
|
27
|
+
## [6.0.3] - 2016-06-07
|
17
28
|
##### Fixed
|
18
29
|
- Added assets symlinking support on Heroku [#446](https://github.com/shakacode/react_on_rails/pull/446) by [Alexey Karasev](https://github.com/alleycat-at-git).
|
19
30
|
|
20
|
-
## [6.0.2]
|
31
|
+
## [6.0.2] - 2016-06-06
|
21
32
|
##### Fixed
|
22
33
|
- Fix colisions in ids of DOM nodes generated by `react_component` by indexing in using an UUID rather than an auto-increment value. This means that it should be overriden using the `id` parameter of `react_component` if one wants to generate a predictable id (_e.g._ for testing purpose). See [Issue #437](https://github.com/shakacode/react_on_rails/issues/437). Fixed in [#438](https://github.com/shakacode/react_on_rails/pull/438) by [Michael Baudino](https://github.com/michaelbaudino).
|
23
34
|
|
24
|
-
## [6.0.1]
|
35
|
+
## [6.0.1] - 2016-05-27
|
25
36
|
##### Fixed
|
26
37
|
- Allow for older version of manifest.json for older versions of sprockets. See [Issue #435](https://github.com/shakacode/react_on_rails/issues/435). Fixed in [#436](https://github.com/shakacode/react_on_rails/pull/436) by [alleycat-at-git](https://github.com/alleycat-at-git).
|
27
38
|
|
28
|
-
## [6.0.0]
|
39
|
+
## [6.0.0] - 2016-05-25
|
29
40
|
##### Breaking Changes
|
30
|
-
- Added automatic compilation of assets at precompile is now done by ReactOnRails. Thus, you don't need to provide your own assets.rake file that does the precompilation.
|
41
|
+
- Added automatic compilation of assets at precompile is now done by ReactOnRails. Thus, you don't need to provide your own assets.rake file that does the precompilation.
|
31
42
|
[#398](https://github.com/shakacode/react_on_rails/pull/398) by [robwise](https://github.com/robwise), [jbhatab](https://github.com/jbhatab), and [justin808](https://github.com/justin808).
|
32
43
|
- **Migration to v6**
|
33
44
|
- Do not run the generator again if you've already run it.
|
34
45
|
|
35
46
|
- See [shakacode/react-webpack-rails-tutorial/pull/287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287) for an example of upgrading from v5.
|
36
|
-
|
47
|
+
|
37
48
|
- To configure the asset compliation you can either
|
38
49
|
1. Specify a `config/react_on_rails` setting for `npm_build_production_command` to be nil to turn this feature off.
|
39
50
|
2. Specify the script command you want to run to build your production assets, and remove your assets.rake file.
|
40
51
|
|
41
52
|
- If you are using the ReactOnRails test helper, then you will need to add the 'config.npm_build_test_command' to your config to tell react_on_rails what command to run when you run rspec.
|
42
|
-
|
53
|
+
|
43
54
|
- See [shakacode/react-webpack-rails-tutorial #287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287/files) for an upgrade example. The PR has a few comments on the upgrade.
|
44
55
|
|
45
56
|
Here is the addition to the generated config file:
|
@@ -89,10 +100,10 @@ Here is the addition to the generated config file:
|
|
89
100
|
|
90
101
|
## [5.1.1] - 2016-04-04
|
91
102
|
##### Fixed
|
92
|
-
-
|
103
|
+
- Security Fixes: Address failure to sanitize console messages when server rendering and displaying in the browser console. See [#366](https://github.com/shakacode/react_on_rails/pull/366) and [#370](https://github.com/shakacode/react_on_rails/pull/370) by [justin808](https://github.com/justin808)
|
93
104
|
|
94
105
|
##### Added
|
95
|
-
- railsContext includes the port number and a boolean if the code is being run on the server or client.
|
106
|
+
- railsContext includes the port number and a boolean if the code is being run on the server or client.
|
96
107
|
|
97
108
|
## [5.1.0] - 2016-04-03
|
98
109
|
##### Added
|
@@ -353,7 +364,8 @@ Best done with Object destructing:
|
|
353
364
|
##### Fixed
|
354
365
|
- Fix several generator related issues.
|
355
366
|
|
356
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.0
|
367
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.1.0...master
|
368
|
+
[6.1.0]: https://github.com/shakacode/react_on_rails/compare/6.0.5...6.1.0
|
357
369
|
[6.0.5]: https://github.com/shakacode/react_on_rails/compare/6.0.4...6.0.5
|
358
370
|
[6.0.4]: https://github.com/shakacode/react_on_rails/compare/6.0.3...6.0.4
|
359
371
|
[6.0.3]: https://github.com/shakacode/react_on_rails/compare/6.0.2...6.0.3
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# Tips for Contributors
|
2
|
-
|
2
|
+
|
3
|
+
* See [docs/contributor-info/Releasing](./docs/contributor-info/releasing.md) for instructions on releasing.
|
4
|
+
* See other docs in [docs/contributor-info](./docs/contributor-info)
|
3
5
|
|
4
6
|
## Sumary
|
5
7
|
|
@@ -11,6 +13,21 @@ For non-doc fixes:
|
|
11
13
|
* Please address all code review comments.
|
12
14
|
* Ensure that docs are updated accordingly if a feature is added.
|
13
15
|
|
16
|
+
## Commit Messages
|
17
|
+
|
18
|
+
From [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/)
|
19
|
+
|
20
|
+
#### The seven rules of a great git commit message
|
21
|
+
> Keep in mind: This has all been said before.
|
22
|
+
|
23
|
+
1. Separate subject from body with a blank line
|
24
|
+
1. Limit the subject line to 50 characters
|
25
|
+
1. Capitalize the subject line
|
26
|
+
1. Do not end the subject line with a period
|
27
|
+
1. Use the imperative mood in the subject line
|
28
|
+
1. Wrap the body at 72 characters
|
29
|
+
1. Use the body to explain what and why vs. how
|
30
|
+
|
14
31
|
|
15
32
|
## To run tests:
|
16
33
|
* After updating code via git, to prepare all examples and run all tests:
|
@@ -218,3 +235,9 @@ Docker CI and Tests containers have a xvfd server automatically started for head
|
|
218
235
|
Run `docker-compose build ci` to build the CI container. Run `docker-compose run ci` to start all rspec tests and linting. `docker-compose run --entrypoint=/bin/bash` will override the default CI action and place you inside the CI container in a bash session. This is what is run on Travis-CI.
|
219
236
|
|
220
237
|
Run `docker-compose build tests` to build the tests container. Run `docker-compose run tests` to start all RSpec tests.
|
238
|
+
|
239
|
+
# Advice for Project Maintainers and Contributors
|
240
|
+
|
241
|
+
What do project maintainers do? What sort of work is involved? [sstephenson](https://github.com/sstephenson) wrote in the [turbolinks](https://github.com/turbolinks/turbolinks) repo:
|
242
|
+
|
243
|
+
> [Why this is not still fully merged?](https://github.com/turbolinks/turbolinks/pull/124#issuecomment-239826060)
|
data/Gemfile
CHANGED
@@ -21,7 +21,7 @@ gem "scss_lint", require: false
|
|
21
21
|
gem "sdoc", "~> 0.4.0", group: :doc
|
22
22
|
gem "spring"
|
23
23
|
gem "sqlite3"
|
24
|
-
gem "
|
24
|
+
gem "mini_racer"
|
25
25
|
if ENV["ENABLE_TURBOLINKS_5"].nil? || ENV["ENABLE_TURBOLINKS_5"].strip.empty?
|
26
26
|
gem "turbolinks", "2.5.3"
|
27
27
|
else
|
data/KUDOS.md
CHANGED
@@ -4,6 +4,9 @@ I'm looking for quotes on why you like using React on Rails. You might mention a
|
|
4
4
|
|
5
5
|
> Gone are the days of using bower or rails gems to manage front end dependencies! React on Rails provides webpack integration to give us a modern build process, es6 syntax and the entire npm ecosystem of libraries to use, along with view helpers to make React integration with Rails feel better than a cool summer breeze. - [@kalamyty](https://twitter.com/kalamyty)
|
6
6
|
|
7
|
+
### August 9, 2016
|
8
|
+
![2016-08-09_13-39-08](https://cloud.githubusercontent.com/assets/1118459/17543077/bf7c2c6a-5e69-11e6-8370-d714015c0296.png)
|
9
|
+
|
7
10
|
### Compared to Browserify
|
8
11
|
See comments [here](https://lorefnon.me/2015/11/15/a-minimal-setup-for-using-es6-modules-in-rails.html)
|
9
12
|
|
data/NEWS.md
CHANGED
@@ -3,6 +3,9 @@
|
|
3
3
|
*We'll keep a history of the news. A few bullets at the top will also show on the [README.md](./README.md).*
|
4
4
|
|
5
5
|
* Always see the [CHANGELOG.md](./CHANGELOG.md) for the latest project changes.
|
6
|
+
* 2016-08-21: v6.1 ships with serveral new features and bug fixes. See the [Changelog](CHANGELOG.md).
|
7
|
+
* 2016-06-13: 6.0.4 shipped with a critical fix regarding a missing polyfill for `clearTimeout`, used by babel-polyfill.
|
8
|
+
* 2016-06-06: 6.0.2 shipped with a critical fix if you are fragment caching the server generated React.
|
6
9
|
* 2016-05-24: 6.0.0 Released! Simplified generator and install process! See the [CHANGELOG.md](./CHANGELOG.md) for details.
|
7
10
|
* 2016-04-08: 5.2.0 Released! Support for React 15.0 and updates to the Generator.
|
8
11
|
* 2016-03-18: [Slides on React on Rails](http://www.slideshare.net/justingordon/react-on-rails-v4032).
|
data/PROJECTS.md
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
*Please add your project to this list.*
|
4
4
|
|
5
5
|
## Commercial Products Live
|
6
|
+
* **[Friends and Guests](https://www.friendsandguests.com/listings)**, the signature product of [ShakaCode](http://www.shakacode.com), which is a "Network Connecting Hosts and Guests".
|
6
7
|
* **[Blink Inc](https://www.blinkinc.com)**: Website and more built by [ShakaCode](http://www.shakacode.com).
|
7
8
|
* **[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/).
|
8
9
|
* **[Deliveroo](https://deliveroo.co.uk/)**: The leading food delivery site in Europe has gone live with React on Rails, with multi-lingual JavaScript support!
|
@@ -15,7 +16,6 @@
|
|
15
16
|
|
16
17
|
## Commercial Products in Development
|
17
18
|
* **[GuavaPass](https://guavapass.com/)**: Coaching client of [ShakaCode](http://www.shakacode.com) and React on Rails fan!
|
18
|
-
* **Friends and Guests**, the signature product of [ShakaCode](http://www.shakacode.com), which is a "Social Network Connecting Hosts and Guests". *Coming soon!*
|
19
19
|
* **[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!
|
20
20
|
|
21
21
|
|
data/README.md
CHANGED
@@ -1,70 +1,36 @@
|
|
1
1
|
[![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails) [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
|
2
2
|
|
3
|
+
**For a complete example of this gem, see our live demo at [www.reactrails.com](http://www.reactrails.com). ([Source Code](https://github.com/shakacode/react-webpack-rails-tutorial))**
|
3
4
|
|
4
|
-
Aloha from Justin Gordon and the [ShakaCode](http://www.shakacode.com) Team! We
|
5
|
+
Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects. If you like **React on Rails**, please consider contacting me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for React on Rails. [Click here](http://www.shakacode.com/work/index.html) for more information.
|
5
6
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
7
|
+
We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing react-native iOS and Android apps!
|
8
|
+
|
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
|
+
|
11
|
+
Your support keeps this project going.
|
12
|
+
|
13
|
+
(Want to become a contributor? [Contact us](mailto:contact@shakacode.com) for an Slack team invite! Also, see ["easy" issues](https://github.com/shakacode/react_on_rails/labels/easy) and [issues for the full tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/issues?q=is%3Aissue+is%3Aopen+label%3Aeasy).)
|
13
14
|
|
14
15
|
# NEWS
|
15
|
-
* 2016-
|
16
|
-
* 2016-
|
16
|
+
* 2016-08-21: v6.1 ships with serveral new features and bug fixes. See the [Changelog](CHANGELOG.md).
|
17
|
+
* 2016-07-28: If you're doing server rendering, be sure to use mini\_racer! See [issues/428](https://github.com/shakacode/react_on_rails/issues/428). It's supposedly much faster than `therubyracer`.
|
17
18
|
* *See [NEWS.md](NEWS.md) for more notes over time.*
|
18
19
|
|
19
20
|
# React on Rails
|
20
21
|
|
21
|
-
**Project Objective**: To provide an opinionated and optimal framework for integrating
|
22
|
+
**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).
|
22
23
|
|
23
24
|
React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x and greater is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-redux) are supported as well, also with server rendering, using either **execJS** or a [Node.js server](https://github.com/shakacode/react_on_rails/blob/master/docs%2Fadditional-reading%2Fnode-server-rendering.md). See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all!
|
24
25
|
|
25
|
-
##
|
26
|
-
Please see [Getting Started](#getting-started) for how to set up your Rails project for React on Rails to understand how `react_on_rails` can see your ReactComponents.
|
27
|
-
|
28
|
-
+ *Normal Mode (React component will be rendered on client):*
|
29
|
-
|
30
|
-
```erb
|
31
|
-
<%= react_component("HelloWorldApp", props: @some_props) %>
|
32
|
-
```
|
33
|
-
+ *Server-Side Rendering (React component is first rendered into HTML on the server):*
|
34
|
-
|
35
|
-
```erb
|
36
|
-
<%= react_component("HelloWorldApp", props: @some_props, prerender: true) %>
|
37
|
-
```
|
38
|
-
|
39
|
-
+ The `component_name` parameter is a string matching the name you used to globally expose your React component. So, in the above examples, if you had a React component named "HelloWorldApp," you would register it with the following lines:
|
40
|
-
|
41
|
-
```js
|
42
|
-
import ReactOnRails from 'react-on-rails';
|
43
|
-
import HelloWorldApp from './HelloWorldApp';
|
44
|
-
ReactOnRails.register({ HelloWorldApp });
|
45
|
-
```
|
46
|
-
|
47
|
-
Exposing your component in this way is how React on Rails is able to reference your component from a Rails view. You can expose as many components as you like, as long as their names do not collide. See below for the details of how you expose your components via the react_on_rails webpack configuration.
|
48
|
-
|
49
|
-
+ `@some_props` can be either a hash or JSON string. This is an optional argument assuming you do not need to pass any options (if you want to pass options, such as `prerender: true`, but you do not want to pass any properties, simply pass an empty hash `{}`). This will make the data available in your component:
|
50
|
-
|
51
|
-
```ruby
|
52
|
-
# Rails View
|
53
|
-
<%= react_component("HelloWorldApp", props: { name: "Stranger" }) %>
|
54
|
-
```
|
55
|
-
|
56
|
-
```javascript
|
57
|
-
// inside your React component
|
58
|
-
this.props.name // "Stranger"
|
59
|
-
```
|
60
|
-
|
61
|
-
## Documentation
|
26
|
+
## Table of Contents
|
62
27
|
|
63
28
|
+ [Features](#features)
|
64
29
|
+ [Why Webpack?](#why-webpack)
|
65
30
|
+ [Getting Started](#getting-started)
|
66
31
|
- [Installation Summary](#installation-summary)
|
67
32
|
- [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
|
33
|
+
- [Including your React Component in your Rails Views](#including-your-react-component-in-your-rails-views)
|
68
34
|
+ [How it Works](#how-it-works)
|
69
35
|
- [Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
|
70
36
|
- [Building the Bundles](#building-the-bundles)
|
@@ -75,7 +41,7 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
|
|
75
41
|
- [React-Router](#react-router)
|
76
42
|
- [Deployment](#deployment)
|
77
43
|
+ [Integration with Node](#integration-with-node)
|
78
|
-
+ [Additional
|
44
|
+
+ [Additional Documentation](#additional-documentation)
|
79
45
|
+ [Contributing](#contributing)
|
80
46
|
+ [License](#license)
|
81
47
|
+ [Authors](#authors)
|
@@ -104,6 +70,8 @@ Universal React with Rails: Part I](https://medium.com/@alexfedoseev/isomorphic-
|
|
104
70
|
We're definitely not doing that. With react_on_rails, webpack is mainly generating a nice JavaScript file for inclusion into `application.js`. We're going to KISS. And that's all relative given how much there is to get right in an enterprise class web application.
|
105
71
|
|
106
72
|
## Getting Started
|
73
|
+
|
74
|
+
**For more detailed instructions**, see the [React on Rails Basic Tutorial](docs/tutorial.md).
|
107
75
|
1. Add the following to your Gemfile and bundle install.
|
108
76
|
|
109
77
|
```ruby
|
@@ -146,6 +114,41 @@ See the [Installation Overview](docs/basics/installation-overview.md) for a conc
|
|
146
114
|
|
147
115
|
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.
|
148
116
|
|
117
|
+
### Including your React Component in your Rails Views
|
118
|
+
|
119
|
+
+ *Normal Mode (React component will be rendered on client):*
|
120
|
+
|
121
|
+
```erb
|
122
|
+
<%= react_component("HelloWorldApp", props: @some_props) %>
|
123
|
+
```
|
124
|
+
+ *Server-Side Rendering (React component is first rendered into HTML on the server):*
|
125
|
+
|
126
|
+
```erb
|
127
|
+
<%= react_component("HelloWorldApp", props: @some_props, prerender: true) %>
|
128
|
+
```
|
129
|
+
|
130
|
+
+ 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 "HelloWorldApp," you would register it with the following lines:
|
131
|
+
|
132
|
+
```js
|
133
|
+
import ReactOnRails from 'react-on-rails';
|
134
|
+
import HelloWorldApp from './HelloWorldApp';
|
135
|
+
ReactOnRails.register({ HelloWorldApp });
|
136
|
+
```
|
137
|
+
|
138
|
+
Exposing your component in this way is how React on Rails is able to reference your component from a Rails view. You can expose as many components as you like, as long as their names do not collide. See below for the details of how you expose your components via the react_on_rails webpack configuration.
|
139
|
+
|
140
|
+
+ `@some_props` can be either a hash or JSON string. This is an optional argument assuming you do not need to pass any options (if you want to pass options, such as `prerender: true`, but you do not want to pass any properties, simply pass an empty hash `{}`). This will make the data available in your component:
|
141
|
+
|
142
|
+
```ruby
|
143
|
+
# Rails View
|
144
|
+
<%= react_component("HelloWorldApp", props: { name: "Stranger" }) %>
|
145
|
+
```
|
146
|
+
|
147
|
+
```javascript
|
148
|
+
// inside your React component
|
149
|
+
this.props.name // "Stranger"
|
150
|
+
```
|
151
|
+
|
149
152
|
## NPM
|
150
153
|
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:
|
151
154
|
|
@@ -161,9 +164,9 @@ The generator installs your webpack files in the `client` folder. Foreman uses w
|
|
161
164
|
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.
|
162
165
|
|
163
166
|
### Client-Side Rendering vs. Server-Side Rendering
|
164
|
-
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`.
|
167
|
+
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`.
|
165
168
|
|
166
|
-
Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [
|
169
|
+
Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you (once we complete [#501](https://github.com/shakacode/react_on_rails/issues/501)).
|
167
170
|
|
168
171
|
In the following screenshot you can see the 3 parts of React on Rails rendering:
|
169
172
|
|
@@ -201,11 +204,11 @@ and for a store:
|
|
201
204
|
reduxStore = MyReduxStore(props, railsContext);
|
202
205
|
```
|
203
206
|
|
204
|
-
Note, you never make these calls. This is what React on Rails does when either server or client rendering. You'll be
|
207
|
+
Note, you never make these calls. This is what React on Rails does when either server or client rendering. You'll be defining functions that take these params and return a React component or a Redux Store.
|
205
208
|
|
206
209
|
(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.)
|
207
210
|
|
208
|
-
The `railsContext` has: (see implementation in file react_on_rails_helper.rb
|
211
|
+
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).
|
209
212
|
|
210
213
|
```ruby
|
211
214
|
{
|
@@ -284,7 +287,7 @@ This is an example of how to expose a component to the `react_component` view he
|
|
284
287
|
#### Different Server-Side Rendering Code (and a Server Specific Bundle)
|
285
288
|
|
286
289
|
You may want different initialization for your server rendered components. For example, if you have 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!
|
287
|
-
|
290
|
+
|
288
291
|
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. 'serverHelloWorldApp.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
|
289
292
|
|
290
293
|
## ReactOnRails View Helpers API
|
@@ -309,7 +312,7 @@ react_component(component_name,
|
|
309
312
|
+ **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.
|
310
313
|
+ **prerender:** enable server-side rendering of component. Set to false when debugging!
|
311
314
|
+ **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.
|
312
|
-
+ **html_options:** Any other html options to get placed on the added div for the component.
|
315
|
+
+ **html_options:** Any other html options to 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 styling of `display:inline-block`.
|
313
316
|
+ **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 so both the railsContext and your props. On the server, you only see the railsContext being logged.
|
314
317
|
+ **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.
|
315
318
|
+ **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.
|
@@ -340,7 +343,7 @@ Place this view helper (no parameters) at the end of your shared layout. This te
|
|
340
343
|
Note, you don't need to separately initialize your redux store. However, it's recommended for the two following use cases:
|
341
344
|
|
342
345
|
1. You want to have multiple components that access the same store.
|
343
|
-
2. You want to place the props to hydrate the client side stores at the very end of your HTML
|
346
|
+
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.
|
344
347
|
|
345
348
|
### Generator Functions
|
346
349
|
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.
|
@@ -349,14 +352,14 @@ Why would you create a function that returns a React component? For example, you
|
|
349
352
|
`server_render_js(js_expression, options = {})`
|
350
353
|
|
351
354
|
+ 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
|
352
|
-
+ Currently the only option you may pass is `replay_console` (boolean)
|
355
|
+
+ Currently, the only option you may pass is `replay_console` (boolean)
|
353
356
|
|
354
357
|
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.
|
355
358
|
|
356
359
|
## Multiple React Components on a Page with One Store
|
357
|
-
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. In addition, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like
|
360
|
+
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. In addition, 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.
|
358
361
|
|
359
|
-
Suppose the Redux store is called `appStore`, and you have 3 React components that each
|
362
|
+
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.
|
360
363
|
|
361
364
|
You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note, this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store:
|
362
365
|
|
@@ -410,7 +413,23 @@ Components are created as [stateless function(al) components](https://facebook.g
|
|
410
413
|
*Note:* You will not be doing any partial updates to the Redux store when loading a new page. When the page content loads, React on Rails will rehydrate a new version of the store with whatever props are placed on the page.
|
411
414
|
|
412
415
|
## ReactOnRails JavaScript API
|
413
|
-
See [ReactOnRails
|
416
|
+
See [ReactOnRails JavaScript API](docs/api/javascript-api.md).
|
417
|
+
|
418
|
+
#### Using Rails built-in CSRF protection in JavaScript
|
419
|
+
|
420
|
+
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 is offerring two helpers that can be used as following for POST, PULL or DELETE requests:
|
421
|
+
|
422
|
+
```
|
423
|
+
import ReactOnRails from 'react-on-rails';
|
424
|
+
|
425
|
+
// reads from DOM csrf token generated by Rails in <%= csrf_meta_tags %>
|
426
|
+
csrfToken = ReactOnRails.authenticityToken();
|
427
|
+
|
428
|
+
// compose Rails specific request header as following { X-CSRF-Token: csrfToken, X-Requested-With: XMLHttpRequest }
|
429
|
+
header = ReactOnRails.authenticityHeaders(otherHeader);
|
430
|
+
```
|
431
|
+
|
432
|
+
If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX calls, than 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).
|
414
433
|
|
415
434
|
## React Router
|
416
435
|
[React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See:
|
@@ -419,146 +438,62 @@ See [ReactOnRails JavaScriptAPI](docs/api/javascript-api.md).
|
|
419
438
|
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).
|
420
439
|
|
421
440
|
## Deployment
|
422
|
-
* 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/react_on_rails.rb](config/react_on_rails.rb).
|
441
|
+
* 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).
|
442
|
+
* `config.symlink_non_digested_assets_regex`: Set to nil to turn off the setup of non-js assets.
|
443
|
+
* `npm_build_production_command`: Set to nil to turn off the precompilation of the js assets.
|
423
444
|
* See the [Heroku Deployment](docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku.
|
424
445
|
* 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.
|
425
446
|
|
426
447
|
## Integration with Node
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
console.log('Processing ' + this.queue.length + ' pending requests');
|
477
|
-
var callback;
|
478
|
-
while (callback = this.queue.pop()) {
|
479
|
-
callback();
|
480
|
-
}
|
481
|
-
|
482
|
-
this.initialized = true;
|
483
|
-
};
|
484
|
-
|
485
|
-
var handler = new Handler();
|
486
|
-
|
487
|
-
process.argv.forEach((val) => {
|
488
|
-
if (val[0] == '-') {
|
489
|
-
currentArg = val.slice(1);
|
490
|
-
return;
|
491
|
-
}
|
492
|
-
|
493
|
-
if (currentArg == 's') {
|
494
|
-
bundleFileName = val;
|
495
|
-
}
|
496
|
-
});
|
497
|
-
|
498
|
-
try {
|
499
|
-
fs.mkdirSync(bundlePath);
|
500
|
-
} catch (e) {
|
501
|
-
if (e.code != 'EEXIST') throw e;
|
502
|
-
}
|
503
|
-
|
504
|
-
fs.watchFile(bundlePath + bundleFileName, (curr) => {
|
505
|
-
if (curr && curr.blocks && curr.blocks > 0) {
|
506
|
-
if (handler.initialized) {
|
507
|
-
console.log('Reloading server bundle must be implemented by restarting the node process!');
|
508
|
-
return;
|
509
|
-
}
|
510
|
-
|
511
|
-
require(bundlePath + bundleFileName);
|
512
|
-
console.log('Loaded server bundle: ' + bundlePath + bundleFileName);
|
513
|
-
handler.initialize();
|
514
|
-
}
|
515
|
-
});
|
516
|
-
|
517
|
-
var unixServer = net.createServer(function (connection) {
|
518
|
-
handler.handle(connection);
|
519
|
-
});
|
520
|
-
|
521
|
-
unixServer.listen('node.sock');
|
522
|
-
|
523
|
-
process.on('SIGINT', () => {
|
524
|
-
unixServer.close();
|
525
|
-
process.exit();
|
526
|
-
});
|
527
|
-
|
528
|
-
```
|
529
|
-
|
530
|
-
The last thing you'll need to do is change the server_render_method to "NodeJS".
|
531
|
-
|
532
|
-
```ruby
|
533
|
-
# app/config/initializers/react_on_rails.rb
|
534
|
-
config.server_render_method = "NodeJS"
|
535
|
-
```
|
536
|
-
|
537
|
-
## Additional Reading
|
538
|
-
+ [JavaScript API](docs/api/javascript-api.md)
|
539
|
-
+ [Ruby API](docs/api/ruby-api.md)
|
540
|
-
+ [Setting up Hot Reloading during Rails Development, API docs](docs/api/ruby-api-hot-reload-view-helpers.md)
|
541
|
-
+ [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
|
542
|
-
+ [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
543
|
-
+ [Installation Overview](docs/basics/installation-overview.md)
|
544
|
-
+ [Migration from react-rails](docs/basics/migrating-from-react-rails.md)
|
545
|
-
+ [Babel](docs/additional-reading/babel.md)
|
546
|
-
+ [Heroku Deployment](docs/additional-reading/heroku-deployment.md)
|
547
|
-
+ [Manual Installation](docs/additional-reading/manual-installation.md)
|
548
|
-
+ [Hot Reloading of Assets For Rails Development](docs/additional-reading/hot-reloading-rails-development.md)
|
549
|
-
+ [Node Dependencies and NPM](docs/additional-reading/node-dependencies-and-npm.md)
|
550
|
-
+ [React Router](docs/additional-reading/react-router.md)
|
551
|
-
+ [RSpec Configuration](docs/additional-reading/rspec-configuration.md)
|
552
|
-
+ [Server Rendering Tips](docs/additional-reading/server-rendering-tips.md)
|
553
|
-
+ [Rails View Rendering from Inline JavaScript](docs/additional-reading/rails_view_rendering_from_inline_javascript.md)
|
554
|
-
+ [Tips](docs/additional-reading/tips.md)
|
555
|
-
+ [Tutorial for v2.0](docs/tutorial-v2.md), deployed [here](https://shakacode-react-on-rails.herokuapp.com/).
|
556
|
-
+ [Turbolinks](docs/additional-reading/turbolinks.md)
|
557
|
-
+ [Webpack Configuration](docs/additional-reading/webpack.md)
|
558
|
-
+ [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
|
559
|
-
+ [Changelog](CHANGELOG.md)
|
560
|
-
+ [Projects](PROJECTS.md)
|
561
|
-
+ [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server)
|
448
|
+
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. We've found that using ExecJS with [mini_racer](https://github.com/discourse/mini_racer) to be "fast enough" so far. That being said, we've heard of other large websites using Node.js for better server rendering performance. See [Node.js for Server Rendering](docs/additional-reading/node-server-rendering.md) for more information.
|
449
|
+
|
450
|
+
## Additional Documentation
|
451
|
+
+ **Rails**
|
452
|
+
+ [Rails Assets](docs/additional-reading/rails-assets.md)
|
453
|
+
+ [Rails View Rendering from Inline JavaScript](docs/additional-reading/rails_view_rendering_from_inline_javascript.md)
|
454
|
+
+ [RSpec Configuration](docs/additional-reading/rspec-configuration.md)
|
455
|
+
+ [Turbolinks](docs/additional-reading/turbolinks.md)
|
456
|
+
|
457
|
+
+ **Javascript**
|
458
|
+
+ [Node Dependencies and NPM](docs/additional-reading/node-dependencies-and-npm.md)
|
459
|
+
+ [Babel](docs/additional-reading/babel.md)
|
460
|
+
+ [React Router](docs/additional-reading/react-router.md)
|
461
|
+
+ [React & Redux](docs/additional-reading/react-and-redux.md)
|
462
|
+
+ [Webpack](docs/additional-reading/webpack.md)
|
463
|
+
+ [Webpack Configuration](docs/additional-reading/webpack.md)
|
464
|
+
+ [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
|
465
|
+
+ [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server.md)
|
466
|
+
+ [Node Server Rendering](docs/additional-reading/node-server-rendering.md)
|
467
|
+
+ [Server Rendering Tips](docs/additional-reading/server-rendering-tips.md)
|
468
|
+
|
469
|
+
+ **Development**
|
470
|
+
+ [React on Rails Basic Installation Tutorial](docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
|
471
|
+
+ [Installation Overview](docs/basics/installation-overview.md)
|
472
|
+
+ [Migration from react-rails](docs/basics/migrating-from-react-rails.md)
|
473
|
+
+ [Recommended Project Structure](docs/additional-reading/recommended-project-structure.md)
|
474
|
+
+ [Generator Tips](docs/basics/generator.md)
|
475
|
+
+ [Hot Reloading of Assets For Rails Development](docs/additional-reading/hot-reloading-rails-development.md)
|
476
|
+
+ [Heroku Deployment](docs/additional-reading/heroku-deployment.md)
|
477
|
+
+ [Updating Dependencies](docs/additional-reading/updating-dependencies.md)
|
478
|
+
|
479
|
+
+ **API**
|
480
|
+
+ [JavaScript API](docs/api/javascript-api.md)
|
481
|
+
+ [Ruby API](docs/api/ruby-api.md)
|
482
|
+
+ [Setting up Hot Reloading during Rails Development, API docs](docs/api/ruby-api-hot-reload-view-helpers.md)
|
483
|
+
|
484
|
+
+ **[CONTRIBUTING](CONTRIBUTING.MD)**
|
485
|
+
+ [Generator Testing](docs/contributor-info/generator-testing.md)
|
486
|
+
+ [Linting](docs/contributor-info/linters.md)
|
487
|
+
+ [Releasing](docs/contributor-info/releasing.md)
|
488
|
+
|
489
|
+
+ **Misc**
|
490
|
+
+ [Tips](docs/additional-reading/tips.md)
|
491
|
+
+ [Changelog](CHANGELOG.md)
|
492
|
+
+ [Projects](PROJECTS.md)
|
493
|
+
+ [Shaka Code Style](docs/coding-style/style.md)
|
494
|
+
+ [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v4032)
|
495
|
+
+ [Code of Conduct](docs/misc/code_of_conduct.md)
|
496
|
+
+ [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
562
497
|
|
563
498
|
## Demos
|
564
499
|
+ [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
|
@@ -575,9 +510,9 @@ config.server_render_method = "NodeJS"
|
|
575
510
|
+ Node 5.5 or greater
|
576
511
|
|
577
512
|
## Contributing
|
578
|
-
Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant Code of Conduct](docs/code_of_conduct.md)).
|
513
|
+
Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant Code of Conduct](docs/misc/code_of_conduct.md)).
|
579
514
|
|
580
|
-
See [Contributing](
|
515
|
+
See [Contributing](CONTRIBUTING.md) to get started.
|
581
516
|
|
582
517
|
## License
|
583
518
|
The gem is available as open source under the terms of the [MIT License](docs/LICENSE).
|
@@ -591,10 +526,16 @@ The gem project started with [Justin Gordon](https://github.com/justin808/) pair
|
|
591
526
|
|
592
527
|
We owe much gratitude to the work of the [react-rails gem](https://github.com/reactjs/react-rails).
|
593
528
|
|
594
|
-
|
529
|
+
# FINAL NOTES
|
530
|
+
* 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.
|
531
|
+
* 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](http://forum.shakacode.com/c/rails/ReactOnRails).
|
532
|
+
|
533
|
+
---
|
534
|
+
|
535
|
+
Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects. If you like **React on Rails**, please consider contacting me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for React on Rails. [Click here](http://www.shakacode.com/work/index.html) for more information.
|
595
536
|
|
596
|
-
|
537
|
+
We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing react-native iOS and Android apps!
|
597
538
|
|
598
|
-
|
539
|
+
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!
|
599
540
|
|
600
|
-
|
541
|
+
Your support keeps this project going.
|