react_on_rails 10.0.0 → 11.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.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc +4 -0
  3. data/.rubocop.yml +2 -2
  4. data/.travis.yml +3 -0
  5. data/CHANGELOG.md +81 -88
  6. data/CONTRIBUTING.md +0 -7
  7. data/Dockerfile_tests +12 -0
  8. data/Gemfile +8 -13
  9. data/NEWS.md +2 -0
  10. data/PROJECTS.md +10 -2
  11. data/README.md +137 -121
  12. data/app/helpers/react_on_rails_helper.rb +1 -533
  13. data/docker-compose.yml +11 -0
  14. data/docs/additional-reading/caching-and-performance.md +4 -0
  15. data/docs/additional-reading/capistrano-deployment.md +18 -0
  16. data/docs/additional-reading/elastic-beanstalk.md +53 -33
  17. data/docs/additional-reading/server-rendering-tips.md +4 -4
  18. data/docs/additional-reading/troubleshooting-when-using-webpacker.md +90 -0
  19. data/docs/api/ruby-api.md +7 -2
  20. data/docs/basics/configuration.md +23 -9
  21. data/docs/basics/i18n.md +4 -0
  22. data/docs/basics/upgrading-react-on-rails.md +181 -0
  23. data/docs/tutorial.md +7 -11
  24. data/lib/generators/react_on_rails/base_generator.rb +6 -3
  25. data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
  26. data/lib/generators/react_on_rails/install_generator.rb +1 -1
  27. data/lib/generators/react_on_rails/react_no_redux_generator.rb +1 -1
  28. data/lib/generators/react_on_rails/react_with_redux_generator.rb +2 -2
  29. data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +1 -1
  30. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +3 -2
  31. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +2 -2
  32. data/lib/react_on_rails/assets_precompile.rb +8 -4
  33. data/lib/react_on_rails/configuration.rb +34 -20
  34. data/lib/react_on_rails/error.rb +4 -0
  35. data/lib/react_on_rails/locales_to_js.rb +2 -2
  36. data/lib/react_on_rails/prerender_error.rb +2 -2
  37. data/lib/react_on_rails/react_on_rails_helper.rb +547 -0
  38. data/lib/react_on_rails/server_rendering_pool/{exec.rb → ruby_embedded_java_script.rb} +37 -40
  39. data/lib/react_on_rails/server_rendering_pool.rb +21 -10
  40. data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +2 -2
  41. data/lib/react_on_rails/test_helper.rb +1 -1
  42. data/lib/react_on_rails/utils.rb +14 -52
  43. data/lib/react_on_rails/version.rb +1 -1
  44. data/lib/react_on_rails/version_checker.rb +33 -12
  45. data/lib/react_on_rails/webpacker_utils.rb +42 -0
  46. data/lib/react_on_rails.rb +3 -2
  47. data/package.json +2 -5
  48. data/rakelib/dummy_apps.rake +2 -1
  49. data/rakelib/example_type.rb +1 -1
  50. data/rakelib/examples.rake +3 -2
  51. data/rakelib/lint.rake +3 -2
  52. data/rakelib/node_package.rake +2 -1
  53. data/rakelib/release.rake +4 -5
  54. data/rakelib/run_rspec.rake +3 -4
  55. data/rakelib/task_helpers.rb +1 -1
  56. data/react_on_rails.gemspec +23 -13
  57. data/yarn.lock +3 -39
  58. metadata +75 -49
  59. data/lib/react_on_rails/server_rendering_pool/node.rb +0 -83
  60. data/lib/react_on_rails/test_helper/node_process_launcher.rb +0 -14
@@ -17,15 +17,15 @@ The point is that you have separate files for top level client or server side, a
17
17
  ## Troubleshooting Server Rendering
18
18
 
19
19
  1. First be sure your code works with server rendering disabled (`prerender: false`)
20
- 2. `export TRACE_REACT_ON_RAILS=TRUE` Turn this on to get both the invocation code for you component, as well as the whole file used to setup the JavaScript context.
20
+ 2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Webpacker, you will also get the whole file used to setup the JavaScript context.
21
21
 
