react_on_rails 11.0.5 → 13.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.circleci/config.yml +338 -0
- data/.eslintignore +2 -1
- data/.eslintrc +32 -3
- data/.github/FUNDING.yml +1 -0
- data/.github/ISSUE_TEMPLATE/bug_report.md +23 -0
- data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
- data/.github/PULL_REQUEST_TEMPLATE.md +19 -0
- data/.github/workflows/lint-js-and-ruby.yml +54 -0
- data/.github/workflows/main.yml +183 -0
- data/.github/workflows/package-js-tests.yml +35 -0
- data/.github/workflows/rspec-package-specs.yml +46 -0
- data/.gitignore +3 -4
- data/.prettierignore +14 -0
- data/.prettierrc +20 -0
- data/.rubocop.yml +76 -34
- data/.travis.yml +15 -22
- data/CHANGELOG.md +443 -55
- data/CONTRIBUTING.md +62 -80
- data/Gemfile +1 -35
- data/Gemfile.development_dependencies +50 -0
- data/KUDOS.md +4 -1
- data/{docs/LICENSE.md → LICENSE.md} +1 -1
- data/NEWS.md +14 -4
- data/REACT-ON-RAILS-PRO-LICENSE +95 -0
- data/README.md +107 -802
- data/Rakefile +1 -8
- data/SUMMARY.md +51 -29
- data/book.json +5 -5
- data/docs/{basics/generator.md → additional-details/generator-details.md} +5 -13
- data/docs/{basics/installation-overview.md → additional-details/manual-installation-overview.md} +9 -14
- data/docs/{basics → additional-details}/migrating-from-react-rails.md +1 -1
- data/docs/additional-details/recommended-project-structure.md +69 -0
- data/docs/additional-details/tips-for-usage-with-sp6.md +15 -0
- data/docs/additional-details/upgrade-webpacker-v3-to-v4.md +10 -0
- data/docs/api/javascript-api.md +35 -6
- data/docs/api/redux-store-api.md +102 -0
- data/docs/api/view-helpers-api.md +133 -0
- data/docs/contributor-info/errors-with-hooks.md +45 -0
- data/docs/contributor-info/linters.md +5 -6
- data/docs/contributor-info/pull-requests.md +42 -0
- data/docs/contributor-info/releasing.md +1 -1
- data/docs/deployment/heroku-deployment.md +39 -0
- data/docs/getting-started.md +196 -0
- data/docs/guides/client-vs-server-rendering.md +27 -0
- data/docs/guides/configuration.md +289 -0
- data/docs/guides/deployment.md +5 -0
- data/docs/guides/file-system-based-automated-bundle-generation.md +197 -0
- data/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +104 -0
- data/docs/guides/how-react-on-rails-works.md +44 -0
- data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md +40 -0
- data/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md +98 -0
- data/docs/guides/i18n.md +87 -0
- data/docs/guides/installation-into-an-existing-rails-app.md +66 -0
- data/docs/guides/minitest-configuration.md +31 -0
- data/docs/guides/rails-webpacker-react-integration-options.md +213 -0
- data/docs/guides/react-on-rails-overview.md +29 -0
- data/docs/guides/react-server-rendering.md +32 -0
- data/docs/guides/render-functions-and-railscontext.md +205 -0
- data/docs/guides/rspec-configuration.md +73 -0
- data/docs/guides/tutorial.md +371 -0
- data/docs/{basics → guides}/upgrading-react-on-rails.md +126 -3
- data/docs/guides/webpack-configuration.md +42 -0
- data/docs/home.md +23 -0
- data/docs/javascript/asset-pipeline.md +12 -0
- data/docs/{additional-reading → javascript}/code-splitting.md +21 -11
- data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md +10 -0
- data/docs/javascript/credits.md +10 -0
- data/docs/{additional-reading → javascript}/images.md +5 -6
- data/docs/javascript/react-helmet.md +100 -0
- data/docs/javascript/react-router.md +90 -0
- data/docs/{additional-reading → javascript}/server-rendering-tips.md +15 -12
- data/docs/javascript/troubleshooting-when-using-shakapacker.md +77 -0
- data/docs/{additional-reading → javascript}/webpack.md +2 -2
- data/docs/misc/articles.md +20 -0
- data/docs/misc/doctrine.md +5 -6
- data/docs/outdated/deferred-rendering.md +39 -0
- data/docs/{additional-reading → outdated}/rails-assets-relative-paths.md +4 -4
- data/docs/{additional-reading → outdated}/rails-assets.md +12 -20
- data/docs/{misc → outdated}/rails3.md +2 -2
- data/docs/rails/convert-rails-5-api-only-app.md +19 -0
- data/docs/rails/rails-engine-integration.md +32 -0
- data/docs/{additional-reading → rails}/rails_view_rendering_from_inline_javascript.md +2 -1
- data/docs/{additional-reading → rails}/turbolinks.md +13 -1
- data/docs/react-on-rails-pro/react-on-rails-pro.md +43 -0
- data/docs/testimonials/hvmn.md +25 -0
- data/docs/testimonials/resortpass.md +13 -0
- data/docs/testimonials/testimonials.md +28 -0
- data/jest.config.js +4 -0
- data/lib/generators/USAGE +1 -1
- data/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb +41 -0
- data/lib/generators/react_on_rails/base_generator.rb +55 -43
- data/lib/generators/react_on_rails/bin/dev +30 -0
- data/lib/generators/react_on_rails/bin/dev-static +30 -0
- data/lib/generators/react_on_rails/dev_tests_generator.rb +4 -3
- data/lib/generators/react_on_rails/generator_helper.rb +8 -6
- data/lib/generators/react_on_rails/generator_messages.rb +40 -0
- data/lib/generators/react_on_rails/install_generator.rb +37 -0
- data/lib/generators/react_on_rails/templates/.eslintrc +3 -1
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -6
- 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 +21 -40
- 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 +2 -1
- 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 +20 -4
- data/lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml +62 -0
- 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 +17 -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 +9 -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/dev_tests/spec/rails_helper.rb +8 -2
- data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
- data/lib/generators/react_on_rails/templates/dev_tests/spec/{features → system}/hello_world_spec.rb +2 -2
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +6 -9
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.js +1 -3
- data/lib/react_on_rails/configuration.rb +198 -145
- data/lib/react_on_rails/error.rb +2 -0
- data/lib/react_on_rails/git_utils.rb +5 -3
- data/lib/react_on_rails/{react_on_rails_helper.rb → helper.rb} +201 -190
- data/lib/react_on_rails/json_output.rb +1 -1
- data/lib/react_on_rails/json_parse_error.rb +28 -0
- data/lib/react_on_rails/locales/base.rb +169 -0
- data/lib/react_on_rails/locales/to_js.rb +33 -0
- data/lib/react_on_rails/locales/to_json.rb +23 -0
- data/lib/react_on_rails/packs_generator.rb +234 -0
- data/lib/react_on_rails/prerender_error.rb +35 -27
- data/lib/react_on_rails/react_component/render_options.rb +64 -9
- data/lib/react_on_rails/server_rendering_js_code.rb +55 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +126 -76
- data/lib/react_on_rails/server_rendering_pool.rb +0 -1
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +9 -8
- data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +13 -12
- data/lib/react_on_rails/test_helper.rb +24 -3
- data/lib/react_on_rails/utils.rb +94 -25
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +5 -1
- data/lib/react_on_rails/version_syntax_converter.rb +14 -12
- data/lib/react_on_rails/webpacker_utils.rb +105 -5
- data/lib/react_on_rails.rb +8 -2
- data/lib/tasks/assets.rake +28 -60
- data/lib/tasks/generate_packs.rake +11 -0
- data/lib/tasks/locale.rake +5 -4
- data/package-scripts.yml +49 -0
- data/package.json +52 -47
- data/rakelib/docker.rake +0 -5
- data/rakelib/dummy_apps.rake +5 -8
- data/rakelib/example_type.rb +12 -3
- data/rakelib/examples.rake +5 -4
- data/rakelib/lint.rake +5 -16
- data/rakelib/node_package.rake +2 -2
- data/rakelib/release.rake +37 -23
- data/rakelib/run_rspec.rake +16 -44
- data/rakelib/task_helpers.rb +16 -4
- data/react_on_rails.gemspec +6 -22
- data/tsconfig.json +14 -0
- data/webpackConfigLoader.js +5 -4
- data/yarn.lock +5935 -3106
- metadata +122 -272
- data/Gemfile.rails32 +0 -74
- data/docs/additional-reading/asset-pipeline.md +0 -20
- data/docs/additional-reading/babel.md +0 -5
- data/docs/additional-reading/caching-and-performance.md +0 -4
- data/docs/additional-reading/heroku-deployment.md +0 -92
- data/docs/additional-reading/hot-reloading-rails-development.md +0 -57
- data/docs/additional-reading/node-server-rendering.md +0 -5
- data/docs/additional-reading/rails-engine-integration.md +0 -34
- data/docs/additional-reading/react-helmet.md +0 -80
- data/docs/additional-reading/react-router.md +0 -113
- data/docs/additional-reading/recommended-project-structure.md +0 -49
- data/docs/additional-reading/rspec-configuration.md +0 -56
- data/docs/additional-reading/webpack-dev-server.md +0 -15
- data/docs/api/ruby-api-hot-reload-view-helpers.md +0 -44
- data/docs/api/ruby-api.md +0 -8
- data/docs/basics/configuration.md +0 -163
- data/docs/basics/i18n.md +0 -77
- data/docs/tutorial.md +0 -220
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
- data/lib/react_on_rails/assets_precompile.rb +0 -150
- data/lib/react_on_rails/locales_to_js.rb +0 -134
- data/ruby-lint.yml +0 -25
- /data/docs/{additional-reading → additional-details}/updating-dependencies.md +0 -0
- /data/docs/{additional-reading → deployment}/elastic-beanstalk.md +0 -0
- /data/docs/{additional-reading → javascript}/angular-js-integration-migration.md +0 -0
- /data/docs/{additional-reading → javascript}/capistrano-deployment.md +0 -0
- /data/docs/{additional-reading → javascript}/foreman-issues.md +0 -0
- /data/docs/{additional-reading → javascript}/node-dependencies-and-npm.md +0 -0
- /data/docs/{additional-reading → javascript}/react-and-redux.md +0 -0
- /data/docs/{additional-reading → javascript}/troubleshooting-when-using-webpacker.md +0 -0
- /data/docs/{additional-reading → javascript}/webpack-v1-notes.md +0 -0
- /data/docs/{coding-style → misc}/style.md +0 -0
- /data/docs/{additional-reading → misc}/tips.md +0 -0
@@ -1,163 +0,0 @@
|
|
1
|
-
Here is the full set of config options. This file is `/config/initializers/react_on_rails.rb`
|
2
|
-
|
3
|
-
```ruby
|
4
|
-
# frozen_string_literal: true
|
5
|
-
|
6
|
-
# NOTE: you typically will leave the commented out configurations set to their defaults.
|
7
|
-
# Thus, you only need to pay careful attention to the non-commented settings in this file.
|
8
|
-
ReactOnRails.configure do |config|
|
9
|
-
# `trace`: General debugging flag.
|
10
|
-
# The default is true for development, off otherwise.
|
11
|
-
# With true, you get detailed logs of rendering and stack traces if you call setTimout,
|
12
|
-
# setInterval, clearTimout when server rendering.
|
13
|
-
config.trace = Rails.env.development?
|
14
|
-
|
15
|
-
|
16
|
-
# defaults to "" (top level)
|
17
|
-
#
|
18
|
-
config.node_modules_location = ""
|
19
|
-
|
20
|
-
# This configures the script to run to build the production assets by webpack. Set this to nil
|
21
|
-
# if you don't want react_on_rails building this file for you.
|
22
|
-
config.build_production_command = "RAILS_ENV=production bin/webpack"
|
23
|
-
|
24
|
-
################################################################################
|
25
|
-
################################################################################
|
26
|
-
# TEST CONFIGURATION OPTIONS
|
27
|
-
# Below options are used with the use of this test helper:
|
28
|
-
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
29
|
-
################################################################################
|
30
|
-
|
31
|
-
# If you are using this in your spec_helper.rb (or rails_helper.rb):
|
32
|
-
#
|
33
|
-
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
34
|
-
#
|
35
|
-
# with rspec then this controls what yarn command is run
|
36
|
-
# to automatically refresh your webpack assets on every test run.
|
37
|
-
#
|
38
|
-
config.build_test_command = "RAILS_ENV=test bin/webpack"
|
39
|
-
|
40
|
-
# Directory where your generated assets go. All generated assets must go to the same directory.
|
41
|
-
# If you are using webpacker, this value will come from your config/webpacker.yml file.
|
42
|
-
# This is the default in webpacker.yml:
|
43
|
-
# public_output_path: packs-test
|
44
|
-
# which means files in /public/packs-test
|
45
|
-
#
|
46
|
-
# Alternately, you may configure this. It is relative to your Rails root directory.
|
47
|
-
# A custom, non-webpacker, config might use something like:
|
48
|
-
#
|
49
|
-
# config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
|
50
|
-
# This setting should not be used if using webpacker.
|
51
|
-
|
52
|
-
# The test helper needs to know where your JavaScript files exist. The default is configured
|
53
|
-
# by your config/webpacker.yml soure_path:
|
54
|
-
# source_path: app/javascript
|
55
|
-
#
|
56
|
-
# If you have a non-default `node_modules_location`, that is assumed to be the location of your source
|
57
|
-
# files.
|
58
|
-
|
59
|
-
# Define the files we need to check for webpack compilation when running tests.
|
60
|
-
# The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
|
61
|
-
#
|
62
|
-
config.webpack_generated_files = %w( manifest.json )
|
63
|
-
|
64
|
-
# You can optionally add values to your rails_context. See example below for RenderingExtension
|
65
|
-
# config.rendering_extension = RenderingExtension
|
66
|
-
|
67
|
-
################################################################################
|
68
|
-
################################################################################
|
69
|
-
# SERVER RENDERING OPTIONS
|
70
|
-
################################################################################
|
71
|
-
# This is the file used for server rendering of React when using `(prerender: true)`
|
72
|
-
# If you are never using server rendering, you should set this to "".
|
73
|
-
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
|
74
|
-
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
|
75
|
-
# JavaScript execution instances which should handle any component requested.
|
76
|
-
#
|
77
|
-
# While you may configure this to be the same as your client bundle file, this file is typically
|
78
|
-
# different.
|
79
|
-
#
|
80
|
-
config.server_bundle_js_file = "server-bundle.js"
|
81
|
-
|
82
|
-
# If set to true, this forces Rails to reload the server bundle if it is modified
|
83
|
-
# Default value is Rails.env.development?
|
84
|
-
#
|
85
|
-
config.development_mode = Rails.env.development?
|
86
|
-
|
87
|
-
# For server rendering so that it replays in the browser console.
|
88
|
-
# This can be set to false so that server side messages are not displayed in the browser.
|
89
|
-
# Default is true. Be cautious about turning this off.
|
90
|
-
# Default value is true
|
91
|
-
#
|
92
|
-
config.replay_console = true
|
93
|
-
|
94
|
-
# Default is true. Logs server rendering messages to Rails.logger.info. If false, you'll only
|
95
|
-
# see the server rendering messages in the browser console.
|
96
|
-
#
|
97
|
-
config.logging_on_server = true
|
98
|
-
|
99
|
-
# Default is to false to NOT raise exception on server if the JS code throws.
|
100
|
-
# Reason is that it's easier to debug this when you get the error over to the client.
|
101
|
-
#
|
102
|
-
config.raise_on_prerender_error = false
|
103
|
-
|
104
|
-
################################################################################
|
105
|
-
# Server Renderer Configuration for ExecJS
|
106
|
-
################################################################################
|
107
|
-
# The default server rendering is ExecJS, probably using the mini_racer gem
|
108
|
-
# If you wish to use an alternative Node server rendering for higher performance,
|
109
|
-
# contact justin@shakacode.com for details.
|
110
|
-
#
|
111
|
-
# For ExecJS:
|
112
|
-
# You can configure your pool of JS virtual machines and specify where it should load code:
|
113
|
-
# On MRI, use `mini_racer` for the best performance
|
114
|
-
# (see [discussion](https://github.com/reactjs/react-rails/pull/290))
|
115
|
-
# On MRI, you'll get a deadlock with `pool_size` > 1
|
116
|
-
# If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
|
117
|
-
config.server_renderer_pool_size = 1 # increase if you're on JRuby
|
118
|
-
config.server_renderer_timeout = 20 # seconds
|
119
|
-
|
120
|
-
################################################################################
|
121
|
-
# I18N OPTIONS
|
122
|
-
################################################################################
|
123
|
-
# Replace the following line to the location where you keep translation.js & default.js for use
|
124
|
-
# by the npm packages react-intl. Be sure this directory exists!
|
125
|
-
# config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
|
126
|
-
# If not using the i18n feature, then leave this section commented out or set the value
|
127
|
-
# of config.i18n_dir to nil.
|
128
|
-
#
|
129
|
-
# Replace the following line to the location where you keep your client i18n yml files
|
130
|
-
# that will source for automatic generation on translations.js & default.js
|
131
|
-
# By default(without this option) all yaml files from Rails.root.join("config", "locales")
|
132
|
-
# and installed gems are loaded
|
133
|
-
config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
|
134
|
-
|
135
|
-
################################################################################
|
136
|
-
################################################################################
|
137
|
-
# CLIENT RENDERING OPTIONS
|
138
|
-
# Below options can be overriden by passing options to the react_on_rails
|
139
|
-
# `render_component` view helper method.
|
140
|
-
################################################################################
|
141
|
-
# default is false
|
142
|
-
config.prerender = false
|
143
|
-
end
|
144
|
-
|
145
|
-
```
|
146
|
-
|
147
|
-
Example of a RenderingExtension for custom values in the `rails_context`:
|
148
|
-
|
149
|
-
```ruby
|
150
|
-
module RenderingExtension
|
151
|
-
|
152
|
-
# Return a Hash that contains custom values from the view context that will get merged with
|
153
|
-
# the standard rails_context values and passed to all calls to generator functions used by the
|
154
|
-
# react_component and redux_store view helpers
|
155
|
-
def self.custom_context(view_context)
|
156
|
-
{
|
157
|
-
somethingUseful: view_context.session[:something_useful]
|
158
|
-
}
|
159
|
-
end
|
160
|
-
end
|
161
|
-
```
|
162
|
-
|
163
|
-
|
data/docs/basics/i18n.md
DELETED
@@ -1,77 +0,0 @@
|
|
1
|
-
# How to add I18n
|
2
|
-
|
3
|
-
Here's a summary of adding the I18n functionality.
|
4
|
-
|
5
|
-
You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and [PR #340](https://github.com/shakacode/react-webpack-rails-tutorial/pull/340), [commmited](https://github.com/shakacode/react-webpack-rails-tutorial/commit/ef369ed9d922aea5116ca7e50208169fd7831389) for a complete example.
|
6
|
-
|
7
|
-
1. Add `react-intl` & `intl` to `client/package.json`, and remember to `bundle && yarn install`.
|
8
|
-
|
9
|
-
```js
|
10
|
-
"dependencies": {
|
11
|
-
...
|
12
|
-
"intl": "^1.2.5",
|
13
|
-
"react-intl": "^2.1.5",
|
14
|
-
...
|
15
|
-
}
|
16
|
-
```
|
17
|
-
|
18
|
-
2. Add `config.i18n_dir` in `config/initializers/react_on_rails.rb`
|
19
|
-
|
20
|
-
`react-intl` requires locale files in json format. React on Rails will generate `translations.js` & `default.js` automatically after you configured your `config.i18n_dir` in `config/initializers/react_on_rails.rb`.
|
21
|
-
|
22
|
-
```ruby
|
23
|
-
# Replace the following line to the location where you keep translation.js & default.js.
|
24
|
-
config.i18n_dir = Rails.root.join("PATH_TO", "YOUR_JS_I18N_FOLDER")
|
25
|
-
```
|
26
|
-
|
27
|
-
Optionally you can also set `config.i18n_yml_dir` if you do not what to use all the locale files from rails.
|
28
|
-
```ruby
|
29
|
-
# Replace the following line to the location where you keep your client i18n yml files
|
30
|
-
# By default(without this option), all yaml files from Rails.root.join("config", "locales") and installed gems are loaded
|
31
|
-
config.i18n_yml_dir = Rails.root.join("PATH_TO", "YOUR_YAML_I18N_FOLDER")
|
32
|
-
```
|
33
|
-
|
34
|
-
`translations.js`: All your locales in json format.
|
35
|
-
`default.js`: Default settings in json format.
|
36
|
-
|
37
|
-
3. Add `translations.js` and `default.js` to your `.gitignore` and `.eslintignore`.
|
38
|
-
|
39
|
-
4. Javascript locale files must be generated before `yarn build`.
|
40
|
-
|
41
|
-
Once you setup `config.i18n_dir` as in the previous step, react_on_rails will automatically do this for testing (if using the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets` and for production deployments if using the [default precompile rake hook](../additional-reading/heroku-deployment.md). For development, you should adjust your startup scripts (Procfiles) so that they run **`bundle exec rake react_on_rails:locale`** before running any webpack watch process (`yarn run build:development`). You may need to configure your CI to run **`bundle exec rake react_on_rails:locale`** before any webpack process if you are not using the React on Rails test helper. Note, if you are try to lint before running tests, and you are depending on the test helper to build your locales, your linting will fail because the translations won't be built yet. The fix is either to 1) run the rake task to build the translations before running the lint command or 2) to run the tests first.
|
42
|
-
|
43
|
-
5. In React, you need to initialize `react-intl`, and set parameters for it.
|
44
|
-
|
45
|
-
```js
|
46
|
-
...
|
47
|
-
import { addLocaleData } from 'react-intl';
|
48
|
-
import en from 'react-intl/locale-data/en';
|
49
|
-
import de from 'react-intl/locale-data/de';
|
50
|
-
import { translations } from 'path_to/i18n/translations';
|
51
|
-
import { defaultLocale } from 'path_to/i18n/default';
|
52
|
-
...
|
53
|
-
// Initizalize all locales for react-intl.
|
54
|
-
addLocaleData([...en, ...de]);
|
55
|
-
...
|
56
|
-
// set locale and messages for IntlProvider.
|
57
|
-
const locale = method_to_get_current_locale() || defaultLocale;
|
58
|
-
const messages = translations[locale];
|
59
|
-
...
|
60
|
-
return (
|
61
|
-
<IntlProvider locale={locale} key={locale} messages={messages}>
|
62
|
-
<CommentScreen {...{ actions, data }} />
|
63
|
-
</IntlProvider>
|
64
|
-
)
|
65
|
-
```
|
66
|
-
```js
|
67
|
-
// In your component.
|
68
|
-
import { defaultMessages } from 'path_to/i18n/default';
|
69
|
-
...
|
70
|
-
return (
|
71
|
-
{ formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
|
72
|
-
)
|
73
|
-
```
|
74
|
-
|
75
|
-
# Notes
|
76
|
-
|
77
|
-
* See [Support for Rails' i18n pluralization #1000](https://github.com/shakacode/react_on_rails/issues/1000) for a discussion of issues around pluralization.
|
data/docs/tutorial.md
DELETED
@@ -1,220 +0,0 @@
|
|
1
|
-
# React on Rails Basic Tutorial
|
2
|
-
|
3
|
-
This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 10.0.2.
|
4
|
-
|
5
|
-
After finishing this tutorial you will get an application that can do the following (live on Heroku):
|
6
|
-
|
7
|
-
![example](https://cloud.githubusercontent.com/assets/371302/17368567/111cc722-596b-11e6-9b72-ac5967a60e42.gif)
|
8
|
-
|
9
|
-
You can find here:
|
10
|
-
* [Source code for this app in PR, using the --redux option](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/17) and [for Heroku](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/18).
|
11
|
-
* [Live on Heroku](https://react-on-rails-redux-gen-8-0-0.herokuapp.com/)
|
12
|
-
|
13
|
-
By the time you read this, the latest may have changed. Be sure to check the versions here:
|
14
|
-
|
15
|
-
* https://rubygems.org/gems/react_on_rails
|
16
|
-
* https://www.npmjs.com/package/react-on-rails
|
17
|
-
|
18
|
-
_Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
|
19
|
-
|
20
|
-
## Setting up the environment
|
21
|
-
|
22
|
-
Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 5.x and node version 6+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
|
23
|
-
|
24
|
-
```
|
25
|
-
nvm install node # download and install latest stable Node
|
26
|
-
nvm alias default node # make it default version
|
27
|
-
nvm list # check
|
28
|
-
|
29
|
-
brew install yarn # you can use other installer if desired
|
30
|
-
|
31
|
-
rvm install 2.4.1 # download and install latest stable Ruby (update to exact version)
|
32
|
-
rvm use 2.4.1 --default # use it and make it default
|
33
|
-
rvm list # check
|
34
|
-
|
35
|
-
gem install rails # download and install latest stable Rails
|
36
|
-
gem install foreman # download and install Foreman
|
37
|
-
```
|
38
|
-
|
39
|
-
Then we need to create a fresh Rails application with webpacker react support as following.
|
40
|
-
|
41
|
-
First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
|
42
|
-
|
43
|
-
```
|
44
|
-
cd <directory where you want to create your new Rails app>
|
45
|
-
|
46
|
-
# any name you like for the rails app
|
47
|
-
rails new test-react-on-rails --webpack=react
|
48
|
-
|
49
|
-
cd test-react-on-rails
|
50
|
-
```
|
51
|
-
|
52
|
-
Note: if you are installing React On Rails in an existing app or an app that uses Rails pre 5.1.3, you will need to run these two commands as well:
|
53
|
-
|
54
|
-
```
|
55
|
-
bundle exec rails webpacker:install
|
56
|
-
bundle exec rails webpacker:install:react
|
57
|
-
```
|
58
|
-
|
59
|
-
Add the **React On Rails** gem to your Gemfile:
|
60
|
-
|
61
|
-
```
|
62
|
-
gem 'react_on_rails', '10.0.2' # prefer exact gem version to match npm version
|
63
|
-
```
|
64
|
-
|
65
|
-
Note: Latest released React On Rails version is considered stable. Please use the latest version to ensure you get all the security patches and the best support.
|
66
|
-
|
67
|
-
Run `bundle` and commit the git repository (or `rails generate` will not work properly)
|
68
|
-
|
69
|
-
|
70
|
-
```
|
71
|
-
bundle
|
72
|
-
|
73
|
-
# Here are git commands to make a new git repo and commit everything.
|
74
|
-
# Newer versions of Rails create the git repo by default.
|
75
|
-
git add -A
|
76
|
-
git commit -m "Initial commit"
|
77
|
-
```
|
78
|
-
|
79
|
-
Install React on Rails: `rails generate react_on_rails:install` or `rails generate react_on_rails:install --redux`. You need to first git commit your files before running the generator, or else it will generate an error.
|
80
|
-
|
81
|
-
```
|
82
|
-
rails generate react_on_rails:install
|
83
|
-
bundle && yarn
|
84
|
-
```
|
85
|
-
|
86
|
-
and then run server with
|
87
|
-
|
88
|
-
```
|
89
|
-
foreman start -f Procfile.dev
|
90
|
-
```
|
91
|
-
|
92
|
-
Visit http://localhost:3000/hello_world and see your **React On Rails** app running!
|
93
|
-
Note, foreman defaults to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.
|
94
|
-
|
95
|
-
### Custom IP & PORT setup (Cloud9 example)
|
96
|
-
|
97
|
-
In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
|
98
|
-
|
99
|
-
``` Procfile.dev
|
100
|
-
web: rails s -p 8080 -b 0.0.0.0
|
101
|
-
```
|
102
|
-
|
103
|
-
Then visit https://your-shared-addr.c9users.io:8080/hello_world
|
104
|
-
|
105
|
-
|
106
|
-
## RubyMine
|
107
|
-
|
108
|
-
It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
|
109
|
-
|
110
|
-
* Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
|
111
|
-
* `node_modules`
|
112
|
-
|
113
|
-
## Deploying to Heroku
|
114
|
-
|
115
|
-
### Create Your Heroku App
|
116
|
-
*Assuming you can login to heroku.com and have logged into to your shell for heroku.*
|
117
|
-
|
118
|
-
1. Visit https://dashboard.heroku.com/new and create an app, say named `my-name-react-on-rails`:
|
119
|
-
|
120
|
-
![06](https://cloud.githubusercontent.com/assets/20628911/17465014/1f29bf3c-5cf4-11e6-869f-4215987ae854.png)
|
121
|
-
|
122
|
-
Run this command that looks like this from your new heroku app
|
123
|
-
|
124
|
-
heroku git:remote -a my-name-react-on-rails
|
125
|
-
|
126
|
-
Set heroku to use multiple buildpacks:
|
127
|
-
|
128
|
-
heroku buildpacks:set heroku/ruby
|
129
|
-
heroku buildpacks:add --index 1 heroku/nodejs
|
130
|
-
|
131
|
-
|
132
|
-
### Swap out sqlite for postgres by doing the following:
|
133
|
-
|
134
|
-
1. Delete the line with `sqlite` and replace it with:
|
135
|
-
|
136
|
-
```ruby
|
137
|
-
gem 'pg'
|
138
|
-
```
|
139
|
-
|
140
|
-
![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
|
141
|
-
|
142
|
-
|
143
|
-
2. Replace your `database.yml` file with this (assuming your app name is "ror").
|
144
|
-
|
145
|
-
```yml
|
146
|
-
default: &default
|
147
|
-
adapter: postgresql
|
148
|
-
username:
|
149
|
-
password:
|
150
|
-
host: localhost
|
151
|
-
|
152
|
-
development:
|
153
|
-
<<: *default
|
154
|
-
database: ror_development
|
155
|
-
|
156
|
-
# Warning: The database defined as "test" will be erased and
|
157
|
-
# re-generated from your development database when you run "rake".
|
158
|
-
# Do not set this db to the same as development or production.
|
159
|
-
test:
|
160
|
-
<<: *default
|
161
|
-
database: ror_test
|
162
|
-
|
163
|
-
production:
|
164
|
-
<<: *default
|
165
|
-
database: ror_production
|
166
|
-
```
|
167
|
-
|
168
|
-
Then you need to setup postgres so you can run locally:
|
169
|
-
|
170
|
-
```
|
171
|
-
bundle
|
172
|
-
rake db:setup
|
173
|
-
rake db:migrate
|
174
|
-
```
|
175
|
-
|
176
|
-
![08](https://cloud.githubusercontent.com/assets/20628911/17465016/1f3559f0-5cf4-11e6-8ab4-c5572e4644a5.png)
|
177
|
-
|
178
|
-
I'd recommend adding this line to the top of your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
|
179
|
-
|
180
|
-
```ruby
|
181
|
-
root "hello_world#index"
|
182
|
-
```
|
183
|
-
|
184
|
-
![09](https://cloud.githubusercontent.com/assets/20628911/17465018/1f3b685e-5cf4-11e6-93f8-105fc48517d0.png)
|
185
|
-
|
186
|
-
Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
|
187
|
-
|
188
|
-
`Procfile`
|
189
|
-
```
|
190
|
-
web: bundle exec puma -C config/puma.rb
|
191
|
-
```
|
192
|
-
|
193
|
-
`config/puma.rb`
|
194
|
-
```rb
|
195
|
-
workers Integer(ENV['WEB_CONCURRENCY'] || 2)
|
196
|
-
threads_count = Integer(ENV['RAILS_MAX_THREADS'] || 5)
|
197
|
-
threads threads_count, threads_count
|
198
|
-
|
199
|
-
preload_app!
|
200
|
-
|
201
|
-
rackup DefaultRackup
|
202
|
-
port ENV['PORT'] || 3000
|
203
|
-
environment ENV['RACK_ENV'] || 'development'
|
204
|
-
|
205
|
-
on_worker_boot do
|
206
|
-
# Worker specific setup for Rails 4.1+
|
207
|
-
# See: https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#on-worker-boot
|
208
|
-
ActiveRecord::Base.establish_connection
|
209
|
-
end
|
210
|
-
```
|
211
|
-
|
212
|
-
Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
|
213
|
-
|
214
|
-
```
|
215
|
-
git add -A
|
216
|
-
git commit -m "Latest changes"
|
217
|
-
git push heroku master
|
218
|
-
```
|
219
|
-
|
220
|
-
Feedback is greatly appreciated! As are stars on github! If you want personalized help, don't hesitate to get in touch with us at [contact@shakacode.com](mailto:contact@shakacode.com).
|
@@ -1,12 +0,0 @@
|
|
1
|
-
# You can run these commands in separate shells instead of using foreman
|
2
|
-
web: rails s -p 3000
|
3
|
-
|
4
|
-
# Next line runs the webpack-dev-server
|
5
|
-
# You can edit config/webpacker.yml to set HMR to true to see hot reloading.
|
6
|
-
# Note, hot and live reloading don't work with the default generator setup on top of
|
7
|
-
# the rails/webpacker Webpack config with server rendering.
|
8
|
-
# If you have server rendering enabled, modify the call to bin/webpack-dev-server line
|
9
|
-
# so you add `--inline=false` and then CSS is not inlined.
|
10
|
-
# Otherwise, you will have an error. If you want HMR and Server Rendering, see
|
11
|
-
# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
|
12
|
-
client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'
|
@@ -1,150 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module ReactOnRails
|
4
|
-
class AssetsPrecompile
|
5
|
-
class SymlinkTargetDoesNotExistException < StandardError
|
6
|
-
end
|
7
|
-
|
8
|
-
# Used by the rake task
|
9
|
-
def default_asset_path
|
10
|
-
dir = File.join(Rails.configuration.paths["public"].first,
|
11
|
-
Rails.configuration.assets.prefix)
|
12
|
-
Pathname.new(dir)
|
13
|
-
end
|
14
|
-
|
15
|
-
# assets_path should be a Pathname object
|
16
|
-
def initialize(assets_path: nil,
|
17
|
-
symlink_non_digested_assets_regex: nil,
|
18
|
-
generated_assets_dir: nil)
|
19
|
-
@assets_path = ReactOnRails::Utils.truthy_presence(assets_path) || default_asset_path
|
20
|
-
@symlink_non_digested_assets_regex =
|
21
|
-
ReactOnRails::Utils.truthy_presence(symlink_non_digested_assets_regex) ||
|
22
|
-
ReactOnRails.configuration.symlink_non_digested_assets_regex
|
23
|
-
@generated_assets_dir = ReactOnRails::Utils.truthy_presence(generated_assets_dir) ||
|
24
|
-
ReactOnRails.configuration.generated_assets_dir
|
25
|
-
end
|
26
|
-
|
27
|
-
# target and symlink are relative to the assets directory
|
28
|
-
def symlink_file(target, symlink)
|
29
|
-
target_path = @assets_path.join(target)
|
30
|
-
symlink_path = @assets_path.join(symlink)
|
31
|
-
|
32
|
-
target_exists = File.exist?(target_path)
|
33
|
-
raise SymlinkTargetDoesNotExistException, "Target Path was: #{target_path}" unless target_exists
|
34
|
-
|
35
|
-
if symlink_and_points_to_existing_file?(symlink_path)
|
36
|
-
puts "React On Rails: Digested version of #{symlink} already exists indicating #{target} did not change."
|
37
|
-
return
|
38
|
-
end
|
39
|
-
|
40
|
-
if file_or_symlink_exists_at_path?(symlink_path)
|
41
|
-
puts "React On Rails: Removing existing invalid symlink or file #{symlink_path}"
|
42
|
-
FileUtils.remove_file(symlink_path, true)
|
43
|
-
end
|
44
|
-
|
45
|
-
# Might be like:
|
46
|
-
# "images/5cf5db49df178f9357603f945752a1ef.png":
|
47
|
-
# "images/5cf5db49df178f9357603f945752a1ef-033650e1d6193b70d59bb60e773f47b6d9aefdd56abc7cc.png"
|
48
|
-
# need to cd to directory and then symlink
|
49
|
-
target_sub_path, _divider, target_filename = target.rpartition("/")
|
50
|
-
_symlink_sub_path, _divider, symlink_filename = symlink.rpartition("/")
|
51
|
-
dest_path = File.join(@assets_path, target_sub_path)
|
52
|
-
|
53
|
-
puts "React On Rails: Symlinking \"#{target}\" to \"#{symlink}\""
|
54
|
-
FileUtils.chdir(dest_path) do
|
55
|
-
File.symlink(target_filename, symlink_filename)
|
56
|
-
end
|
57
|
-
end
|
58
|
-
|
59
|
-
def symlink_non_digested_assets
|
60
|
-
# digest ==> means that the file has a unique sha so the browser will load a new copy.
|
61
|
-
# Webpack's CSS extract-text-plugin copies digested asset files over to directory where we put
|
62
|
-
# we deploy the webpack compiled JS file. Since Rails will deploy the image files in this
|
63
|
-
# directory with a digest, then the files are essentially "double-digested" and the CSS
|
64
|
-
# references from webpack's CSS would be invalid. The fix is to symlink the double-digested
|
65
|
-
# file back to the original digested name, and make a similar symlink for the gz version.
|
66
|
-
return unless @symlink_non_digested_assets_regex
|
67
|
-
manifest_glob = Dir.glob(@assets_path.join(".sprockets-manifest-*.json")) +
|
68
|
-
Dir.glob(@assets_path.join("manifest-*.json")) +
|
69
|
-
Dir.glob(@assets_path.join("manifest.yml"))
|
70
|
-
if manifest_glob.empty?
|
71
|
-
puts "Warning: React On Rails: expected to find .sprockets-manifest-*.json, manifest-*.json "\
|
72
|
-
"or manifest.yml at #{@assets_path}, but found none. Canceling symlinking tasks."
|
73
|
-
return -1
|
74
|
-
end
|
75
|
-
manifest_path = take_most_recent_manifest_path(manifest_glob)
|
76
|
-
manifest_file = File.new(manifest_path)
|
77
|
-
manifest_data = if File.extname(manifest_file) == ".json"
|
78
|
-
manifest_file_data = File.read(manifest_path)
|
79
|
-
JSON.parse(manifest_file_data)["assets"]
|
80
|
-
else
|
81
|
-
YAML.safe_load(manifest_file)
|
82
|
-
end
|
83
|
-
|
84
|
-
# We realize that we're copying other Rails assets that match the regexp, but this just
|
85
|
-
# means that we'd be exposing the original, undigested names.
|
86
|
-
manifest_data.each do |original_filename, rails_digested_filename|
|
87
|
-
# TODO: we should remove any original_filename that is NOT in the webpack deploy folder.
|
88
|
-
next unless original_filename =~ @symlink_non_digested_assets_regex
|
89
|
-
# We're symlinking from the digested filename back to the original filename which has
|
90
|
-
# already been symlinked by Webpack
|
91
|
-
symlink_file(rails_digested_filename, original_filename)
|
92
|
-
|
93
|
-
# We want the gz ones as well if they exist
|
94
|
-
if File.exist?(@assets_path.join("#{rails_digested_filename}.gz"))
|
95
|
-
symlink_file("#{rails_digested_filename}.gz", "#{original_filename}.gz")
|
96
|
-
end
|
97
|
-
end
|
98
|
-
end
|
99
|
-
|
100
|
-
def delete_broken_symlinks
|
101
|
-
Dir.glob(@assets_path.join("*")).each do |filename|
|
102
|
-
next unless File.lstat(filename).symlink?
|
103
|
-
begin
|
104
|
-
target = File.readlink(filename)
|
105
|
-
rescue StandardError
|
106
|
-
puts "React on Rails: Warning: your platform doesn't support File::readlink method." \
|
107
|
-
"Skipping broken link check."
|
108
|
-
break
|
109
|
-
end
|
110
|
-
path = Pathname.new(File.dirname(filename))
|
111
|
-
target_path = path.join(target)
|
112
|
-
unless File.exist?(target_path)
|
113
|
-
puts "React on Rails: Deleting broken link: #{filename}"
|
114
|
-
File.delete(filename)
|
115
|
-
end
|
116
|
-
end
|
117
|
-
end
|
118
|
-
|
119
|
-
def clobber
|
120
|
-
dir = Rails.root.join(@generated_assets_dir)
|
121
|
-
if dir.present? && File.directory?(dir)
|
122
|
-
puts "Deleting files in directory #{dir}"
|
123
|
-
FileUtils.rm_r(Dir.glob(Rails.root.join("#{@generated_assets_dir}/*")))
|
124
|
-
else
|
125
|
-
puts "Could not find generated_assets_dir #{dir} defined in react_on_rails initializer: "
|
126
|
-
end
|
127
|
-
end
|
128
|
-
|
129
|
-
private
|
130
|
-
|
131
|
-
def take_most_recent_manifest_path(manifest_glob)
|
132
|
-
manifest_glob.max_by { |name| File.mtime(name) }
|
133
|
-
end
|
134
|
-
|
135
|
-
def symlink_and_points_to_existing_file?(symlink_path)
|
136
|
-
# File.exist?(symlink_path) will check the file the sym is pointing to is existing
|
137
|
-
# File.lstat(symlink_path).symlink? confirms that this is a symlink
|
138
|
-
File.exist?(symlink_path) && File.lstat(symlink_path).symlink?
|
139
|
-
end
|
140
|
-
|
141
|
-
def file_or_symlink_exists_at_path?(path)
|
142
|
-
# We use lstat and not stat, we we don't want to visit the file that the symlink maybe
|
143
|
-
# pointing to. We can't use File.exist?, as that would check the file pointed at by the symlink.
|
144
|
-
File.lstat(path)
|
145
|
-
true
|
146
|
-
rescue StandardError
|
147
|
-
false
|
148
|
-
end
|
149
|
-
end
|
150
|
-
end
|