react_on_rails 12.4.0 → 13.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.circleci/config.yml +3 -1
- data/.github/ISSUE_TEMPLATE/bug_report.md +23 -0
- data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
- data/.github/workflows/main.yml +3 -3
- data/.gitignore +0 -3
- data/.prettierignore +2 -0
- data/CHANGELOG.md +39 -2
- data/Gemfile.development_dependencies +7 -6
- data/REACT-ON-RAILS-PRO-LICENSE +1 -1
- data/README.md +20 -13
- data/SUMMARY.md +9 -0
- data/docs/deployment/heroku-deployment.md +16 -5
- data/docs/guides/configuration.md +29 -15
- data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +4 -4
- data/docs/guides/how-react-on-rails-works.md +1 -2
- data/docs/guides/rspec-configuration.md +1 -1
- data/docs/guides/tutorial.md +27 -27
- data/docs/guides/upgrading-react-on-rails.md +15 -0
- data/docs/guides/webpack-configuration.md +1 -1
- data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md +2 -2
- data/lib/generators/react_on_rails/base_generator.rb +55 -10
- data/lib/generators/react_on_rails/generator_helper.rb +4 -0
- data/lib/generators/react_on_rails/templates/.eslintrc +3 -1
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -8
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static +9 -0
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +2 -1
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css +4 -0
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js +5 -0
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js +8 -0
- data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +1 -0
- data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt +32 -0
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +3 -3
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt +17 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt +15 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt +25 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt +9 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt +117 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js.tt +6 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/webpack.config.js.tt +15 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt +36 -0
- data/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml +62 -0
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +2 -1
- data/lib/react_on_rails/configuration.rb +40 -41
- data/lib/react_on_rails/helper.rb +18 -17
- data/lib/react_on_rails/json_parse_error.rb +1 -1
- data/lib/react_on_rails/locales/base.rb +1 -3
- data/lib/react_on_rails/prerender_error.rb +5 -2
- data/lib/react_on_rails/react_component/render_options.rb +14 -0
- data/lib/react_on_rails/server_rendering_js_code.rb +13 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +27 -10
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +3 -3
- data/lib/react_on_rails/test_helper.rb +2 -2
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/webpacker_utils.rb +2 -7
- data/lib/tasks/assets.rake +5 -47
- data/lib/tasks/locale.rake +1 -2
- data/package.json +1 -1
- data/rakelib/example_type.rb +10 -3
- data/rakelib/examples.rake +3 -5
- data/rakelib/release.rake +7 -1
- data/react_on_rails.gemspec +2 -3
- data/yarn.lock +117 -71
- metadata +22 -21
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr +0 -26
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d0c8e1ea64a37bf952902b50d8336916e2d579f8a2e4f04e2467bd750d8418d7
|
|
4
|
+
data.tar.gz: 388204125e919bb352bb14df64ab67549459c2f63c416e6dc98de39daccf2395
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b59cea6f171d0734b118238b2b7cc1b6cf7573ea47e77716f4175d9fc69dc896d175cc331c064f6dad563cbe5a8474e81ae55568b455e152f7674b15e1670961
|
|
7
|
+
data.tar.gz: 1f7a8895a3f90eff53089451c79a27bc920ac4488bb9475bdd46373b467e10ca6d8ebe445e715cdb86e50590b27da9a9ca99aa455c724be3cd85a83f8065701d
|
data/.circleci/config.yml
CHANGED
|
@@ -55,7 +55,7 @@ aliases:
|
|
|
55
55
|
command: |
|
|
56
56
|
gem install bundler
|
|
57
57
|
echo "Bundler version: "; bundle --version
|
|
58
|
-
cd spec/dummy && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
58
|
+
cd spec/dummy && bundle lock --add-platform 'x86_64-linux' && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
59
59
|
|
|
60
60
|
# Install ruby gems unless existing set of gems is satisfying bundler.
|
|
61
61
|
- &install-package-ruby-gems
|
|
@@ -63,6 +63,7 @@ aliases:
|
|
|
63
63
|
command: |
|
|
64
64
|
gem install bundler
|
|
65
65
|
echo "Bundler version: "; bundle --version
|
|
66
|
+
bundle lock --add-platform 'x86_64-linux'
|
|
66
67
|
bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
67
68
|
|
|
68
69
|
# Restore node_modules dir from cache using yarn.lock checksum as a key.
|
|
@@ -316,6 +317,7 @@ workflows:
|
|
|
316
317
|
- build-dummy-app-webpack-test-bundles:
|
|
317
318
|
requires:
|
|
318
319
|
- install-dummy-app-node-packages
|
|
320
|
+
- install-dummy-app-ruby-gems
|
|
319
321
|
- package-js-tests:
|
|
320
322
|
requires:
|
|
321
323
|
- install-package-node-packages
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Bug report
|
|
3
|
+
about: Create a report to help us improve
|
|
4
|
+
title: ''
|
|
5
|
+
labels: ''
|
|
6
|
+
assignees: ''
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open [a discussion](https://github.com/shakacode/react_on_rails/discussions).
|
|
11
|
+
|
|
12
|
+
## Environment
|
|
13
|
+
|
|
14
|
+
1. Ruby version:
|
|
15
|
+
2. Rails version:
|
|
16
|
+
3. Webpacker version:
|
|
17
|
+
4. React on Rails version:
|
|
18
|
+
|
|
19
|
+
## Expected behavior
|
|
20
|
+
|
|
21
|
+
## Actual behavior
|
|
22
|
+
|
|
23
|
+
## Small, reproducible repo
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Feature request
|
|
3
|
+
about: Suggest an idea for this project
|
|
4
|
+
title: ''
|
|
5
|
+
labels: ''
|
|
6
|
+
assignees: ''
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
**Is your feature request related to a problem? Please describe.**
|
|
11
|
+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
|
12
|
+
|
|
13
|
+
**Describe the solution you'd like**
|
|
14
|
+
A clear and concise description of what you want to happen.
|
|
15
|
+
|
|
16
|
+
**Describe alternatives you've considered**
|
|
17
|
+
A clear and concise description of any alternative solutions or features you've considered.
|
|
18
|
+
|
|
19
|
+
**Additional context**
|
|
20
|
+
Add any other context or screenshots about the feature request here.
|
data/.github/workflows/main.yml
CHANGED
|
@@ -55,7 +55,7 @@ jobs:
|
|
|
55
55
|
path: spec/dummy/vendor/bundle
|
|
56
56
|
key: v4-dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}
|
|
57
57
|
- name: Install Ruby Gems for dummy app
|
|
58
|
-
run: cd spec/dummy && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
58
|
+
run: cd spec/dummy && bundle lock --add-platform 'x86_64-linux' && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
59
59
|
- name: Build test bundles for dummy app
|
|
60
60
|
run: cd spec/dummy && yarn run build:test
|
|
61
61
|
- id: get-sha
|
|
@@ -131,9 +131,9 @@ jobs:
|
|
|
131
131
|
- name: yalc add react-on-rails
|
|
132
132
|
run: cd spec/dummy && yalc add react-on-rails
|
|
133
133
|
- name: Install Ruby Gems for package
|
|
134
|
-
run: bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
134
|
+
run: bundle lock --add-platform 'x86_64-linux' && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
135
135
|
- name: Install Ruby Gems for dummy app
|
|
136
|
-
run: cd spec/dummy && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
136
|
+
run: cd spec/dummy && bundle lock --add-platform 'x86_64-linux' && bundle check --path=vendor/bundle || bundle install --path=vendor/bundle --jobs=4 --retry=3
|
|
137
137
|
- name: Ensure minimum required Chrome version
|
|
138
138
|
run: |
|
|
139
139
|
echo -e "Already installed $(google-chrome --version)\n"
|
data/.gitignore
CHANGED
data/.prettierignore
CHANGED
data/CHANGELOG.md
CHANGED
|
@@ -16,6 +16,38 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
|
|
|
16
16
|
Changes since last non-beta release.
|
|
17
17
|
|
|
18
18
|
*Please add entries here for your pull requests that are not yet released.*
|
|
19
|
+
### [13.0.0] - 2022-02-08
|
|
20
|
+
#### Breaking
|
|
21
|
+
- Removed webpacker as a dependency. Add gem Shakapacker to your project.
|
|
22
|
+
|
|
23
|
+
#### Fixed
|
|
24
|
+
- Propper throwing of exceptions.
|
|
25
|
+
- Default configuration better handles test env.
|
|
26
|
+
|
|
27
|
+
### [12.6.0] - 2022-01-22
|
|
28
|
+
|
|
29
|
+
### Added
|
|
30
|
+
- A `rendering_props_extension` configuration which takes a module with an `adjust_props_for_client_side_hydration` method, which is used to process props differently for server/client if `prerender` is set to `true`. [PR 1413](https://github.com/shakacode/react_on_rails/pull/1413) by [gscarv13](https://github.com/gscarv13) & [judahmeek](https://github.com/judahmeek).
|
|
31
|
+
|
|
32
|
+
### [12.5.2] - 2021-12-29
|
|
33
|
+
### Fixed
|
|
34
|
+
- Usage of config.build_production_command for custom command for production builds fixed. [PR 1415](https://github.com/shakacode/react_on_rails/pull/1415) by [judahmeek](https://github.com/judahmeek).
|
|
35
|
+
|
|
36
|
+
### [12.5.1] - 2021-12-27
|
|
37
|
+
|
|
38
|
+
### Fixed
|
|
39
|
+
- A fatal server rendering error if running an ReactOnRails >=12.4.0 with ReactOnRails Pro <2.4.0. [PR 1412](https://github.com/shakacode/react_on_rails/pull/1412) by [judahmeek](https://github.com/judahmeek).
|
|
40
|
+
|
|
41
|
+
### [12.5.0] - 2021-12-26
|
|
42
|
+
|
|
43
|
+
#### Added
|
|
44
|
+
- Support for React 18, including the changed SSR API. [PR 1409](https://github.com/shakacode/react_on_rails/pull/1409) by [kylemellander](https://github.com/kylemellander).
|
|
45
|
+
- Added webpack configuration files as part of the generator and updated webpacker to version 6. [PR 1404](https://github.com/shakacode/react_on_rails/pull/1404) by [gscarv13](https://github.com/gscarv13).
|
|
46
|
+
- Supports Rails 7.
|
|
47
|
+
|
|
48
|
+
#### Changed
|
|
49
|
+
- Changed logic of determining the usage of the default rails/webpacker webpack config or a custom command to only check if the config.build_production_command is defined. [PR 1402](https://github.com/shakacode/react_on_rails/pull/1402)by [justin808](https://github.com/justin808) and [gscarv13](https://github.com/gscarv13).
|
|
50
|
+
- Minimimum required Ruby is 2.7 to match lastest rails/webpacker.
|
|
19
51
|
|
|
20
52
|
### [12.4.0] - 2021-09-22
|
|
21
53
|
#### Added
|
|
@@ -82,7 +114,7 @@ invoked to return the React component. In that case, you won't need to pass any
|
|
|
82
114
|
[PR 1268](https://github.com/shakacode/react_on_rails/pull/1268) by [justin808](https://github.com/justin808)
|
|
83
115
|
|
|
84
116
|
See [docs/guides/upgrading-react-on-rails](https://www.shakacode.com/react-on-rails/docs/guides/upgrading-react-on-rails#upgrading-to-v12)
|
|
85
|
-
for details.
|
|
117
|
+
for details.
|
|
86
118
|
|
|
87
119
|
#### Other Updates
|
|
88
120
|
* `react_on_rails` fully supports `rails/webpacker`. The example test app in `spec/dummy` was recently converted over to use rails/webpacker v4+. It's a good example of how to leverage rails/webpacker's webpack configuration for server-side rendering.
|
|
@@ -974,7 +1006,12 @@ Best done with Object destructing:
|
|
|
974
1006
|
##### Fixed
|
|
975
1007
|
- Fix several generator related issues.
|
|
976
1008
|
|
|
977
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.
|
|
1009
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.6.0...master
|
|
1010
|
+
[12.6.0]: https://github.com/shakacode/react_on_rails/compare/12.5.2...12.6.0
|
|
1011
|
+
[12.5.2]: https://github.com/shakacode/react_on_rails/compare/12.5.1...12.5.2
|
|
1012
|
+
[12.5.1]: https://github.com/shakacode/react_on_rails/compare/12.5.0...12.5.1
|
|
1013
|
+
[12.5.0]: https://github.com/shakacode/react_on_rails/compare/12.4.0...12.5.0
|
|
1014
|
+
[12.4.0]: https://github.com/shakacode/react_on_rails/compare/12.3.0...12.4.0
|
|
978
1015
|
[12.3.0]: https://github.com/shakacode/react_on_rails/compare/12.2.0...12.3.0
|
|
979
1016
|
[12.2.0]: https://github.com/shakacode/react_on_rails/compare/12.1.0...12.2.0
|
|
980
1017
|
[12.1.0]: https://github.com/shakacode/react_on_rails/compare/12.0.4...12.1.0
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
-
gem "
|
|
3
|
+
gem "shakapacker", ">= 6.1.1"
|
|
4
4
|
gem "bootsnap", require: false
|
|
5
|
-
gem "rails"
|
|
5
|
+
gem "rails", "~> 7.0"
|
|
6
6
|
gem "sqlite3"
|
|
7
|
-
gem "sass-rails"
|
|
7
|
+
gem "sass-rails", "~> 6.0"
|
|
8
8
|
gem "uglifier"
|
|
9
9
|
gem "jquery-rails"
|
|
10
10
|
gem "puma"
|
|
@@ -17,10 +17,11 @@ gem "jbuilder"
|
|
|
17
17
|
# bundle exec rake doc:rails generates the API under doc/api.
|
|
18
18
|
gem "sdoc", group: :doc
|
|
19
19
|
|
|
20
|
-
gem "sprockets"
|
|
20
|
+
gem "sprockets", "~> 4.0"
|
|
21
21
|
|
|
22
22
|
gem "amazing_print"
|
|
23
|
-
|
|
23
|
+
|
|
24
|
+
gem "mini_racer", ">= 0.6.2"
|
|
24
25
|
|
|
25
26
|
group :development, :test do
|
|
26
27
|
gem "listen"
|
|
@@ -33,7 +34,7 @@ group :development, :test do
|
|
|
33
34
|
gem "rubocop-performance", require: false
|
|
34
35
|
gem "rubocop-rspec", require: false
|
|
35
36
|
gem "scss_lint", require: false
|
|
36
|
-
gem "spring"
|
|
37
|
+
gem "spring", "~> 4.0"
|
|
37
38
|
end
|
|
38
39
|
|
|
39
40
|
group :test do
|
data/REACT-ON-RAILS-PRO-LICENSE
CHANGED
|
@@ -82,7 +82,7 @@ In no event will ShakaCode's liability exceed the Software license price as indi
|
|
|
82
82
|
|
|
83
83
|
13.5 Indemnification. You agree to defend, indemnify, and hold harmless ShakaCode from and against any lawsuits, claims, losses, damages, fines and expenses (including attorneys' fees and costs) arising out of your use of the Software or breach of this Agreement.
|
|
84
84
|
|
|
85
|
-
13.6 Governing Law. This Agreement is governed by the laws of the State of
|
|
85
|
+
13.6 Governing Law. This Agreement is governed by the laws of the State of Hawaii and the United States without regard to conflicts of laws provisions thereof, and without regard to the United Nations Convention on the International Sale of Goods or the Uniform Computer Information Transactions Act, as currently enacted by any jurisdiction or as may be codified or amended from time to time by any jurisdiction. The jurisdiction and venue for actions related to the subject matter hereof shall be the state of Hawaii and United States federal courts located in Kahului, Hawaii, and both parties hereby submit to the personal jurisdiction of such courts.
|
|
86
86
|
|
|
87
87
|
13.7 Attorneys’ Fees and Costs. The prevailing party in any action to enforce this Agreement will be entitled to recover its attorneys’ fees and costs in connection with such action.
|
|
88
88
|
|
data/README.md
CHANGED
|
@@ -11,27 +11,33 @@
|
|
|
11
11
|
|
|
12
12
|
[](LICENSE.md) [](https://travis-ci.org/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) [](https://rubygems.org/gems/react_on_rails)
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
# News
|
|
15
|
+
* ShakaCode now maintains the official successor to `rails/webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
|
|
16
|
+
* Project is updated to support Rails 7!
|
|
17
|
+
|
|
18
|
+
-----
|
|
19
|
+
|
|
20
|
+
*These are the docs for React on Rails 13. To see the older docs: [v12](https://github.com/shakacode/react_on_rails/tree/12.6.0) and [v11](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
|
|
15
21
|
|
|
16
22
|
#### About
|
|
17
23
|
React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
|
|
18
24
|
|
|
19
25
|
This project is maintained by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReScript (ReasonML). We also build React Native apps and Gatsby sites. See [our recent work](https://www.shakacode.com/recent-work) for examples of what we do. ShakaCode.com (HiChee.com) is [hiring developers that like working on open-source](https://www.shakacode.com/career/).
|
|
20
26
|
|
|
21
|
-
|
|
27
|
+
Are you interested in optimizing your webpack setup for React on Rails including code
|
|
22
28
|
splitting with [react-router](https://github.com/ReactTraining/react-router#readme) and
|
|
23
29
|
[loadable-components](https://loadable-components.com/) with server-side rendering for SEO and hot-reloading for developers?
|
|
24
|
-
We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/).
|
|
30
|
+
We did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/). Several years later, Popmenu is serving millions of SSR requests per day React on Rails.
|
|
25
31
|
|
|
26
|
-
|
|
32
|
+
Check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/). For more information, feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails.
|
|
27
33
|
|
|
28
34
|
# Documentation
|
|
29
35
|
|
|
30
|
-
See the documentation at [shakacode.com/react-on-rails/docs](https://www.shakacode.com/react-on-rails/docs/)
|
|
36
|
+
See the documentation at **[shakacode.com/react-on-rails/docs](https://www.shakacode.com/react-on-rails/docs/)**.
|
|
31
37
|
|
|
32
38
|
## Project Objective
|
|
33
39
|
|
|
34
|
-
To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem especially
|
|
40
|
+
To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem, especially regarding React Server-Side Rendering for better SEO and improved performance.
|
|
35
41
|
|
|
36
42
|
## Features and Why React on Rails?
|
|
37
43
|
|
|
@@ -47,7 +53,9 @@ Given that `rails/webpacker` gem already provides basic React integration, why w
|
|
|
47
53
|
|
|
48
54
|
See [Rails/Webpacker React Integration Options](https://www.shakacode.com/react-on-rails/docs/guides/rails-webpacker-react-integration-options) for comparisons to other gems.
|
|
49
55
|
|
|
50
|
-
|
|
56
|
+
## Online demo
|
|
57
|
+
* See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
|
|
58
|
+
* A deployed version of the project `spec/dummy` which demonstrates several uses of `react_on_rails` is available on heroku [through this link](https://ror-spec-dummy.herokuapp.com/)
|
|
51
59
|
|
|
52
60
|
## ShakaCode Forum Premium Content
|
|
53
61
|
_Requires creating a free account._
|
|
@@ -55,20 +63,19 @@ _Requires creating a free account._
|
|
|
55
63
|
* [How to use different versions of a file for client and server rendering](https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352)
|
|
56
64
|
* [How to conditionally render server side based on the device type](https://forum.shakacode.com/t/how-to-conditionally-render-server-side-based-on-the-device-type/1473)
|
|
57
65
|
|
|
58
|
-
|
|
59
66
|
## Prerequisites
|
|
60
67
|
|
|
61
|
-
Ruby on Rails >=5
|
|
68
|
+
Ruby on Rails >=5, rails/webpacker >= 4.2, Ruby >= 2.7
|
|
62
69
|
|
|
63
70
|
# Support
|
|
64
71
|
|
|
65
72
|
* [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
|
|
66
73
|
- [**Subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) for announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials.
|
|
67
|
-
-
|
|
74
|
+
- [Discussions](https://github.com/shakacode/react_on_rails/discussions): Post your questions regarding React on Rails
|
|
75
|
+
- **[forum.shakacode.com](https://forum.shakacode.com)**: Other discussions
|
|
68
76
|
- **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
|
|
69
77
|
- *See [NEWS.md](https://github.com/shakacode/react_on_rails/tree/master/NEWS.md) for more notes over time.*
|
|
70
78
|
- See [Projects](https://github.com/shakacode/react_on_rails/tree/master/PROJECTS.md) using and [KUDOS](https://github.com/shakacode/react_on_rails/tree/master/KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
|
|
71
|
-
- *See [NEWS.md](https://github.com/shakacode/react_on_rails/tree/master/NEWS.md) for more notes over time.*
|
|
72
79
|
|
|
73
80
|
## Contributing
|
|
74
81
|
|
|
@@ -85,12 +92,12 @@ The following companies support this open source project, and ShakaCode uses the
|
|
|
85
92
|
[](https://www.honeybadger.io/)
|
|
86
93
|
[](https://statushero.com/)
|
|
87
94
|
|
|
88
|
-
ShakaCode's favorite project tracking tool is [
|
|
95
|
+
ShakaCode's favorite project tracking tool is [Shortcut](https://shortcut.com/). If you want to **try Shortcut and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfoNeH). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/referral/). By using our [referral code](http://r.clbh.se/mvfoNeH) you'll be supporting ShakaCode and, thus, React on Rails!
|
|
89
96
|
|
|
90
97
|
Aloha and best wishes from Justin and the ShakaCode team!
|
|
91
98
|
|
|
92
99
|
# Work with Us
|
|
93
|
-
ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com)
|
|
100
|
+
ShakaCode is **[hiring passionate software engineers](http://www.shakacode.com/career)** to work on our projects, including [HiChee](https://hichee.com)!
|
|
94
101
|
|
|
95
102
|
# License
|
|
96
103
|
|
data/SUMMARY.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# Table of Contents
|
|
2
2
|
|
|
3
|
+
Doccumentation for React on Rails has moved!
|
|
4
|
+
|
|
5
|
+
Here is the new link:
|
|
6
|
+
|
|
7
|
+
**[React on Rails Documentation Link](https://www.shakacode.com/react-on-rails/docs/)**
|
|
8
|
+
|
|
9
|
+
-----
|
|
10
|
+
|
|
11
|
+
## **OLD DOCS BELOW**
|
|
3
12
|
+ [Home](./README.md)
|
|
4
13
|
|
|
5
14
|
## **Basics**
|
|
@@ -16,9 +16,20 @@ For more information, see [Using Multiple Buildpacks for an App](https://devcent
|
|
|
16
16
|
|
|
17
17
|
### rails/webpacker webpack configuration
|
|
18
18
|
If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
|
|
19
|
-
will automatically modify or create an assets:precompile task to build your assets.
|
|
19
|
+
will automatically modify or create an assets:precompile task to build your assets.
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
Alternatively, you can specify `config.build_production_command` to have
|
|
22
|
+
react_on_rails invoke a command for you during assets:precompile.
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpacker"
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Consider Removing Webpacker's clean task
|
|
29
|
+
|
|
30
|
+
If you are deploying on Heroku, then you don't need Webpacker's clean task which
|
|
31
|
+
might delete files that you need.
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
Rake::Task['webpacker:clean'].clear
|
|
35
|
+
```
|
|
@@ -66,15 +66,14 @@ ReactOnRails.configure do |config|
|
|
|
66
66
|
# defaults to "" (top level)
|
|
67
67
|
config.node_modules_location = "client" # If using webpacker you should use "".
|
|
68
68
|
|
|
69
|
-
#
|
|
70
|
-
#
|
|
71
|
-
#
|
|
72
|
-
#
|
|
73
|
-
#
|
|
74
|
-
config.build_production_command = "RAILS_ENV=production bin/webpack"
|
|
75
|
-
|
|
76
|
-
# Alternatively, you can also specify a module containing a class method `call`
|
|
69
|
+
# If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
|
|
70
|
+
# will automatically modify or create an assets:precompile task to build your assets. If so,
|
|
71
|
+
# set this value to nil. Alternatively, you can specify `config.build_production_command`
|
|
72
|
+
# to have react_on_rails invoke a command for you during assets:precompile.
|
|
73
|
+
# The command is either a script or a module containing a class method `call`
|
|
77
74
|
# In this example, the module BuildProductionCommand would have a class method `call`.
|
|
75
|
+
config.build_production_command = "RAILS_ENV=production bin/webpacker"
|
|
76
|
+
|
|
78
77
|
# See bottom for an example of the BuildProductionCommand module.
|
|
79
78
|
# config.build_production_command = BuildProductionCommand
|
|
80
79
|
# If you wish to utilize ReactOnRailsPro production bundle caching logic, then use
|
|
@@ -86,7 +85,7 @@ ReactOnRails.configure do |config|
|
|
|
86
85
|
# SERVER RENDERING OPTIONS
|
|
87
86
|
################################################################################
|
|
88
87
|
# This is the file used for server rendering of React when using `(prerender: true)`
|
|
89
|
-
# If you are
|
|
88
|
+
# If you are not using server rendering, you should set this to `nil`.
|
|
90
89
|
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
|
|
91
90
|
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
|
|
92
91
|
# JavaScript execution instances which should handle any component requested.
|
|
@@ -130,6 +129,11 @@ ReactOnRails.configure do |config|
|
|
|
130
129
|
# any server rendering issues immediately during development.
|
|
131
130
|
config.raise_on_prerender_error = Rails.env.development?
|
|
132
131
|
|
|
132
|
+
# This configuration allows logic to be applied to client rendered props, such as stripping props that are only used during server rendering.
|
|
133
|
+
# Add a module with an adjust_props_for_client_side_hydration method that expects the component's name & props hash
|
|
134
|
+
# See below for an example definition of RenderingPropsExtension
|
|
135
|
+
config.rendering_props_extension = RenderingPropsExtension
|
|
136
|
+
|
|
133
137
|
################################################################################
|
|
134
138
|
# Server Renderer Configuration for ExecJS
|
|
135
139
|
################################################################################
|
|
@@ -177,9 +181,8 @@ ReactOnRails.configure do |config|
|
|
|
177
181
|
|
|
178
182
|
# You can optionally add values to your rails_context. This object is passed
|
|
179
183
|
# every time a component renders.
|
|
180
|
-
# See
|
|
181
|
-
|
|
182
|
-
# config.rendering_extension = RenderingExtension
|
|
184
|
+
# See below for an example definition of RenderingExtension
|
|
185
|
+
config.rendering_extension = RenderingExtension
|
|
183
186
|
|
|
184
187
|
################################################################################
|
|
185
188
|
################################################################################
|
|
@@ -200,7 +203,7 @@ ReactOnRails.configure do |config|
|
|
|
200
203
|
# with rspec then this controls what yarn command is run
|
|
201
204
|
# to automatically refresh your webpack assets on every test run.
|
|
202
205
|
#
|
|
203
|
-
config.build_test_command = "RAILS_ENV=test bin/
|
|
206
|
+
config.build_test_command = "RAILS_ENV=test bin/webpacker"
|
|
204
207
|
|
|
205
208
|
# CONFIGURE YOUR SOURCE FILES
|
|
206
209
|
# The test helper needs to know where your JavaScript files exist. The value is configured
|
|
@@ -217,14 +220,25 @@ ReactOnRails.configure do |config|
|
|
|
217
220
|
end
|
|
218
221
|
```
|
|
219
222
|
|
|
223
|
+
Example of a ReactOnRailsConfig module for `client_props_extension`:
|
|
224
|
+
|
|
225
|
+
```ruby
|
|
226
|
+
module RenderingPropsExtension
|
|
227
|
+
# The modify_props method will be called by ReactOnRails::ReactComponent::RenderOptions if config.client_props_extension is defined
|
|
228
|
+
def self.adjust_props_for_client_side_hydration(component_name, props)
|
|
229
|
+
component_name == 'HelloWorld' ? props.except(:server_side_only) : props
|
|
230
|
+
end
|
|
231
|
+
end
|
|
232
|
+
```
|
|
233
|
+
|
|
220
234
|
Example of a ReactOnRailsConfig module for `production_build_command`:
|
|
221
235
|
|
|
222
236
|
```ruby
|
|
223
237
|
module BuildProductionCommand
|
|
224
238
|
include FileUtils
|
|
225
|
-
#
|
|
239
|
+
# The call method will be called during assets:precompile
|
|
226
240
|
def self.call
|
|
227
|
-
sh "bin/
|
|
241
|
+
sh "bin/webpacker"
|
|
228
242
|
end
|
|
229
243
|
end
|
|
230
244
|
```
|
|
@@ -11,10 +11,10 @@ The webpack-dev-server provides:
|
|
|
11
11
|
For use with webpack, see **Client Side rendering and HMR using react-refresh-webpack-plugin** section bellow or visit [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) for additional details.
|
|
12
12
|
|
|
13
13
|
If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
|
|
14
|
-
then you can follow all the regular docs for using the `bin/
|
|
14
|
+
then you can follow all the regular docs for using the `bin/webpacker-dev-server`
|
|
15
15
|
during development.
|
|
16
16
|
|
|
17
|
-
# Server Side Rendering with the Default rails/webpacker bin/
|
|
17
|
+
# Server Side Rendering with the Default rails/webpacker bin/webpacker-dev-server
|
|
18
18
|
|
|
19
19
|
If you are using server-side rendering, then you have a couple options. The
|
|
20
20
|
recommended technique is to have a different webpack configuration for server
|
|
@@ -41,7 +41,7 @@ If you don't configure these two to false, you'll see errors like:
|
|
|
41
41
|
|
|
42
42
|
# Client Side rendering with HMR using react-refresh-webpack-plugin
|
|
43
43
|
## Basic installation
|
|
44
|
-
To enable HMR functionality you have to use `./bin/
|
|
44
|
+
To enable HMR functionality you have to use `./bin/webpacker-dev-server`
|
|
45
45
|
1. In `config/webpacker.yml` set **hmr** and **inline** `dev_server` properties to true.
|
|
46
46
|
```
|
|
47
47
|
dev_server:
|
|
@@ -59,7 +59,7 @@ To enable HMR functionality you have to use `./bin/webpack-dev-server`
|
|
|
59
59
|
|
|
60
60
|
3. HMR is for use with the webpack-dev-server, so we only add this for the webpack-dev-server.
|
|
61
61
|
```
|
|
62
|
-
const { devServer } = require('
|
|
62
|
+
const { devServer } = require('shakapacker')
|
|
63
63
|
|
|
64
64
|
const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
|
|
65
65
|
|
|
@@ -32,10 +32,9 @@ Each time you change your client code, you will need to re-generate the bundles
|
|
|
32
32
|
|
|
33
33
|
For example, you might create a [Procfile.dev](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/Procfile.dev).
|
|
34
34
|
|
|
35
|
-
On production deployments that use asset precompilation, such as Heroku deployments, `rails/webpacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/
|
|
35
|
+
On production deployments that use asset precompilation, such as Heroku deployments, `rails/webpacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpacker` in your app.
|
|
36
36
|
|
|
37
37
|
However, if you want to run a custom command to run webpack to build your bundles, then you will:
|
|
38
|
-
1. Ensure you do not have a `config/webpack/production.js` file
|
|
39
38
|
1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/guides/configuration/)
|
|
40
39
|
|
|
41
40
|
Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
|
|
@@ -12,7 +12,7 @@ compiled by webpack before running tests and during production deployment:
|
|
|
12
12
|
2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
|
|
13
13
|
|
|
14
14
|
```yml
|
|
15
|
-
config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/
|
|
15
|
+
config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/webpacker"
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
Which should you use? If you're already using the `rails/webpacker` way to configure webpack, then
|