react_on_rails 8.0.2 → 9.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 (84) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintignore +2 -0
  3. data/.gitignore +2 -2
  4. data/.rubocop.yml +5 -0
  5. data/.travis.yml +12 -1
  6. data/CHANGELOG.md +185 -6
  7. data/CONTRIBUTING.md +2 -2
  8. data/Gemfile +6 -2
  9. data/Gemfile.rails32 +74 -0
  10. data/KUDOS.md +5 -0
  11. data/README.md +200 -84
  12. data/Rakefile +11 -1
  13. data/app/helpers/react_on_rails_helper.rb +1 -1
  14. data/docs/additional-reading/asset-pipeline.md +20 -0
  15. data/docs/additional-reading/hot-reloading-rails-development.md +4 -75
  16. data/docs/additional-reading/node-server-rendering.md +2 -166
  17. data/docs/additional-reading/rails-assets-relative-paths.md +3 -1
  18. data/docs/additional-reading/rails-engine-integration.md +1 -1
  19. data/docs/additional-reading/rspec-configuration.md +7 -24
  20. data/docs/api/ruby-api-hot-reload-view-helpers.md +2 -2
  21. data/{lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt → docs/basics/configuration.md} +80 -41
  22. data/docs/basics/generator.md +0 -5
  23. data/docs/basics/installation-overview.md +6 -5
  24. data/docs/contributor-info/generator-testing.md +0 -9
  25. data/docs/tutorial.md +31 -34
  26. data/lib/generators/USAGE +0 -4
  27. data/lib/generators/react_on_rails/base_generator.rb +43 -76
  28. data/lib/generators/react_on_rails/dev_tests_generator.rb +7 -5
  29. data/lib/generators/react_on_rails/install_generator.rb +5 -10
  30. data/lib/generators/react_on_rails/react_no_redux_generator.rb +10 -9
  31. data/lib/generators/react_on_rails/react_with_redux_generator.rb +27 -17
  32. data/lib/generators/react_on_rails/templates/.eslintrc +2 -0
  33. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +4 -0
  34. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +5 -0
  35. data/lib/generators/react_on_rails/templates/base/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +1 -2
  36. data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +0 -1
  37. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb +12 -0
  38. data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +41 -0
  39. data/lib/generators/react_on_rails/templates/dev_tests/.eslintrc +25 -0
  40. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +0 -1
  41. data/lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb +1 -1
  42. data/lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb +2 -0
  43. data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/startup/HelloWorldApp.jsx +1 -3
  44. data/lib/react_on_rails/configuration.rb +21 -16
  45. data/lib/react_on_rails/git_utils.rb +9 -3
  46. data/lib/react_on_rails/prerender_error.rb +15 -9
  47. data/lib/react_on_rails/server_rendering_pool/exec.rb +21 -8
  48. data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
  49. data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +3 -1
  50. data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +12 -8
  51. data/lib/react_on_rails/test_helper.rb +7 -6
  52. data/lib/react_on_rails/utils.rb +77 -16
  53. data/lib/react_on_rails/version.rb +1 -1
  54. data/lib/react_on_rails/version_checker.rb +2 -1
  55. data/lib/tasks/assets.rake +12 -4
  56. data/package.json +25 -21
  57. data/rakelib/dummy_apps.rake +9 -0
  58. data/rakelib/example_type.rb +4 -70
  59. data/rakelib/examples.rake +5 -55
  60. data/rakelib/node_package.rake +1 -0
  61. data/rakelib/release.rake +9 -1
  62. data/rakelib/run_rspec.rake +24 -5
  63. data/react_on_rails.gemspec +2 -1
  64. data/webpackConfigLoader.js +45 -72
  65. data/yarn.lock +638 -252
  66. metadata +36 -26
  67. data/lib/generators/react_on_rails/node_generator.rb +0 -24
  68. data/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt +0 -2
  69. data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb.tt +0 -15
  70. data/lib/generators/react_on_rails/templates/base/base/client/.babelrc +0 -3
  71. data/lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md +0 -9
  72. data/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +0 -36
  73. data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +0 -77
  74. data/lib/generators/react_on_rails/templates/base/base/config/webpacker_lite.yml +0 -27
  75. data/lib/generators/react_on_rails/templates/base/base/package.json.tt +0 -8
  76. data/lib/generators/react_on_rails/templates/node/base/client/node/package.json +0 -10
  77. data/lib/generators/react_on_rails/templates/node/base/client/node/server.js +0 -105
  78. /data/lib/generators/react_on_rails/templates/base/base/{client/app/bundles/HelloWorld/startup/registration.jsx.tt → app/javascript/packs/registration.js.tt} +0 -0
  79. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx → app/javascript/bundles/HelloWorld/actions/helloWorldActionCreators.js} +0 -0
  80. /data/lib/generators/react_on_rails/templates/redux/base/{client/app → app/javascript}/bundles/HelloWorld/components/HelloWorld.jsx +0 -0
  81. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx → app/javascript/bundles/HelloWorld/constants/helloWorldConstants.js} +0 -0
  82. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx → app/javascript/bundles/HelloWorld/containers/HelloWorldContainer.js} +0 -0
  83. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx → app/javascript/bundles/HelloWorld/reducers/helloWorldReducer.js} +0 -0
  84. /data/lib/generators/react_on_rails/templates/redux/base/{client/app/bundles/HelloWorld/store/helloWorldStore.jsx → app/javascript/bundles/HelloWorld/store/helloWorldStore.js} +0 -0
