react_on_rails 12.0.5.beta.0 → 12.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/.circleci/config.yml +11 -1
  3. data/.eslintrc +2 -0
  4. data/.prettierrc +0 -3
  5. data/.rubocop.yml +38 -1
  6. data/CHANGELOG.md +22 -13
  7. data/CONTRIBUTING.md +3 -2
  8. data/Gemfile.development_dependencies +3 -2
  9. data/README.md +68 -65
  10. data/docs/{basics → additional-details}/generator-details.md +1 -6
  11. data/docs/{outdated → additional-details}/manual-installation-overview.md +6 -6
  12. data/docs/{basics → additional-details}/migrating-from-react-rails.md +0 -0
  13. data/docs/{additional-reading → additional-details}/recommended-project-structure.md +0 -0
  14. data/docs/{additional-reading → additional-details}/updating-dependencies.md +0 -0
  15. data/docs/additional-details/upgrade-webpacker-v3-to-v4.md +10 -0
  16. data/docs/api/javascript-api.md +2 -2
  17. data/docs/api/redux-store-api.md +3 -3
  18. data/docs/api/view-helpers-api.md +7 -8
  19. data/docs/basics/client-vs-server-rendering.md +3 -3
  20. data/docs/basics/configuration.md +42 -25
  21. data/docs/basics/deployment.md +2 -2
  22. data/docs/{outdated → basics}/how-react-on-rails-works.md +8 -9
  23. data/docs/basics/installation-into-an-existing-rails-app.md +2 -2
  24. data/docs/basics/react-server-rendering.md +3 -3
  25. data/docs/basics/rspec-configuration.md +10 -10
  26. data/docs/{tutorial.md → basics/tutorial.md} +9 -9
  27. data/docs/basics/upgrading-react-on-rails.md +7 -7
  28. data/docs/basics/webpack-configuration.md +4 -6
  29. data/docs/contributor-info/linters.md +5 -6
  30. data/docs/contributor-info/pull-requests.md +2 -4
  31. data/docs/contributor-info/releasing.md +1 -1
  32. data/docs/{additional-reading → deployment}/elastic-beanstalk.md +0 -0
  33. data/docs/{basics → deployment}/heroku-deployment.md +0 -0
  34. data/docs/home.md +382 -0
  35. data/docs/{additional-reading → javascript}/angular-js-integration-migration.md +0 -0
  36. data/docs/{additional-reading → javascript}/asset-pipeline.md +0 -0
  37. data/docs/{additional-reading → javascript}/capistrano-deployment.md +0 -0
  38. data/docs/{outdated → javascript}/code-splitting.md +3 -3
  39. data/docs/{additional-reading → javascript}/converting-from-custom-webpack-config-to-rails-webpacker-config.md +3 -3
  40. data/docs/{additional-reading → javascript}/credits.md +0 -0
  41. data/docs/{additional-reading → javascript}/foreman-issues.md +0 -0
  42. data/docs/{additional-reading → javascript}/images.md +5 -6
  43. data/docs/{additional-reading → javascript}/node-dependencies-and-npm.md +0 -0
  44. data/docs/{additional-reading → javascript}/react-and-redux.md +0 -0
  45. data/docs/{additional-reading → javascript}/react-helmet.md +0 -0
  46. data/docs/{additional-reading → javascript}/react-router.md +0 -0
  47. data/docs/{additional-reading → javascript}/server-rendering-tips.md +0 -0
  48. data/docs/{additional-reading → javascript}/troubleshooting-when-using-webpacker.md +0 -0
  49. data/docs/{additional-reading → javascript}/webpack-v1-notes.md +0 -0
  50. data/docs/{additional-reading → javascript}/webpack.md +0 -0
  51. data/docs/{articles.md → misc/articles.md} +1 -1
  52. data/docs/misc/doctrine.md +5 -5
  53. data/docs/{coding-style → misc}/style.md +0 -0
  54. data/docs/{additional-reading → misc}/tips.md +0 -0
  55. data/docs/outdated/deferred-rendering.md +39 -0
  56. data/docs/outdated/rails-assets-relative-paths.md +3 -3
  57. data/docs/outdated/rails-assets.md +8 -8
  58. data/docs/outdated/rails3.md +2 -2
  59. data/docs/rails-webpacker-react-integration-options.md +182 -0
  60. data/docs/{additional-reading → rails}/convert-rails-5-api-only-app.md +1 -1
  61. data/docs/{additional-reading → rails}/rails-engine-integration.md +0 -0
  62. data/docs/{additional-reading → rails}/rails_view_rendering_from_inline_javascript.md +0 -0
  63. data/docs/{additional-reading → rails}/turbolinks.md +0 -0
  64. data/docs/testimonials/testimonials.md +6 -6
  65. data/lib/generators/react_on_rails/dev_tests_generator.rb +1 -1
  66. data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb +4 -1
  67. data/lib/generators/react_on_rails/templates/dev_tests/spec/{features → system}/hello_world_spec.rb +2 -2
  68. data/lib/react_on_rails/helper.rb +5 -0
  69. data/lib/react_on_rails/utils.rb +16 -2
  70. data/lib/react_on_rails/version.rb +1 -1
  71. data/lib/react_on_rails/webpacker_utils.rb +5 -1
  72. data/lib/tasks/assets.rake +14 -5
  73. data/package.json +24 -29
  74. data/rakelib/release.rake +19 -3
  75. data/rakelib/task_helpers.rb +15 -2
  76. data/yarn.lock +2272 -4960
  77. metadata +41 -38
  78. data/docs/additional-reading/upgrade-webpacker-v3-to-v4.md +0 -10