22
- ## setTimeout and setInterval
22
+ ## setTimeout, setInterval, and clearTimeout
23
23
 
24
- These methods are polyfilled for server rendering to be no-ops. We don't log calls to these by default as some libraries, namely babel-polyfill, will call setTimout. If you wish to log calls to setTimeout and setInterval, set the ENV value: `export TRACE_REACT_ON_RAILS=TRUE`.
24
+ These methods are polyfilled for server rendering to be no-ops. We log calls to these when in `trace` mode. In the past, some libraries, namely babel-polyfill, did call setTimout.
25
25
 
26
26
  Here's an example of this which shows the line numbers that end up calling setTimeout:
27
27
  ```
28
- ➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ export TRACE_REACT_ON_RAILS=TRUE
28
+ ➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ export SERVER_TRACE_REACT_ON_RAILS=TRUE
29
29
  ➜ ~/shakacode/react_on_rails/gen-examples/examples/basic-server-rendering (add-rails-helper-to-generator u=) ✗ rspec
30
30
  Hello World
31
31
  Building Webpack client-rendering assets...
@@ -0,0 +1,90 @@
1
+ ## Context
2
+
3
+ Rails: 5.0.2
4
+ react_on_rails: upgraded from 6.6.0 to 9.0.3
5
+
6
+ ## The failure
7
+
8
+ Rspec failing with
9
+ ```
10
+ Failure/Error: raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
11
+
12
+ Webpacker::Manifest::MissingEntryError:
13
+ Webpacker can't find webpack-bundle.js in /home/user/ws/pp/code/pp-core-checkout_spa_update_npm/public/webpack-test/manifest.json. Possible causes:
14
+ 1. You want to set webpacker.yml value of compile to true for your environment
15
+ unless you are using the `webpack -w` or the webpack-dev-server.
16
+ 2. Webpack has not yet re-run to reflect updates.
17
+ 3. You have misconfigured Webpacker's config/webpacker.yml file.
18
+ 4. Your Webpack configuration is not creating a manifest.
19
+ Your manifest contains:
20
+ {
21
+ "main.css": "/webpack-test/main-bundle.css",
22
+ "main.js": "/webpack-test/main-dde0e05a2817931424c3.js"
23
+ }
24
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:44:in `handle_missing_entry'
25
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:40:in `find'
26
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/webpacker-3.0.1/lib/webpacker/manifest.rb:27:in `lookup'
27
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/utils.rb:145:in `bundle_js_file_path_from_webpacker'
28
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/utils.rb:90:in `bundle_js_file_path'
29
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:56:in `block in all_compiled_assets'
30
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:55:in `map'
31
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:55:in `all_compiled_assets'
32
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb:35:in `stale_generated_webpack_files'
33
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper/ensure_assets_compiled.rb:34:in `call'
34
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper.rb:85:in `ensure_assets_compiled'
35
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react_on_rails-9.0.3/lib/react_on_rails/test_helper.rb:39:in `block (2 levels) in configure_rspec_to_compile_assets'
36
+ # /home/user/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rspec-core-3.5.4/lib/rspec/core/example.rb:443:in `instance_exec'
37
+ ...
38
+ ```
39
+
40
+ At the same time dev/prod environments works fine (with extra webpack calling step outside rails).
41
+
42
+ ## Configs
43
+
44
+ ### webpack.config.js
45
+
46
+ ```js
47
+ ...
48
+ const ManifestPlugin = require('webpack-manifest-plugin');
49
+ ...
50
+ const { output } = webpackConfigLoader(configPath);
51
+ ...
52
+ output: {
53
+ filename: '[name]-[hash].js',
54
+
55
+ // Leading and trailing slashes ARE necessary.
56
+ publicPath: output.publicPath,
57
+ path: output.path,
58
+ },
59
+ ...
60
+ plugins: [
61
+ ...
62
+ new ManifestPlugin({
63
+ publicPath: output.publicPath,
64
+ writeToFileEmit: true
65
+ }),
66
+ ...
67
+ ]
68
+ ...
69
+ ```
70
+
71
+ ### config/webpacker.yml
72
+
73
+ is default from sample appliction v9.x
74
+
75
+ ### config/initializers/react_on_rails.rb
76
+
77
+ ```ruby
78
+ ...
79
+ # Define the files we need to check for webpack compilation when running tests.
80
+ config.webpack_generated_files = %w( webpack-bundle.js main-bundle.css )
81
+ ...
82
+ ```
83
+
84
+ ## The problem
85
+
86
+ When `ReactOnRails.configuration.webpack_generated_files` is specified, it prevents usage of `manifest.json`
87
+
88
+ ## Solution
89
+
90
+ Removing of `config.webpack_generated_files` from `config/initializers/react_on_rails.rb` resolving issue.
data/docs/api/ruby-api.md CHANGED
@@ -1,3 +1,8 @@
1
- PENDING:
1
+ # View Helpers
2
+ See the [app/helpers/react_on_rails_helper.rb](../../app/helpers/react_on_rails_helper.rb) source.
2
3
 
3
- Should we document the view helpers here concisely?
4
+ # Controller Helpers
5
+ See the [lib/react_on_rails/controller.rb](../../lib/react_on_rails/controller.rb) source.
6
+
7
+ # Utility Methods
8
+ See the [lib/react_on_rails/utils.rb](../../lib/react_on_rails/utils.rb) source.
@@ -1,4 +1,4 @@
1
- Here is the full set of config options.
1
+ Here is the full set of config options. This file is `/config/initializers/react_on_rails.rb`
2
2
 
3
3
  ```ruby