@@ -0,0 +1,20 @@
1
+ # Asset Pipeline
2
+
3
+ The plumbing of webpack produced assets through the asset pipeline is deprecated as of v9.0.
4
+
5
+ The information in this document is here for those that have not yet upgraded.
6
+
7
+
8
+
9
+
10
+ This option still works for your `/config/initializers/react_on_rails.rb` if you are still using the
11
+ asset pipeline.
12
+ ```
13
+ ################################################################################
14
+ # MISCELLANEOUS OPTIONS
15
+ ################################################################################
16
+ # If you want to use webpack for CSS and images, and still use the asset pipeline,
17
+ # see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md
18
+ # And you will use a setting like this.
19
+ config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/
20
+ ```
@@ -1,5 +1,9 @@
1
1
  # Hot Reloading of Assets For Rails Development
2
2
 
3
+ _Note, this document is not yet updated for React on Rails v8+. See [PR #865](https://github.com/shakacode/react_on_rails/pull/865) for a detailed example of doing hot reloading using V8+ with Webpack v2. Any volunteers to update this page? See [#772](https://github.com/shakacode/react_on_rails/issues/772) and [#361](https://github.com/shakacode/react-webpack-rails-tutorial/issues/361)._
4
+
5
+ ------
6
+
3
7
  This document outlines the steps to setup your React On Rails Environment so that you can experience the pleasure of hot reloading of JavaScript and Sass during your Rails development work. See [Issue 332](https://github.com/shakacode/react_on_rails/issues/332) for troubleshooting. There are 3 examples of this setup:
4
8
 
5
9
  1. [minimal demo here](https://github.com/retroalgic/react-on-rails-hot-minimal): The most simple and updated hot reloading setup.
@@ -16,8 +20,6 @@ We'll use a Webpack Dev server on port 3500 to provide the assets to Rails, rath
16
20
 
17
21
  `Procfile.static` provides an alternative that uses "static" assets, similar to a production deployment.
18
22
 
19
- The secret sauce is in the [app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb) where it uses view helps to configure the correct assets to load, being either the "hot" assets or the "static" assets.
20
-
21
23
  ## Places to Configure (Files to Examine)
22
24
 
23
25
  1. See the Webpack config files. Note, these examples are now setup for using [CSS Modules](https://github.com/css-modules/css-modules).
@@ -40,76 +42,3 @@ The secret sauce is in the [app/views/layouts/application.html.erb](https://gith
40
42
  ## Code Snippets
41
43
  Please refer to the examples linked above in `spec/dummy` as these code samples might be out of date.
42
44
 
43
-
44
- ### config/initializers/assets.rb
45
-
46
- ```ruby
47
- # Add folder with webpack generated assets to assets.paths
48
- Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack")
49
-
50
- # Precompile additional assets.
51
- # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
52
- Rails.application.config.assets.precompile << "server-bundle.js"
53
-
54
- type = ENV["REACT_ON_RAILS_ENV"] == "HOT" ? "non_webpack" : "static"
55
- Rails.application.config.assets.precompile +=
56
- [
57
- "application_#{type}.js",
58
- "application_#{type}.css"
59
- ]
60
- ```
61
-
62
- ### app/views/layouts/application.html.erb
63
-
64
- ```erb
65
- <head>
66
- <title>Dummy</title>
67
-
68
- <!-- These do use turbolinks 5 -->
69
- <%= env_stylesheet_link_tag(static: 'application_static',
70
- hot: 'application_non_webpack',
71
- media: 'all',
72
- 'data-turbolinks-track' => "reload") %>
73
-
74
- <!-- These do not use turbolinks, so no data-turbolinks-track -->
75
- <!-- This is to load the hot assets. -->
76
- <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
77
- 'http://localhost:3500/app-bundle.js']) %>
78
-
79
- <!-- These do use turbolinks 5 -->
80
- <%= env_javascript_include_tag(static: 'application_static',
81
- hot: 'application_non_webpack',
82
- 'data-turbolinks-track' => "reload") %>
83
-
84
- <%= csrf_meta_tags %>
85
- </head>
86
- ```
87
-
88
- ### Procfile.static
89
- ```
90
- # Run Rails without hot reloading (static assets).
91
- rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
92
-
93
- # Build client assets, watching for changes.
94
- rails-client-assets: yarn run build:dev:client
95
-
96
- # Build server assets, watching for changes. Remove if not server rendering.
97
- rails-server-assets: yarn run build:dev:server
98
- ```
99
-
100
- ### Procfile.hot
101
-
102
- ```
103
- # Procfile for development with hot reloading of JavaScript and CSS
104
-
105
- # Development rails requires both rails and rails-assets
106
- # (and rails-server-assets if server rendering)
107
- rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
108
-
109
- # Run the hot reload server for client development
110
- hot-assets: HOT_RAILS_PORT=3500 yarn run hot-assets
111
-
112
- # Keep the JS fresh for server rendering. Remove if not server rendering
113
- rails-server-assets: yarn run build:dev:server
114
- ```
115
-
@@ -1,169 +1,5 @@
1
1
  # Node.js for Server Rendering
2
2
 
3
- Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains. We've found that using ExecJS with [mini_racer](https://github.com/discourse/mini_racer) to be "fast enough" so far. That being said, we've heard of other large websites using Node.js for better server rendering performance.
3
+ Node.js can be used as the backend for server-side rendering instead of [execJS](https://github.com/rails/execjs). Before you try this, consider the tradeoff of extra complexity with your deployments versus *potential* performance gains. While often ExecJS with [mini_racer](https://github.com/discourse/mini_racer) is "fast enough", we've heard of other large websites using Node.js for better server rendering performance.
4
4
 
5
- If you're serious about this comparing Node.js versus execJS/mini_racer, then [get in touch](mailto:justin@shakacode.com)! We can definitely collaborate with you on refining this solution. However, please try out these instructions first.
6
-
7
- ## Setup of React on Rails with Node.js Server Rendering
8
- **Warning: this is an experimental feature.**
9
-
10
- * Every time the webpack bundle changes, you have to restart the server yourself.
11
-
12
- To do this you need to add a few files and then configure react_on_rails to use NodeJS. Here are the relevant files to add.
13
-
14
- Node server rendering allows you to use separate NodeJS process as a renderer. The process loads your configured server_bundle_js file and then executes javascript to render the component inside its environment. The communication between rails and node occurs
15
- via a socket (`client/node/node.sock`)
16
-
17
- ### Getting started
18
-
19
- ### Configuration
20
-
21
- #### Update the React on Rails Initializer
22
-
23
- To use node process just set `server_render_method = "NodeJS"` in `config/initializers/react_on_rails.rb`. To change back
24
- to ExecJS set `server_render_method = "ExecJS"`
25
-
26
- ```ruby
27
- # app/config/initializers/react_on_rails.rb
28
- config.server_render_method = "NodeJS"
29
- ```
30
-
31
- You need to configure the name of the server bundle in two places:
32
-
33
- 1. JavaScript: Change the name of server bundle and adjust yarn start script in `client/node/package.json`
34
- 2. Ruby: The configured server bundle file is defined in `config/react_on_rails.rb`, and you'll have a webpack file that creates this. You maybe using the same file for client rendering.
35
-
36
- ```ruby
37
- # This is the file used for server rendering of React when using `(prerender: true)`
38
- # If you are never using server rendering, you may set this to "".
39
- # If you are using the same file for client and server rendering, having this set probably does
40
- # not affect performance.
41
- config.server_bundle_js_file = "webpack-bundle.js"
42
- ```
43
-
44
- And in `client/node/package.json`
45
-
46
- ```javascript
47
- // client/node/package.json
48
- {
49
- "name": "react_on_rails_node",
50
- "version": "0.0.0",
51
- "private": true,
52
- "scripts": {
53
- "start": "node ./server.js -s webpack-bundle.js"
54
- },
55
- "dependencies": {
56
- }
57
- }
58
- ```
59
-
60
- And you'll need this file: `client/node/server.js`
61
-
62
- ```javascript
63
- // client/node/server.js
64
- const net = require('net');
65
- const fs = require('fs');
66
-
67
- const bundlePath = '../../app/assets/webpack/';
68
- let bundleFileName = 'server-bundle.js';
69
-
70
- let currentArg;
71
-
72
- class Handler {
73
- constructor() {
74
- this.queue = [];
75
- this.initialized = false;
76
- }
77
-
78
- initialize() {
79
- console.log(`Processing ${this.queue.length} pending requests`);
80
- let callback;
81
-
82
- // eslint-disable-next-line no-cond-assign
83
- while (callback = this.queue.pop()) {
84
- callback();
85
- }
86
-
87
- this.initialized = true;
88
- }
89
-
90
- handle(connection) {
91
- const callback = () => {
92
- const terminator = '\r\n\0';
93
- let request = '';
94
- connection.setEncoding('utf8');
95
- connection.on('data', (data) => {
96
- console.log(`Processing chunk: ${data}`);
97
- request += data;
98
- if (data.slice(-terminator.length) === terminator) {
99
- request = request.slice(0, -terminator.length);
100
-
101
- // eslint-disable-next-line no-eval
102
- const response = eval(request);
103
- connection.write(`${response}${terminator}`);
104
- request = '';
105
- }
106
- });
107
- };
108
-
109
- if (this.initialized) {
110
- callback();
111
- } else {
112
- this.queue.push(callback);
113
- }
114
- }
115
- }
116
-
117
- const handler = new Handler();
118
-
119
- process.argv.forEach((val) => {
120
- if (val[0] === '-') {
121
- currentArg = val.slice(1);
122
- return;
123
- }
124
-
125
- if (currentArg === 's') {
126
- bundleFileName = val;
127
- }
128
- });
129
-
130
- function loadBundle() {
131
- if (handler.initialized) {
132
- console.log('Reloading server bundle must be implemented by restarting the node process!');
133
- return;
134
- }
135
-
136
- /* eslint-disable */
137
- require(bundlePath + bundleFileName);
138
- /* eslint-enable */
139
- console.log(`Loaded server bundle: ${bundlePath}${bundleFileName}`);
140
- handler.initialize();
141
- }
142
-
143
- try {
144
- fs.mkdirSync(bundlePath);
145
- } catch (e) {
146
- if (e.code !== 'EEXIST') {
147
- throw e;
148
- } else {
149
- loadBundle();
150
- }
151
- }
152
-
153
- fs.watchFile(bundlePath + bundleFileName, (curr) => {
154
- if (curr && curr.blocks && curr.blocks > 0) {
155
- loadBundle();
156
- }
157
- });
158
-
159
- const unixServer = net.createServer((connection) => {
160
- handler.handle(connection);
161
- });
162
-
163
- unixServer.listen('node.sock');
164
-
165
- process.on('SIGINT', () => {
166
- unixServer.close();
167
- process.exit();
168
- });
169
- ```
5
+ If you want to use a node server for server rendering, [get in touch](mailto:justin@shakacode.com). ShakaCode has built a premium Node rendering server for React on Rails.
@@ -1,3 +1,5 @@
1
+ *Note: this doc needs updating to reflect how v8.x+ no longer puts Webpack generated files through the asset pipeline. PR's welcome!*
2
+
1
3
  # Using Webpack bundled assets with the Rails Asset Pipeline
2
4
 
3
5
  **If you're looking to use assets in your react components, look no further. This doc is for you.**
@@ -136,7 +138,7 @@ module.exports = {
136
138
  ],
137
139
 
138
140
  output: {
139
- filename: 'webpack-bundle.js',
141
+ filename: 'hello-world-bundle.js',
140
142
  path: '../app/assets/webpack'
141
143
  },
142
144
 
@@ -20,7 +20,7 @@ Rake.application.remove_task('react_on_rails:assets:compile_environment')
20
20
 
21
21
  task 'react_on_rails:assets:compile_environment' do
22
22
  path = File.join(YourEngineName::Engine.root, 'client')
23
- sh "cd #{path} && #{ReactOnRails.configuration.npm_build_production_command}"
23
+ sh "cd #{path} && #{ReactOnRails.configuration.build_production_command}"
24
24
  end
25
25
  ```
26
26
  ## In the project including your engine
@@ -5,7 +5,6 @@ ReactOnRails provides a helper method called `ReactOnRails::TestHelper.configure
5
5
 
6
6
  ```ruby
7
7
  RSpec.configure do |config|
8
- # Next line will ensure that assets are built if webpack -w is not running to build the bundles
9
8
  ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
10
9
  ```
11
10
 
@@ -24,7 +23,9 @@ If you are using Webpack to build CSS assets, you should do something like this
24
23
  ```
25
24
 
26
25
  Please take note of the following:
27
- - This utility uses your `npm_build_test_command` to build the static generated files. This command **must** not include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles.
26
+ - This utility uses your `build_test_command` to build the static generated files. This command **must not** include the `--watch` option. If you have different server and client bundle files, this command **must** create all the bundles. If you are using webpacker, the default value will come from the `config/webpacker.yml` value for the `public_output_path` and the `source_path`
27
+ - If you add an older file to your source files, that is already older than the produced output files, no new recompilation is done. The solution to this issue is to clear out your directory of webpack generated files when adding new source files that may have older dates. This is actually a common occurrence when you've built your test generated files and then you sync up your repository files.
28
+
28
29
  - By default, the webpack processes look for the `app/assets/webpack` folders (configured as setting `webpack_generated_files` in the `config/react_on_rails.rb`. If this folder is missing, is empty, or contains files in the `config.webpack_generated_files` list with `mtime`s older than any of the files in your `client` folder, the helper will recompile your assets. You can override the location of these files inside of `config/initializers/react_on_rails.rb` by passing a filepath (relative to the root of the app) to the `generated_assets_dir` configuration option.
29
30
 
30
31
  The following `config/react_on_rails.rb` settings **must** match your setup:
@@ -35,37 +36,19 @@ The following `config/react_on_rails.rb` settings **must** match your setup:
35
36
  config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
36
37
 
37
38
  # Define the files we need to check for webpack compilation when running tests.
38
- config.webpack_generated_files = %w( webpack-bundle.js )
39
+ # Generally, the manifest.json is good enough for this check if using webpacker
40
+ config.webpack_generated_files = %w( hello-world-bundle.js )
39
41
 
40
42
  # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
41
43
  # with rspec then this controls what yarn command is run
42
44
  # to automatically refresh your webpack assets on every test run.
43
- config.npm_build_test_command = "yarn run build:test"
45
+ config.build_test_command = "yarn run build:test"
44
46
  ```
45
47
 
46
- If you want to speed up the re-compiling process, you can call `yarn run build:development` (per below script) to have webpack run in "watch" mode and recompile these files in the background, which will be much faster when making incremental changes than compiling from scratch, assuming you have your setup like this:
47
-
48
- ```
49
- "scripts": {
50
- "build:test": "webpack --config webpack.config.js",
51
- "build:production": "NODE_ENV=production webpack --config webpack.config.js",
52
- "build:development": "webpack -w --config webpack.config.js"
53
- },
54
- ```
48
+ If you want to speed up the re-compiling process so you don't wait to run your tests to build the files, you can run your test compilation with the "watch" flags.
55
49
 
56
50
  [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) contains examples of how to set the proc files for this purpose.
57
51
 
58
- ## Hot Reloading
59
- If you're using the hot reloading setup, you'll be running a Webpack development server to provide the JavaScript and mabye CSS assets to your Rails app. If you're doing server rendering, you'll also have a webpack watch process to refresh the server rendering file. **If your server and client bundles are different**, and you run specs, the client bundle files will not be created until React on Rails detects it's out of date. Then your script to create all bundle files will redo the server bundle file. There's a few simple remedies for this situation:
60
-
61
- 1. Switch to using static compilation of the webpack bundle files. This way, you're running a Webpack watch process to generate the same files used for tests as well as developmentment. You should have a separate Procfile for doing development using a "static" setup, rather than a "hot" setup.
62
- 2. Change your Procfile for starting the hot reloading server to also run a webpack process to automatically rebuild a the client assets while also doing hot reloading for browser testing.
63
-
64
- Note, none of these issues matter if you're using the same file for both server and client side rendering.
65
-
66
- ## Using RubyMine and other IDEs that save files right before invoking tests
67
- We had previously tried to allow using a process check to see if a Webpack watch process would already be automatically compiling the files. However, we removed this as it proved to be fragile with various setups. Thus, you want to hit the save keystroke when you save a JavaScript file, and then run your tests. Yes, you might not do this in time, and the test runner may be building the same files as you Webpack watch processes. This will probably happen infrequently, but if this does become an issue, we can look into bring back this functionality ([#398](https://github.com/shakacode/react_on_rails/pull/398)).
68
-
69
52
  If you want to use a testing framework other than RSpec, please submit let us know on the changes you need to do and we'll update the docs.
70
53
 
71
54
  ![2016-01-27_02-36-43](https://cloud.githubusercontent.com/assets/1118459/12611951/7c56d070-c4a4-11e5-8a80-9615f99960d9.png)
@@ -1,4 +1,4 @@
1
- ## NOTE: These helpers are NOT needed if using webpacker_lite
1
+ ## NOTE: These helpers are NOT needed if using webpacker
2
2
 
3
3
  ## Hot Reloading View Helpers
4
4
  The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
@@ -17,7 +17,7 @@ static vs. hot is picked based on whether `ENV["REACT_ON_RAILS_ENV"] == "HOT"`
17
17
  <!-- This is to load the hot assets. -->
18
18
 
19
19
  <!-- Note, you can have multiple files here. It's an array. -->
20
- <%= env_javascript_include_tag(hot: ['http://localhost:3500/webpack-bundle.js]') %>
20
+ <%= env_javascript_include_tag(hot: ['http://localhost:3500/hello-world-bundle.js]') %>
21
21
 
22
22
  <!-- These do use turbolinks -->
23
23
  <%= env_javascript_include_tag(static: 'application_static',
@@ -1,54 +1,92 @@
1
- # Shown below are the defaults for configuration
2
- ReactOnRails.configure do |config|
3
- # Client bundles are configured in application.js
1
+ Here is the full set of config options.
4
2
 
5
- # Directory where your generated assets go. All generated assets must go to the same directory.
6
- # Configure this in your webpack config files. This relative to your Rails root directory.
7
- config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
3
+ ```yaml
4
+ # frozen_string_literal: true
8
5
 
9
- # Define the files we need to check for webpack compilation when running tests.
10
- config.webpack_generated_files = %w( webpack-bundle.js )
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.
11
8
 
12
- # This is the file used for server rendering of React when using `(prerender: true)`
13
- # If you are never using server rendering, you may set this to "".
14
- # If you are using the same file for client and server rendering, having this set probably does
15
- # not affect performance.
16
- config.server_bundle_js_file = "webpack-bundle.js"
17
-
18
- # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
19
- # with rspec then this controls what yarn command is run
20
- # to automatically refresh your webpack assets on every test run.
21
- config.npm_build_test_command = "yarn run build:test"
9
+ ReactOnRails.configure do |config|
10
+ # defaults to "" (top level)
11
+ #
12
+ config.node_modules_location = ""
22
13
 
23
14
  # This configures the script to run to build the production assets by webpack. Set this to nil
24
15
  # if you don't want react_on_rails building this file for you.
25
- config.npm_build_production_command = "yarn run build:production"
16
+ config.build_production_command = "RAILS_ENV=production bin/webpack"
26
17
 
27
18
  ################################################################################
28
- # CLIENT RENDERING OPTIONS
29
- # Below options can be overriden by passing options to the react_on_rails
30
- # `render_component` view helper method.
31
19
  ################################################################################
32
- # default is false
33
- config.prerender = false
20
+ # TEST CONFIGURATION OPTIONS
21
+ # Below options are used with the use of this test helper:
22
+ # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
23
+ ################################################################################
34
24
 
35
- # default is true for development, off otherwise
36
- config.trace = Rails.env.development?
25
+ # If you are using this in your spec_helper.rb (or rails_helper.rb):
26
+ #
27
+ # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
28
+ #
29
+ # with rspec then this controls what yarn command is run
30
+ # to automatically refresh your webpack assets on every test run.
31
+ #
32
+ config.build_test_command = "RAILS_ENV=test bin/webpack"
37
33
 
34
+ # Directory where your generated assets go. All generated assets must go to the same directory.
35
+ # If you are using webpacker, this value will come from your config/webpacker.yml file.
36
+ # This is the default in webpacker.yml:
37
+ # public_output_path: packs-test
38
+ # which means files in /public/packs-test
39
+ #
40
+ # Alternately, you may configure this. It is relative to your Rails root directory.
41
+ # A custom, non-webpacker, config might use something like:
42
+ #
43
+ config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
44
+
45
+ # The test helper needs to know where your JavaScript files exist. The default is configured
46
+ # by your config/webpacker.yml soure_path:
47
+ # source_path: app/javascript
48
+ #
49
+ # If you have a non-default `node_modules_location`, that is assumed to be the location of your source
50
+ # files.
51
+
52
+ # Define the files we need to check for webpack compilation when running tests.
53
+ # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
54
+ #
55
+ config.webpack_generated_files = %w( manifest.json )
56
+
57
+ ################################################################################
38
58
  ################################################################################
39
59
  # SERVER RENDERING OPTIONS
40
60
  ################################################################################
61
+ # This is the file used for server rendering of React when using `(prerender: true)`
62
+ # If you are never using server rendering, you should set this to "".
63
+ # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
64
+ # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
65
+ # JavaScript execution instances which should handle any component requested.
66
+ #
67
+ # While you may configure this to be the same as your client bundle file, this file is typically
68
+ # different.
69
+ config.server_bundle_js_file = "server-bundle.js"
70
+
41
71
  # If set to true, this forces Rails to reload the server bundle if it is modified
72
+ # Default value is Rails.env.development?
73
+ #
42
74
  config.development_mode = Rails.env.development?
43
75
 
44
76
  # For server rendering. This can be set to false so that server side messages are discarded.
45
77
  # Default is true. Be cautious about turning this off.
78
+ # Default value is true
79
+ #
46
80
  config.replay_console = true
47
81
 
48
82
  # Default is true. Logs server rendering messages to Rails.logger.info
83
+ #
49
84
  config.logging_on_server = true
50
85
 
51
- config.raise_on_prerender_error = false # change to true to raise exception on server if the JS code throws
86
+ # Default is to false to NOT raise exception on server if the JS code throws.
87
+ # Reason is that it's easier to debug this when you get the error over to the client.
88
+ #
89
+ config.raise_on_prerender_error = false
52
90
 
53
91
  # Server rendering only (not for render_component helper)
54
92
  # You can configure your pool of JS virtual machines and specify where it should load code:
@@ -65,25 +103,26 @@ ReactOnRails.configure do |config|
65
103
  # Replace the following line to the location where you keep translation.js & default.js for use
66
104
  # by the npm packages react-intl. Be sure this directory exists!
67
105
  # config.i18n_dir = Rails.root.join("client", "app", "libs", "i18n")
106
+ # If not using the i18n feature, then leave this section commented out or set the value
107
+ # of config.i18n_dir to nil.
68
108
  #
69
109
  # Replace the following line to the location where you keep your client i18n yml files
70
110
  # that will source for automatic generation on translations.js & default.js
71
- # By default(without this option) all yaml files from Rails.root.join("config", "locales") and installed gems are loaded
72
- # config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
111
+ # By default(without this option) all yaml files from Rails.root.join("config", "locales")
112
+ # and installed gems are loaded
113
+ config.i18n_yml_dir = Rails.root.join("config", "locales", "client")
73
114
 
74
115
  ################################################################################
75
- # MISCELLANEOUS OPTIONS
76
116
  ################################################################################
117
+ # CLIENT RENDERING OPTIONS
118
+ # Below options can be overriden by passing options to the react_on_rails
119
+ # `render_component` view helper method.
120
+ ################################################################################
121
+ # default is false
122
+ config.prerender = false
77
123
 
78
- # The server render method - either ExecJS or NodeJS
79
- <%- if options.node? -%>
80
- config.server_render_method = "NodeJS"
81
- <%- else -%>
82
- config.server_render_method = "ExecJS"
83
- <%- end -%>
84
-
85
- # If you want to use webpack for CSS and images, and still use the asset pipeline,
86
- # see https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rails-assets.md
87
- # And you will use a setting like this.
88
- # config.symlink_non_digested_assets_regex = /\.(png|jpg|jpeg|gif|tiff|woff|ttf|eot|svg|map)/
124
+ # default is true for development, off otherwise
125
+ config.trace = Rails.env.development?
89
126
  end
127
+
128
+ ```
@@ -13,7 +13,6 @@ Usage:
13
13
 
14
14
  Options:
15
15
  -R, [--redux], [--no-redux] # Install Redux gems and Redux version of Hello World Example. Default: false
16
- -N, [--node], [--no-node] # Sets up node as a server rendering option. Default: false
17
16
  [--ignore-warnings], [--no-ignore-warnings] # Skip warnings. Default: false
18
17
 
19
18
  Runtime options:
@@ -70,7 +69,3 @@ If you have used the `--redux` generator option, you will notice the familiar ad
70
69
 
71
70
  Note the organizational paradigm of "bundles". These are like application domains and are used for grouping your code into webpack bundles, in case you decide to create different bundles for deployment. This is also useful for separating out logical parts of your application. The concept is that each bundle will have it's own Redux store. If you have code that you want to reuse across bundles, including components and reducers, place them under `/client/app/lib`.
72
71
 
73
- ### Using Images and Fonts
74
- The generator has amended the folders created in `client/assets/` to Rails's asset path. We recommend that if you have any existing assets that you want to use with your client code, you should move them to these folders and use webpack as normal. This allows webpack's development server to have access to your assets, as it will not be able to see any assets in the default Rails directories which are above the `/client` directory.
75
-
76
- Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.
@@ -4,11 +4,14 @@ Here's an overview of installation if you're not using the generator.
4
4
 
5
5
  Note, the best way to understand how to use ReactOnRails is to study the examples:
6
6
 
7
- 1. [spec/dummy](../../spec/dummy): Simple, no DB example.
8
- 2. [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial): Full featured example.
7
+ 1. Run the generator per the [Tutorial](../../tutorial.md).
8
+ 2. [spec/dummy](../../spec/dummy): Simple, no DB example.
9
+ 3. [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial): Full featured example.
9
10
 
10
11
  ## Configure the `/client` Directory
11
12
 
13
+ Note, version 9.0 of React on Rails removed the requirement to place all client side files in the `/client` directory.
14
+
12
15
  This directory has no references to Rails outside of the destination directory for the files created by the various Webpack config files.
13
16
 
14
17
  The only requirements within this directory for basic React on Rails integration are:
@@ -23,12 +26,10 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
23
26
  1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
24
27
 
25
28
  ## Rails Steps (outside of /client)
26
- 1. Add `gem "webpacker_lite"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
29
+ 1. Add `gem "webpacker"` to the Gemfile, run bundle. The gem provides the `stylesheet_pack_tag` and `javascript_pack_tag` helpers which is used to load the bundled assets to your layouts.[Dummy Example](../../spec/dummy/app/views/layouts/application.html.erb)
27
30
  1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](../../spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
28
31
  1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
29
32
  1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](../additional-reading/hot-reloading-rails-development.md)
30
-
31
- 1. Configure your `lib/tasks/assets.rake` file to run webpack during asset precompilation.
32
33
  1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/additional-reading/heroku-deployment.md)
33
34
 
34
35
  If I missed anything, please submit a PR or file an issue.
@@ -9,12 +9,3 @@ We are currently using Travis for CI. Because of the way Travis works, it is not
9
9
  ## Configuring what Apps are Generated
10
10
  You can specify additional apps to generate and test by adding to the rakelib/examples_config.yml file. The necessary build and test tasks will automatically be created for you dynamically at runtime.
11
11
 
12
- ## More on the Rake Tasks
13
- In order to maximize efficiency, we took several steps to improve the performance of the rake tasks that utilize somewhat advanced rake functionality such as task dependencies, `file` tasks, task synthesizing, and concurrent tasks with `multitask`.
14
-
15
- For example, re-generating the app, running `yarn`, and re-generating the webpack bundles are all only done when they need to be done. Rake will also run certain tasks, including those that generate multiple applications, concurrently.
16
-
17
- For more insight, see:
18
-
19
- - [Avdi Grimm's series of articles on Rake](http://devblog.avdi.org/2014/04/30/learn-advanced-rake-in-7-episodes/)
20
- - [Martin Fowler's rake article](http://martinfowler.com/articles/rake.html)