@@ -35,13 +35,9 @@ can pass the redux option if you'd like to have redux setup for you automaticall
35
35
  Then you may run
36
36
 
37
37
  `rails s`
38
-
39
- More Details:
40
-
41
- `https://github.com/shakacode/react_on_rails/blob/master/docs/basics/generator-details.md`
42
38
  ```
43
39
 
44
- Another good option is to create a simple test app per the [Tutorial](../tutorial.md).
40
+ Another good option is to create a simple test app per the [Tutorial](https://www.shakacode.com/react-on-rails/docs/basics/tutorial).
45
41
 
46
42
  # Understanding the Organization of the Generated Client Code
47
43
  The generated client code follows our organization scheme. Each unique set of functionality, is given its own folder inside of `app/javascript/app/bundles`. Note, the recommended for bigger projects is `client/app/bundles`. This encourages for modularity of *domains*.
@@ -58,4 +54,3 @@ You may also notice the `app/lib` folder. This is for any code that is common be
58
54
  If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
59
55
 
60
56
  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`.
61
-
@@ -14,17 +14,17 @@ The only requirements within this directory for basic React on Rails integration
14
14
  1. Your webpack configuration files:
15
15
  1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
16
16
  1. Provide server rendering if you wish to use that feature.
17
- 1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See API docs in [README.md](README.md) and the [ReactOnRails.js source](../../node_package/src/ReactOnRails.js).
17
+ 1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our javascript API docs](https://www.shakacode.com/react-on-rails/docs/api/javascript-api) and the [ReactOnRails.js source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.js).
18
18
  1. Set your registration file as an "entry" point in your Webpack configs.
19
- 1. Add the [Manifest plugin](https://github.com/danethurber/webpack-manifest-plugin) to your config. For examples see [dummy config](../../spec/dummy/client/webpack.client.base.config.js).
19
+ 1. Add the [Manifest plugin](https://github.com/danethurber/webpack-manifest-plugin) to your config.
20
20
  The default path: `public/webpack` can be loaded with webpackConfigLoader as shown in the dummy example.
21
21
  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`.
22
22
 
23
23
  ## Rails Steps (outside of /client)
24
- 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)
25
- 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.
24
+ 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](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb)
25
+ 1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
26
26
  1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
27
- 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.
28
- 1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/basics/heroku-deployment.md)
27
+ 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.
28
+ 1. If you are deploying to Heroku, see [our heroku deployment documentation](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment)
29
29
 
30
30
  If I missed anything, please submit a PR or file an issue.
@@ -0,0 +1,10 @@
1
+ # Upgrading rails/webpacker v3.5 to v4
2
+
3
+ The following steps can be followed to update a Webpacker v3.5 app to v4.
4
+
5
+ 1. Update the gem `webpacker` and the package `@rails/webpacker`
6
+ 1. Merge changes from the new default [.babelrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.babelrc) to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
7
+ 1. Copy the file [.browserslistrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.browserslistrc) to `/`.
8
+ 1. Merge any differences between [config/webpacker.yml](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/webpacker.yml) and your `/config/webpacker.yml`.
9
+
10
+ Here is an [example commit of these changes](https://github.com/shakacode/react_on_rails-tutorial-v11/pull/1/files).
@@ -34,7 +34,7 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
34
34
  * Your Ruby code with get this Object as a Hash containing keys componentHtml and any other
35
35
  * custom keys that you added:
36
36
  * { renderedHtml: { componentHtml, customKey1, customKey2 } }
37
- * See the example in /docs/additional-reading/react-helmet.md
37
+ * See the example in https://www.shakacode.com/react-on-rails/docs/javascript/react-helmet
38
38
  * @param components (key is component name, value is component)
39
39
  */
40
40
  register(components)
@@ -69,7 +69,7 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
69
69
  * Allow directly calling the page loaded script in case the default events that trigger react
70
70
  * rendering are not sufficient, such as when loading JavaScript asynchronously with TurboLinks:
71
71
  * More details can be found here:
72
- * https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/turbolinks.md
72
+ * https://www.shakacode.com/react-on-rails/docs/rails/turbolinks
73
73
  */
74
74
  reactOnRailsPageLoaded()
75
75
 
@@ -13,7 +13,7 @@ Consider using the `redux_store` helper for the two following use cases:
13
13
 
14
14
  ## Multiple React Components on a Page with One Store
15
15
 
16
- You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript.
16
+ You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript.
17
17
 
18
18
  A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
19
19
 
@@ -98,5 +98,5 @@ Place this view helper (no parameters) at the end of your shared layout so React
98
98
 
99
99
  # More Details
100
100
 
101
- * [lib/react_on_rails/controller.rb](../../lib/react_on_rails/controller.rb) source
102
- * [lib/react_on_rails/helper.rb](../../lib/react_on_rails/helper.rb) source
101
+ * [lib/react_on_rails/controller.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/controller.rb) source
102
+ * [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source
@@ -23,7 +23,7 @@ Uncommonly used options:
23
23
  ```
24
24
 
25
25
  - **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
26
- All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](../basics/configuration.md).
26
+ All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](https://www.shakacode.com/react-on-rails/docs/basics/configuration).
27
27
  - **general options:**
28
28
  - **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
29
29
  - **prerender:** enable server-side rendering of a component. Set to false when debugging!
@@ -43,7 +43,7 @@ Uncommonly used options:
43
43
  `react_component_hash` is used to return multiple HTML strings for server rendering, such as for
44
44
  adding meta-tags to a page. It is exactly like react_component except for the following:
45
45
 
46
- 1. `prerender: true` is automatically added to options, as this method doesn't make sense for
46
+ 1. `prerender: true` is automatically added to options, as this method doesn't make sense for
47
47
  client only rendering.
48
48
  2. Your JavaScript Render-Function for server rendering must return an Object rather than a React Component.
49
49
  3. Your view code must expect an object and not a string.
@@ -100,7 +100,7 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo
100
100
 
101
101
  A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
102
102
 
103
- Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](docs/outdated/code-splitting.md). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
103
+ Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
104
104
 
105
105
  Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error.
106
106
 
@@ -110,9 +110,9 @@ Renderer functions are not meant to be used on the server since there's no DOM o
110
110
 
111
111
  [React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
112
112
 
113
- 1. [React on Rails docs for react-router](../additional-reading/react-router.md)
114
- 2. Examples in [spec/dummy/app/views/react_router](../../spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](../../spec/dummy/client/app/startup/ServerRouterApp.jsx).
115
- 3. [Code Splitting docs](docs/outdated/code-splitting.md) for information about how to set up code splitting for server rendered routes.
113
+ 1. [React on Rails docs for react-router](https://www.shakacode.com/react-on-rails/docs/javascript/react-router)
114
+ 2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
115
+ 3. [Code Splitting docs](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting) for information about how to set up code splitting for server rendered routes.
116
116
 
117
117
  ------------
118
118
 
@@ -129,5 +129,4 @@ This is a helper method that takes any JavaScript expression and returns the out
129
129
 
130
130
  # More details
131
131
 
132
- See the [lib/react_on_rails/helper.rb](../../lib/react_on_rails/helper.rb) source.
133
-
132
+ See the [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source.
@@ -1,11 +1,11 @@
1
1
  # Client-Side Rendering vs. Server-Side Rendering
2
2
 
3
- *See also [react-server-rendering.md](./react-server-rendering.md).*
3
+ *Also, see [our react server-rendering documentation](https://www.shakacode.com/react-on-rails/docs/basics/react-server-rendering).*
4
4
 
5
5
  In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
6
6
 
7
7
  Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime.
8
-
8
+
9
9
  If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
10
10
 
11
11
  If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
@@ -18,7 +18,7 @@ If you open the HTML source of any web page using React on Rails, you'll see the
18
18
 
19
19
  # Different Server-Side Rendering Code (and a Server-Specific Bundle)
20
20
 
21
- You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`.
21
+ You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`.
22
22
 
23
23
  Another way is to use a separate webpack configuration file that can use a different server side entry file, like 'serverRegistration.js' as opposed to 'clientRegistration.js.' That would set up different code for server rendering.
24
24
 
@@ -12,7 +12,7 @@ default: &default
12
12
  # public_output_path folder
13
13
  manifest: manifest.json
14
14
  cache_manifest: false
15
-
15
+
16
16
  # Source path is used to check if webpack compilation needs to be run for `compile: true`
17
17
  source_path: client/app
18
18
 
@@ -24,7 +24,7 @@ development:
24
24
  test:
25
25
  <<: *default
26
26
  # Ensure that webpacker invokes webpack to build files for tests if not using the
27
- # ReactOnRails rspec helper.
27
+ # ReactOnRails rspec helper.
28
28
  compile: true
29
29
 
30
30
  # Generated files for tests, in /public/webpack/test
@@ -49,7 +49,7 @@ for all client files, including your sources and node_modules.
49
49
  ReactOnRails.configure do |config|
50
50
  # `trace`: General debugging flag.
51
51
  # The default is true for development, off otherwise.
52
- # With true, you get detailed logs of rendering and stack traces if you call setTimout,
52
+ # With true, you get detailed logs of rendering and stack traces if you call setTimout,
53
53
  # setInterval, clearTimout when server rendering.
54
54
  config.trace = Rails.env.development? # default
55
55
 
@@ -57,22 +57,27 @@ ReactOnRails.configure do |config|
57
57
  # false ==> Sets the dom id to "#{react_component_name}-react-component"
58
58
  # true ==> Adds "-#{SecureRandom.uuid}" to that ID
59
59
  # If you might use multiple instances of the same React component on a Rails page, then
60
- # it is convenient to set this to true or else you have to either manually set the ids to
60
+ # it is convenient to set this to true or else you have to either manually set the ids to
61
61
  # avoid collisions. Most newer apps will have only one instance of a component on a page,
62
62
  # so this should be false in most cases.
63
63
  # This value can be overridden for a given call to react_component
64
64
  config.random_dom_id = true # default
65
65
 
66
- # defaults to "" (top level)
67
- config.node_modules_location = "client" # If using webpacker you should use "".
68
-
69
- # This configures the script to run to build the production assets by webpack . Set this to nil
70
- # if you don't want react_on_rails building this file for you.
71
- # Note, if you want to use this command then you should remove the file
72
- # config/webpack/production.js
73
- # If that file exists, React on Rails thinks that you'll use the rails/webpacker bin/webpack compiler.
66
+ # defaults to "" (top level)
67
+ config.node_modules_location = "client" # If using webpacker you should use "".
68
+
69
+ # This configures the script to run to build the production assets by webpack . Set this to nil
70
+ # if you don't want react_on_rails building this file for you.
71
+ # Note, if you want to use this command then you should remove the file
72
+ # config/webpack/production.js
73
+ # If that file exists, React on Rails thinks that you'll use the rails/webpacker bin/webpack compiler.
74
74
  config.build_production_command = "RAILS_ENV=production bin/webpack"
75
75
 
76
+ # Alternatively, you can also specify a module containing a class method `call`
77
+ # In this example, the module BuildProductionCommand would have a class method `call`.
78
+ # See bottom for an example of the BuildProductionCommand module.
79
+ # config.build_production_command = BuildProductionCommand
80
+
76
81
  ################################################################################
77
82
  ################################################################################
78
83
  # SERVER RENDERING OPTIONS
@@ -89,9 +94,9 @@ ReactOnRails.configure do |config|
89
94
  # you should include a name that matches your bundle name in your webpack config.
90
95
  config.server_bundle_js_file = "server-bundle.js"
91
96
 
92
- # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING
97
+ # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING
93
98
  #
94
- # This value only affects server-side rendering when using the webpack-dev-server
99
+ # This value only affects server-side rendering when using the webpack-dev-server
95
100
  # If you are hashing the server bundle and you want to use the same bundle for client and server,
96
101
  # you'd set this to `true` so that React on Rails reads the server bundle from the webpack-dev-server.
97
102
  # Normally, you have different bundles for client and server, thus, the default is false.
@@ -101,7 +106,7 @@ ReactOnRails.configure do |config|
101
106
  # If true, ensure that in config/webpacker.yml that you have both dev_server.hmr and
102
107
  # dev_server.inline set to false.
103
108
  config.same_bundle_for_client_and_server = false
104
-
109
+
105
110
  # If set to true, this forces Rails to reload the server bundle if it is modified
106
111
  # Default value is Rails.env.development?
107
112
  # You probably will never change this.
@@ -119,16 +124,16 @@ ReactOnRails.configure do |config|
119
124
 
120
125
  # Default is true only for development? to raise exception on server if the JS code throws for
121
126
  # server rendering. The reason is that the server logs will show the error and force you to fix
122
- # any server rendering issues immediately during development.
123
- config.raise_on_prerender_error = Rails.env.development?
127
+ # any server rendering issues immediately during development.
128
+ config.raise_on_prerender_error = Rails.env.development?
124
129
 
125
130
  ################################################################################
126
131
  # Server Renderer Configuration for ExecJS
127
132
  ################################################################################
128
133
  # The default server rendering is ExecJS, probably using the mini_racer gem
129
- # If you wish to use an alternative Node server rendering for higher performance,
134
+ # If you wish to use an alternative Node server rendering for higher performance,
130
135
  # contact justin@shakacode.com for details.
131
- #
136
+ #
132
137
  # For ExecJS:
133
138
  # You can configure your pool of JS virtual machines and specify where it should load code:
134
139
  # On MRI, use `mini_racer` for the best performance
@@ -153,7 +158,7 @@ ReactOnRails.configure do |config|
153
158
  # By default(without this option) all yaml files from Rails.root.join("config", "locales")
154
159
  # and installed gems are loaded
155
160
  config.i18n_yml_dir = Rails.root.join("config", "locales")
156
-
161
+
157
162
  # Possible output formats are js and json
158
163
  # The default format is json
159
164
  config.i18n_output_format = 'json'
@@ -178,13 +183,13 @@ ReactOnRails.configure do |config|
178
183
  # TEST CONFIGURATION OPTIONS
179
184
  # Below options are used with the use of this test helper:
180
185
  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
181
- #
186
+ #
182
187
  # NOTE:
183
188
  # Instead of using this test helper, you may ensure fresh test files using rails/webpacker via:
184
189
  # 1. Have `config/webpacker/test.js` exporting an array of objects to configure both client and server bundles.
185
190
  # 2. Set the compile option to true in config/webpacker.yml for env test
186
191
  ################################################################################
187
-
192
+
188
193
  # If you are using this in your spec_helper.rb (or rails_helper.rb):
189
194
  #
190
195
  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
@@ -194,7 +199,7 @@ ReactOnRails.configure do |config|
194
199
  #
195
200
  config.build_test_command = "RAILS_ENV=test bin/webpack"
196
201
 
197
- # CONFIGURE YOUR SOURCE FILES
202
+ # CONFIGURE YOUR SOURCE FILES
198
203
  # The test helper needs to know where your JavaScript files exist. The value is configured
199
204
  # by your config/webpacker.yml source_path:
200
205
  # source_path: client/app # if using recommended /client directory
@@ -202,10 +207,22 @@ ReactOnRails.configure do |config|
202
207
  # Define the files we need to check for webpack compilation when running tests.
203
208
  # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
204
209
  # However, if you are generated a server bundle that is NOT hashed (present in manifest.json),
205
- # then include the file in this list like this:
210
+ # then include the file in this list like this:
206
211
  config.webpack_generated_files = %w( server-bundle.js manifest.json )
207
212
  # Note, be sure NOT to include your server-bundle.js if it is hashed, or else React on Rails will
208
- # think the server-bundle.js is missing every time for test runs.
213
+ # think the server-bundle.js is missing every time for test runs.
214
+ end
215
+ ```
216
+
217
+ Example of a ReactOnRailsConfig module for `production_build_command`:
218
+
219
+ ```ruby
220
+ module BuildProductionCommand
221
+ include FileUtils
222
+ # Method with the name of call will be called during assets:precompile
223
+ def self.call
224
+ sh "bin/webpack"
225
+ end
209
226
  end
210
227
  ```
211
228
 
@@ -1,4 +1,4 @@
1
1
  # Deployment
2
2
 
3
- - `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step.
4
- - See the [Heroku Deployment](docs/basics/heroku-deployment.md) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.
3
+ - `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step.
4
+ - See the [Heroku Deployment](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.
@@ -1,21 +1,21 @@
1
1
  # How React on Rails Works (with rails/webpacker)
2
2
 
3
- *Note, older versions of React on Rails pushed the Webpack bundles through the Asset Pipeline. This older method has *many* disadvantages, such as broken sourcemaps, performance issues, etc. If you need help migrating to the current way of bypassing the Asset Pipeline, [email Justin](mailto:justin@shakacode.com).*
3
+ *Note, older versions of React on Rails pushed the Webpack bundles through the Asset Pipeline. This older method has *many* disadvantages, such as broken sourcemaps, performance issues, etc. If you need help migrating to the current way of bypassing the Asset Pipeline, [email Justin](mailto:justin@shakacode.com).*
4
4
 
5
- Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [rails/webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly configuring your Webpack output. You will either use the standard Webpack configuration (*recommended*) or the `rails/webpacker` setup for Webpack.
5
+ Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [rails/webpacker](https://github.com/rails/webpacker) provides view helpers to access the Webpack generated (and fingerprinted) JS and CSS. These files totally skip the Rails asset pipeline. You are responsible for properly configuring your Webpack output. You will either use the standard Webpack configuration (*recommended*) or the `rails/webpacker` setup for Webpack.
6
6
 
7
7
  Ensure these generated bundle files are in your `.gitignore`, as you never want to add the large compiled bundles to git.
8
8
 
9
- Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper.
9
+ Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper.
10
10
 
11
- Optionally, you can also initialize a Redux store with the view or controller helper `redux_store` so that the redux store can be shared amongst multiple React components.
11
+ Optionally, you can also initialize a Redux store with the view or controller helper `redux_store` so that the redux store can be shared amongst multiple React components.
12
12
 
13
13
  ## Client-Side Rendering vs. Server-Side Rendering
14
14
 
15
15
  In most cases, you should use the `prerender: false` (default behavior) with the provided `react_component` helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
16
16
 
17
17
  Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
18
-
18
+
19
19
  ## HTML Source Code
20
20
 
21
21
  If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
@@ -28,17 +28,16 @@ You can see all this on the source for [reactrails.com](https://www.reactrails.c
28
28
 
29
29
  ## Building the Bundles
30
30
 
31
- Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Alternately, the `rails/webpacker` library also can ensure that your bundles are built.
31
+ Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included example Foreman `Procfile.dev` files will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Alternately, the `rails/webpacker` library also can ensure that your bundles are built.
32
32
 
33
- For example, you might create a [Procfile.dev](spec/dummy/Procfile.dev).
33
+ For example, you might create a [Procfile.dev](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/Procfile.dev).
34
34
 
35
35
  On production deployments that use asset precompilation, such as Heroku deployments, `rails/webpacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpack` in your app.
36
36
 
37
37
  However, if you want to run a custom command to run webpack to build your bundles, then you will:
38
38
  1. Ensure you do not have a `config/webpack/production.js` file
39
- 1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](docs/basics/configuration.md)
39
+ 1. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/basics/configuration)
40
40
 
41
41
  Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
42
42
 
43
43
  If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
44
-
@@ -1,6 +1,6 @@
1
1
  # Getting Started with an existing Rails app
2
2
 
3
- **Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](../../docs/tutorial.md).
3
+ **Also consult the instructions for installing on a fresh Rails app**, see the [React on Rails Basic Tutorial](https://www.shakacode.com/react-on-rails/docs/basics/tutorial).
4
4
 
5
5
  **If you have rails-5 API only project**, first [convert the rails-5 API only app to rails app](#convert-rails-5-api-only-app-to-rails-app) before [getting started](#getting-started-with-an-existing-rails-app).
6
6
 
@@ -52,7 +52,7 @@ bundle add react_on_rails --version=12.0.4 --strict
52
52
 
53
53
  ## Installation
54
54
 
55
- See the [Installation Overview](docs/outdated/manual-installation-overview.md) for a concise set summary of what's in a React on Rails installation.
55
+ See the [Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview) for a concise set summary of what's in a React on Rails installation.
56
56
 
57
57
 
58
58
  ## NPM
@@ -1,6 +1,6 @@
1
1
  # React Server Rendering
2
2
 
3
- See also [Client vs. Server Rendering](./client-vs-server-rendering.md).
3
+ See also [Client vs. Server Rendering](https://www.shakacode.com/react-on-rails/docs/basics/client-vs-server-rendering).
4
4
 
5
5
  ## What is the easiest way to setup a webpack configuration for server-side-rendering?
6
6
  See the example webpack setup here: [github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
@@ -13,13 +13,13 @@ During the Rails rendering of HTML per a browser request, the Rails server will
13
13
 
14
14
  The default JavaScript interpretter is [ExecJS](https://github.com/rails/execjs). If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
15
15
 
16
- See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering).
16
+ See [this note](https://www.shakacode.com/react-on-rails/docs/basics/client-vs-server-rendering).
17
17
 
18
18
  ## How do you do Server Rendering with React on Rails?
19
19
  1. The `react_component` view helper method provides the `prerender:` option to switch on or off server rendering.
20
20
  1. Configure your Webpack setup to create a different server bundle per your needs. While you may reuse the same bundle as for client rendering, this is not common in larger apps for many reasons, such as as code splitting, handling CSS and images, different code paths for React Router on the server vs. client, etc.
21
21
  1. You need to configure `config.server_bundle_js_file = "server-bundle.js"` in your `config/initializers/react_on_rails.rb`
22
- 1. You should ***not*** put a hash on the server-bundle so that you can easily use the webpack-dev-server for client bundles and have the server bundle generated by a watch process.
22
+ 1. You should ***not*** put a hash on the server-bundle so that you can easily use the webpack-dev-server for client bundles and have the server bundle generated by a watch process.
23
23
 
24
24
  ## Do you need server rendering?
25
25
 
@@ -1,5 +1,5 @@
1
1
  # RSpec Configuration
2
- _Click [here for minitest](./minitest-configuration.md)_
2
+ _Click [here for minitest](https://www.shakacode.com/react-on-rails/docs/basics/minitest-configuration)_
3
3
 
4
4
  # If your webpack configurations correspond to rails/webpacker's default setup
5
5
  If you're able to configure your webpack configuration to be run by having your webpack configuration
@@ -8,12 +8,12 @@ compiled by webpack before running tests and during production deployment:
8
8
 
9
9
  1. **Use rails/webpacker's compile option**: Configure your `config/webpacker.yml` so that `compile: true` is for `test` and `production`
10
10
  environments. Ensure that your `source_path` is correct, or else `rails/webpacker` won't correctly
11
- detect changes.
12
- 2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](./configuration.md).
11
+ detect changes.
12
+ 2. **Use the react_on_rails settings and helpers**. Use the settings in `config/initializers/react_on_rails.rb`. Refer to [docs/configuration](https://www.shakacode.com/react-on-rails/docs/basics/configuration).
13
13
 
14
14
  ```yml
15
15
  config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/webpack"
16
- ```
16
+ ```
17
17
 
18
18
  Which should you use? If you're already using the `rails/webpacker` way to configure webpack, then
19
19
  you can keep things simple and use the `rails/webpacker` options.
@@ -25,7 +25,7 @@ Because you will probably want to run RSpec tests that rely on compiled webpack
25
25
  As mentioned above, you can configure `compile: true` in `config/webpacker.yml` _if_ you've got configuration for
26
26
  your webpack in the standard `rails/webpacker` spot of `config/webpack/<NODE_ENV>.js`
27
27
 
28
- ReactOnRails also provides a helper method called `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument. See file [lib/react_on_rails/test_helper.rb](../../lib/react_on_rails/test_helper.rb) for more details. You can customize this to your particular needs by replacing any of the default components used by `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`.
28
+ ReactOnRails also provides a helper method called `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument. See file [lib/react_on_rails/test_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/test_helper.rb) for more details. You can customize this to your particular needs by replacing any of the default components used by `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`.
29
29
 
30
30
  ```ruby
31
31
  RSpec.configure do |config|
@@ -44,22 +44,22 @@ If you are using Webpack to build CSS assets, you should do something like this
44
44
  ```
45
45
 
46
46
  Please take note of the following:
47
- - If you are using Webpacker, be **SURE** to configure the `source_path` in your `config/webpacker.yml` unless you are using the defaults for webpacker.
47
+ - If you are using Webpacker, be **SURE** to configure the `source_path` in your `config/webpacker.yml` unless you are using the defaults for webpacker.
48
48
 
49
49
  - 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`
50
50
 
51
- - 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.
51
+ - 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.
52
52
 
53
- - By default, the webpack processes look in the webpack generated files folder, configured via the `config/webpacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files 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.
53
+ - By default, the webpack processes look in the webpack generated files folder, configured via the `config/webpacker.yml` config values of `public_root_path` and `public_output_path`. If the webpack generated files 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.
54
54
 
55
55
  The following `config/react_on_rails.rb` settings **must** match your setup:
56
56
  ```ruby
57
57
  # Define the files we need to check for webpack compilation when running tests.
58
58
  config.webpack_generated_files = %w( manifest.json )
59
-
59
+
60
60
  # OR if you're not hashing the server-bundle.js, then you should include your server-bundle.js in the list.
61
61
  # config.webpack_generated_files = %w( server-bundle.js manifest.json )
62
-
62
+
63
63
  # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
64
64
  # with rspec then this controls what yarn command is run
65
65
  # to automatically refresh your webpack assets on every test run.