4
4
  # frozen_string_literal: true
@@ -7,6 +7,13 @@ Here is the full set of config options.
7
7
  # Thus, you only need to pay careful attention to the non-commented settings in this file.
8
8
 
9
9
  ReactOnRails.configure do |config|
10
+ # `trace`: General debugging flag.
11
+ # The default is true for development, off otherwise.
12
+ # With true, you get detailed logs of rendering and stack traces if you call setTimout,
13
+ # setInterval, clearTimout when server rendering.
14
+ config.trace = Rails.env.development?
15
+
16
+
10
17
  # defaults to "" (top level)
11
18
  #
12
19
  config.node_modules_location = ""
@@ -66,6 +73,7 @@ ReactOnRails.configure do |config|
66
73
  #
67
74
  # While you may configure this to be the same as your client bundle file, this file is typically
68
75
  # different.
76
+ #
69
77
  config.server_bundle_js_file = "server-bundle.js"
70
78
 
71
79
  # If set to true, this forces Rails to reload the server bundle if it is modified
@@ -73,13 +81,15 @@ ReactOnRails.configure do |config|
73
81
  #
74
82
  config.development_mode = Rails.env.development?
75
83
 
76
- # For server rendering. This can be set to false so that server side messages are discarded.
84
+ # For server rendering so that it replays in the browser console.
85
+ # This can be set to false so that server side messages are not displayed in the browser.
77
86
  # Default is true. Be cautious about turning this off.
78
87
  # Default value is true
79
- #
88
+ #
80
89
  config.replay_console = true
81
90
 
82
- # Default is true. Logs server rendering messages to Rails.logger.info
91
+ # Default is true. Logs server rendering messages to Rails.logger.info. If false, you'll only
92
+ # see the server rendering messages in the browser console.
83
93
  #
84
94
  config.logging_on_server = true
85
95
 
@@ -88,7 +98,14 @@ ReactOnRails.configure do |config|
88
98
  #
89
99
  config.raise_on_prerender_error = false
90
100
 
91
- # Server rendering only (not for render_component helper)
101
+ ################################################################################
102
+ # Server Renderer Configuration for ExecJS
103
+ ################################################################################
104
+ # The default server rendering is ExecJS, probably using the mini_racer gem
105
+ # If you wish to use an alternative Node server rendering for higher performance,
106
+ # contact justin@shakacode.com for details.
107
+ #
108
+ # For ExecJS:
92
109
  # You can configure your pool of JS virtual machines and specify where it should load code:
93
110
  # On MRI, use `mini_racer` for the best performance
94
111
  # (see [discussion](https://github.com/reactjs/react-rails/pull/290))
@@ -111,7 +128,7 @@ ReactOnRails.configure do |config|
111
128
  # By default(without this option) all yaml files from Rails.root.join("config", "locales")
112
129
  # and installed gems are loaded
113
130
  config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
114
-
131
+
115
132
  ################################################################################
116
133
  ################################################################################
117
134
  # CLIENT RENDERING OPTIONS
@@ -120,9 +137,6 @@ ReactOnRails.configure do |config|
120
137
  ################################################################################
121
138
  # default is false
122
139
  config.prerender = false
123
-
124
- # default is true for development, off otherwise
125
- config.trace = Rails.env.development?
126
140
  end
127
141
 
128
142
  ```
data/docs/basics/i18n.md CHANGED
@@ -71,3 +71,7 @@ You can refer to [react-webpack-rails-tutorial](https://github.com/shakacode/rea
71
71
  { formatMessage(defaultMessages.yourLocaleKeyInCamelCase) }
72
72
  )
73
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.
@@ -0,0 +1,181 @@
1
+ # Upgrading React on Rails
2
+
3
+ ## Upgrading to version 11
4
+ * Remove `server_render_method` from config/initializers/react_on_rails.rb. Alternate server rendering methods are part of React on Rails Pro. If you want to use a custom renderer, contact justin@shakacode.com. We have a custom node rendering solution in production for egghead.io.
5
+ * Remove your usage of ENV["TRACE_REACT_ON_RAILS"] usage. You can get all tracing with either specifying trace at your component or in your config/initializers/react_on_rails.rb file.
6
+ * ReactOnRails::Utils.server_bundle_file_name and ReactOnRails::Utils.bundle_file_name were removed. React on Rails Pro contains upgrades to enable component and other types caching with React on Rails.
7
+
8
+
9
+ ## Upgrading to version 10
10
+
11
+ Pretty simple:
12
+ * Follow the steps to migrate to version 9 (except installing 10.x instead of 9.x)
13
+ * If you have `react_component` returning hashes, then switch to `react_component_hash` instead
14
+
15
+ ## Upgrading to version 9
16
+
17
+ ### Why Webpacker?
18
+ Webpacker provides areas of value:
19
+ * View helpers that support bypassing the asset pipeline, which allows you to avoid double minification and enable source maps in production. This is 100% a best practice as source maps in production greatly increases the value of services such as HoneyBadger or Sentry.
20
+ * A default Webpack config so that you only need to do minimal modifications and customizations. However, if you're doing server rendering, you may not want to give up control. Since Webpacker's default webpack config is changing often, we at Shakacode can give you definitive advice on webpack configuration best practices. In general, if you're happy with doing your own Webpack configuration, then we suggest using the `client` strategy discussed below. Most corporate projects will prefer having more control than direct dependence on webpacker easily allows.
21
+
22
+ ### Integrating Webpacker
23
+ Reason for doing this: This enables your webpack bundles to bypass the Rails asset pipeline and it's extra minification, enabling you to use source-maps in production, while still maintaining total control over everything in the client directory
24
+
25
+ #### From version 7 or lower
26
+
27
+ ##### ...while keeping your `client` directory
28
+ Unfortunately, this requires quite a few steps:
29
+ * `.gitignore`: add `/public/webpack/*`
30
+ * `Gemfile`: bump `react_on_rails` and add `webpacker`
31
+ * layout views: anything bundled by webpack will need to be requested by a `javascript_pack_tag` or `stylesheet_pack_tag`
32
+ * `config/initializers/assets.rb`: we no longer need to modify `Rails.application.config.assets.paths` or append anything to `Rails.application.config.assets.precompile`.
33
+ * `config/initializers/react_on_rails.rb`:
34
+ * Delete `config.generated_assets_dir`. Webpacker's config now supplies this information
35
+ * Replace `config.npm_build_(test|production)_command` with `config.build_(test|production)_command`
36
+ * `config/webpacker.yml`: start with our [example config](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/webpacker.yml) (feel free to modify it as needed). I recommend setting dev_server.hmr to false however since HMR is currently broken.
37
+ * `client/package.json`: bump `react_on_rails` (I recommend bumping `webpack` as well). You'll also need `js-yaml` if you're not already using `eslint` and `webpack-manifest-plugin` regardless.
38
+
39
+ ###### Client Webpack config:
40
+ * You'll need the following code to read data from the webpacker config:
41
+
42
+ ```
43
+ const path = require('path');
44
+ const ManifestPlugin = require('webpack-manifest-plugin'); // we'll use this later
45
+
46
+ const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
47
+ const configPath = path.resolve('..', 'config');
48
+ const { output } = webpackConfigLoader(configPath);
49
+ ```
50
+
51
+ * That output variable will be used for webpack's `output` rules:
52
+
53
+ ```
54
+ output: {
55
+ filename: '[name]-[chunkhash].js', // [chunkhash] because we've got to do our own cache-busting now
56
+ path: output.path,
57
+ publicPath: output.publicPath,
58
+ },
59
+ ```
60
+
61
+ * ...as well as for the output of plugins like `webpack-manifest-plugin`:
62
+
63
+ ```
64
+
65
+ new ManifestPlugin({
66
+ publicPath: output.publicPath,
67
+ writeToFileEmit: true
68
+ }),
69
+ ```
70
+
71
+ * If you're using referencing files or images with `url-loader` & `file-loader`, their publicpaths will have to change as well: `publicPath: '/webpack/',`
72
+ * If you're using `css-loader`, `webpack.optimize.CommonsChunkPlugin`, or `extract-text-webpack-plugin`, they will also need cache-busting!
73
+
74
+ ...and you're finally done!
75
+
76
+ ##### ...while replacing your `client` directory
77
+ * Make the same changes to `config/initializers/react_on_rails.rb as described above`
78
+ * Upgrade RoR & add Webpacker in the Gemfile
79
+ * Upgrade RoR in the `client/package.json`
80
+ * Run `bundle`
81
+ * Run `rails webpacker:install`
82
+ * Run `rails webpacker:install:react`
83
+ * Run `rails g react_on_rails:install`
84
+ * Move your entry point files to `app/javascript/packs`
85
+ * Either:
86
+ * Move all your source code to `app/javascript/bundles`, move your linter configs to the root directory, and then delete the `client` directory
87
+ * or just delete the webpack config and remove webpack, its loaders, and plugins from your `client/package.json`.
88
+
89
+ ...and you're done.
90
+
91
+ #### From version 8
92
+
93
+ For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https://github.com/shakacode/react-webpack-rails-tutorial/pull/416).
94
+
95
+ - Breaking Configuration Changes
96
+ 1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
97
+ 2. Renamed
98
+ * config.npm_build_test_command ==> config.build_test_command
99
+ * config.npm_build_production_command ==> config.build_production_command
100
+
101
+ - Update the gemfile. Switch over to using the webpacker gem.
102
+
103
+ ```rb
104
+ gem "webpacker"
105
+ ```
106
+
107
+ - Update for the renaming in the `WebpackConfigLoader` in your webpack configuration.
108
+ You will need to rename the following object properties:
109
+ - webpackOutputPath ==> output.path
110
+ - webpackPublicOutputDir ==> output.publicPath
111
+ - hotReloadingUrl ==> output.publicPathWithHost
112
+ - hotReloadingHostname ==> settings.dev_server.host
113
+ - hotReloadingPort ==> settings.dev_server.port
114
+ - hmr ==> settings.dev_server.hmr
115
+ - manifest ==> Remove this one. We use the default for Webpack of manifest.json
116
+ - env ==> Use `const { env } = require('process');`
117
+ - devBuild ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
118
+
119
+ - Edit your Webpack.config files:
120
+ - Change your Webpack output to be like this. **Be sure to have the hash or chunkhash in the filename,** unless the bundle is server side.:
121
+ ```
122
+ const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
123
+ const configPath = resolve('..', 'config');
124
+ const { output, settings } = webpackConfigLoader(configPath);
125
+ const hmr = settings.dev_server.hmr;
126
+ const devBuild = process.env.NODE_ENV !== 'production';
127
+
128
+ output: {
129
+ filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
130
+ chunkFilename: '[name]-[chunkhash].chunk.js',
131
+
132
+ publicPath: output.publicPath,
133
+ path: output.path,
134
+ },
135
+ ```
136
+ - Change your ManifestPlugin definition to something like the following
137
+ ```
138
+ new ManifestPlugin({
139
+ publicPath: output.publicPath,
140
+ writeToFileEmit: true
141
+ }),
142
+
143
+ ```
144
+
145
+ - Find your `webpacker_lite.yml` and rename it to `webpacker.yml`
146
+ - Consider copying a default webpacker.yml setup such as https://github.com/shakacode/react-on-rails-v9-rc-generator/blob/master/config/webpacker.yml
147
+ - If you are not using the webpacker webpacker setup, be sure to put in `compile: false` in the `default` section.
148
+ - Alternately, if you are updating from webpacker_lite, you can manually change these:
149
+ - Add a default setting
150
+ ```
151
+ cache_manifest: false
152
+ ```
153
+ - For production, set:
154
+ ```
155
+ cache_manifest: true
156
+ ```
157
+ - Add a section like this under your development env:
158
+ ```
159
+ dev_server:
160
+ host: localhost
161
+ port: 3035
162
+ hmr: false
163
+ ```
164
+ Set hmr to your preference.
165
+ - See the example `spec/dummy/config/webpacker.yml`.
166
+ - Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
167
+ - Rename `webpack_public_output_dir` to `public_output_path`.
168
+
169
+ - Edit your Procfile.dev
170
+ - Remove the env value WEBPACKER_DEV_SERVER as it's not used
171
+ - For hot loading:
172
+ - Set the `hmr` key in your `webpacker.yml` to `true`.
173
+
174
+ ### Without integrating webpacker
175
+ * Bump your ReactOnRails versions in `Gemfile` & `package.json`
176
+ * In `/config/initializers/react_on_rails.rb`:
177
+ * Rename `config.npm_build_test_command` ==> `config.build_test_command`
178
+ * Rename `config.npm_build_production_command` ==> `config.build_production_command`
179
+ * Add `config.node_modules_location = "client"`
180
+
181
+ ...and you're done.
data/docs/tutorial.md CHANGED
@@ -1,9 +1,6 @@
1
1
  # React on Rails Basic Tutorial
2
2
 
3
- * NOTE: Please be sure to use the BETA or RC versions of React on Rails until 9.0 is released.*
4
-
5
-
6
- This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering. It is updated to 9.0.0.
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.
7
4
 
8
5
  After finishing this tutorial you will get an application that can do the following (live on Heroku):
9
6
 
@@ -39,7 +36,7 @@ gem install rails # download and install latest stable Rails
39
36
  gem install foreman # download and install Foreman
40
37
  ```
41
38
 
42
- Then we need to create a fresh Rails application with webpacker react support as following. Be sure that
39
+ Then we need to create a fresh Rails application with webpacker react support as following.
43
40
 
44
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).
45
42
 
@@ -52,23 +49,22 @@ rails new test-react-on-rails --webpack=react
52
49
  cd test-react-on-rails
53
50
  ```
54
51
 
55
- Note: you can do the following two commands in an existing Rails app or pre Rails 5.1.3:
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:
56
53
 
57
54
  ```
58
55
  bundle exec rails webpacker:install
59
56
  bundle exec rails webpacker:install:react
60
57
  ```
61
58
 
62
-
63
-
64
59
  Add the **React On Rails** gem to your Gemfile:
65
60
 
66
61
  ```
67
- gem 'react_on_rails', '9.0.0' # use latest gem version, prefer exact version
62
+ gem 'react_on_rails', '10.0.2' # prefer exact gem version to match npm version
68
63
  ```
69
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.
70
66
 
71
- Then run `bundle` and commit the git repository (or `rails generate` will not work properly)
67
+ Run `bundle` and commit the git repository (or `rails generate` will not work properly)
72
68
 
73
69
 
74
70
  ```
@@ -80,7 +76,7 @@ git add -A
80
76
  git commit -m "Initial commit"
81
77
  ```
82
78
 
83
- Install React on Rails: `rails generator 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.
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.
84
80
 
85
81
  ```
86
82
  rails generate react_on_rails:install
@@ -9,7 +9,7 @@ module ReactOnRails
9
9
  class BaseGenerator < Rails::Generators::Base
10
10
  include GeneratorHelper
11
11
  Rails::Generators.hide_namespace(namespace)
12
- source_root(File.expand_path("../templates", __FILE__))
12
+ source_root(File.expand_path("templates", __dir__))
13
13
 
14
14
  # --redux
15
15
  class_option :redux,
@@ -43,7 +43,7 @@ module ReactOnRails
43
43
  end
44
44
 
45
45
  def add_yarn_dependencies
46
- run "yarn add react-on-rails"
46
+ run "yarn add react-on-rails --exact"
47
47
  end
48
48
 
49
49
  def append_to_spec_rails_helper
@@ -55,6 +55,7 @@ module ReactOnRails
55
55
  if File.exist?(spec_helper)
56
56
  add_configure_rspec_to_compile_assets(spec_helper)
57
57
  else
58
+ # rubocop:disable Layout/EmptyLinesAroundArguments
58
59
  GeneratorMessages.add_info(
59
60
  <<-MSG.strip_heredoc
60
61
 
@@ -67,6 +68,8 @@ module ReactOnRails
67
68
  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
68
69
  MSG
69
70
  )
71
+ # rubocop:enable Layout/EmptyLinesAroundArguments
72
+
70
73
  end
71
74
  end
72
75
  end
@@ -95,7 +98,7 @@ module ReactOnRails
95
98
  - Visit http://localhost:3000/hello_world and see your React On Rails app running!
96
99
 
97
100
  - Run bin/webpack-dev-server to start the Webpack dev server for compilation of Webpack
98
- assets assets as soon as you save. This default setup with the dev server does not work
101
+ assets as soon as you save. This default setup with the dev server does not work
99
102
  for server rendering
100
103
 
101
104
  - Alternately, you may turn off compile in config/webpacker.yml and run the foreman
@@ -8,7 +8,7 @@ module ReactOnRails
8
8
  class DevTestsGenerator < Rails::Generators::Base
9
9
  include GeneratorHelper
10
10
  Rails::Generators.hide_namespace(namespace)
11
- source_root(File.expand_path("../templates/dev_tests", __FILE__))
11
+ source_root(File.expand_path("templates/dev_tests", __dir__))
12
12
 
13
13
  # --example-server-rendering
14
14
  class_option :example_server_rendering,
@@ -10,7 +10,7 @@ module ReactOnRails
10
10
  include GeneratorHelper
11
11
 
12
12
  # fetch USAGE file for details generator description
13
- source_root(File.expand_path("../", __FILE__))
13
+ source_root(File.expand_path(__dir__))
14
14
 
15
15
  # --redux
16
16
  class_option :redux,
@@ -8,7 +8,7 @@ module ReactOnRails
8
8
  class ReactNoReduxGenerator < Rails::Generators::Base
9
9
  include GeneratorHelper
10
10
  Rails::Generators.hide_namespace(namespace)
11
- source_root(File.expand_path("../templates", __FILE__))
11
+ source_root(File.expand_path("templates", __dir__))
12
12
 
13
13
  def copy_base_files
14
14
  base_js_path = "base/base"
@@ -6,7 +6,7 @@ module ReactOnRails
6
6
  module Generators
7
7
  class ReactWithReduxGenerator < Rails::Generators::Base
8
8
  Rails::Generators.hide_namespace(namespace)
9
- source_root(File.expand_path("../templates", __FILE__))
9
+ source_root(File.expand_path("templates", __dir__))
10
10
 
11
11
  def create_redux_directories
12
12
  dirs = %w[actions constants containers reducers store startup]
@@ -14,7 +14,7 @@ module ReactOnRails
14
14
  end
15
15
 
16
16
  def copy_base_files
17
- base_js_path = "base/base"
17
+ base_js_path = "redux/base"
18
18
  base_files = %w[app/javascript/bundles/HelloWorld/components/HelloWorld.jsx]
19
19
  base_files.each { |file| copy_file("#{base_js_path}/#{file}", file) }
20
20
  end
@@ -13,7 +13,7 @@ export default class HelloWorld extends React.Component {
13
13
  super(props);
14
14
 
15
15
  // How to set initial state in ES6 class syntax
16
- // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
16
+ // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
17
17
  this.state = { name: this.props.name };
18
18
  }
19
19
 
@@ -1,11 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- # See docs/basics/configuration.md for many more options
3
+ # See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md
4
+ # for many more options.
4
5
 
5
6
  ReactOnRails.configure do |config|
6
7
  # This configures the script to run to build the production assets by webpack. Set this to nil
7
8
  # if you don't want react_on_rails building this file for you.
8
- config.build_production_command = "RAILS_ENV=production bin/webpack"
9
+ config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpack"
9
10
 
10
11
  ################################################################################
11
12
  ################################################################################
@@ -6,13 +6,13 @@ if ENV["COVERAGE"] == "true"
6
6
  require "simplecov"
7
7
 
8
8
  # Using a command name prevents results from getting clobbered by other test suites
9
- example_name = File.basename(File.expand_path("../../../.", __FILE__))
9
+ example_name = File.basename(File.expand_path("../..", __dir__))
10
10
  SimpleCov.command_name(example_name)
11
11
 
12
12
  SimpleCov.start("rails") do
13
13
  # Consider the entire gem project as the root
14
14
  # (typically this will be the folder named "react_on_rails")
15
- gem_root_path = File.expand_path("../../../../../.", __FILE__)
15
+ gem_root_path = File.expand_path("../../../..", __dir__)
16
16
  root gem_root_path
17
17
 
18
18
  # Don't report anything that has "spec" in the path
@@ -72,7 +72,7 @@ module ReactOnRails
72
72
  "or manifest.yml at #{@assets_path}, but found none. Canceling symlinking tasks."
73
73
  return -1
74
74
  end
75
- manifest_path = manifest_glob.first
75
+ manifest_path = take_most_recent_manifest_path(manifest_glob)
76
76
  manifest_file = File.new(manifest_path)
77
77
  manifest_data = if File.extname(manifest_file) == ".json"
78
78
  manifest_file_data = File.read(manifest_path)
@@ -102,8 +102,8 @@ module ReactOnRails
102
102
  next unless File.lstat(filename).symlink?
103
103
  begin
104
104
  target = File.readlink(filename)
105
- rescue # rubocop:disable Lint/RescueWithoutErrorClass
106
- puts "React on Rails: Warning: your platform doesn't support File::readlink method." /
105
+ rescue StandardError
106
+ puts "React on Rails: Warning: your platform doesn't support File::readlink method." \
107
107
  "Skipping broken link check."
108
108
  break
109
109
  end
@@ -128,6 +128,10 @@ module ReactOnRails
128
128
 
129
129
  private
130
130
 
131
+ def take_most_recent_manifest_path(manifest_glob)
132
+ manifest_glob.max_by { |name| File.mtime(name) }
133
+ end
134
+
131
135
  def symlink_and_points_to_existing_file?(symlink_path)
132
136
  # File.exist?(symlink_path) will check the file the sym is pointing to is existing
133
137
  # File.lstat(symlink_path).symlink? confirms that this is a symlink
@@ -139,7 +143,7 @@ module ReactOnRails
139
143
  # pointing to. We can't use File.exist?, as that would check the file pointed at by the symlink.
140
144
  File.lstat(path)
141
145
  true
142
- rescue # rubocop:disable Lint/RescueWithoutErrorClass
146
+ rescue StandardError
143
147
  false
144
148
  end
145
149
  end