react_on_rails 12.0.1 → 12.0.2

This diff has not been reviewed by any users.
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 83e519532dfba4ffcb23379c8d757d4d299aaa11247c718e310e257e3bca3291
4
- data.tar.gz: d328b53abce54b4deb4481addaaef242b6b531c493aa3154784fa8f87f55e7c0
3
+ metadata.gz: 2dacb7734da108abf8cf2a71bef68ba0b3049c2ef9d97aa46afc2ff9d53d4931
4
+ data.tar.gz: 66074b4e21e05482d185560c5dda2541b6fe48c65888d7ac20706b4fb1fdc97a
5
5
  SHA512:
6
- metadata.gz: e183bc2eaed29538422fbe0984177f9e64dcb7501d96f971e1a1887aae596e9fe2519d78d44c6517af07abe2db44632ba38879e070966641b1faac5e6e984e08
7
- data.tar.gz: 6ab4afd6786b2539428dffcbad518dd0e3cd1111a61d0b81891a715d665e5c7e6d4053d3e344d770808422abb720c07259bd537f6bfe1b5a59f0e0127e96b2ac
6
+ metadata.gz: b8a29d39338fe7d8c79ec80c4b2cb95ddc3ecd280f2d2d70de9aa9fca92c01a1e5986c4c916580fd329ebcbce00ba25c3a9493d3e95d97167d3b49f66476b5da
7
+ data.tar.gz: 684c86dc869ee2c7453ed6f9c551c976efbbe817159cc1ef2ea0ec75369018a814e478eca896c9e8d4a23f44e4ba5a8875868fcddab3db31428457226423cdc0
@@ -39,13 +39,15 @@ install:
39
39
  - node -v
40
40
  - travis_retry npm i -g yarn
41
41
  - travis_retry yarn global add yalc
42
+ - travis_retry yalc add react-on-rails
42
43
  - travis_retry yarn
43
44
  - travis_retry bundle install
44
45
  - travis_retry yarn run build
45
46
  - travis_retry yalc publish
46
- - cd spec/dummy/client
47
+ - cd spec/dummy
47
48
  - travis_retry yalc add react-on-rails
48
49
  - travis_retry yarn
50
+ - cd ../..
49
51
  - bundle exec rake prepare_for_ci
50
52
 
51
53
  before_script:
@@ -16,6 +16,10 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
16
16
  Changes since last non-beta release.
17
17
 
18
18
  *Please add entries here for your pull requests that are not yet released.*
19
+ ### [12.0.2] - 2020-07-09
20
+ #### Fixed
21
+ - Remove dependency upon Redux for Typescript types [PR 1323](https://github.com/shakacode/react_on_rails/pull/1306) by [justin808](https://github.com/justin808).
22
+
19
23
  ### [12.0.1] - 2020-07-09
20
24
  #### Fixed
21
25
  - Changed invocation of webpacker:clean to use a very large number of versions so it does not acidentally delete the server-bundle.js. [PR 1306](https://github.com/shakacode/react_on_rails/pull/1306) by By [justin808](https://github.com/justin808).
@@ -930,7 +934,8 @@ Best done with Object destructing:
930
934
  ##### Fixed
931
935
  - Fix several generator related issues.
932
936
 
933
- [Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.0.1...master
937
+ [Unreleased]: https://github.com/shakacode/react_on_rails/compare/12.0.2...master
938
+ [12.0.2]: https://github.com/shakacode/react_on_rails/compare/12.0.1...12.0.2
934
939
  [12.0.1]: https://github.com/shakacode/react_on_rails/compare/12.0.0...12.0.1
935
940
  [12.0.0]: https://github.com/shakacode/react_on_rails/compare/11.3.0...12.0.0
936
941
  [11.3.0]: https://github.com/shakacode/react_on_rails/compare/11.2.2...11.3.0
data/NEWS.md CHANGED
@@ -2,6 +2,11 @@
2
2
 
3
3
  *We'll keep a history of the news. A few bullets at the top will also show on the [README.md](./README.md).*
4
4
 
5
+ * July 8, 2020: Release **v12**.
6
+ 1. **React Hooks Support** for top level components
7
+ 2. **Typescript bindings**
8
+ 3. **rails/webpacker** "just works" with React on Rails by default.
9
+ 4. i18n support for generating a JSON file rather than a JS file.
5
10
  * 2018-02-27: **Version 10.1.2** Supports the React API for ReactDOM.hydrate.
6
11
  * 2017-09-06: **VERSION 9.0.0 shipped!** This version depends on Webpacker directly. See [Upgrading React on Rails](./docs/basics/upgrading-react-on-rails.md) for more concise instructions on upgrading.
7
12
  * Always see the [CHANGELOG.md](./CHANGELOG.md) for the latest project changes.
data/README.md CHANGED
@@ -14,6 +14,8 @@
14
14
  *These are the docs for React on Rails 12. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
15
15
 
16
16
  #### News
17
+ **August 2, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
18
+
17
19
  **July 8, 2020**: Release v12 of React on Rails.
18
20
 
19
21
  **Major Improvements**
@@ -36,7 +38,7 @@ Be sure to see the [CHANGELOG.md](./CHANGELOG.md) and read the upgrade instructi
36
38
  #### About
37
39
  React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
38
40
 
39
- This project is sponsored by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on React front-ends, often with Ruby on Rails or Gatsby, using TypeScript or ReasonML. The best way to see what we do is to see the details of [our recent work](https://www.shakacode.com/recent-work).
41
+ This project is maintained by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on Ruby on Rails applications with React front-ends, often using TypeScript or ReasonML. We also build Gatsby sites. See [our recent work](https://www.shakacode.com/recent-work) for examples of what we do.
40
42
 
41
43
  Interested in optimizing your webpack setup for React on Rails including code
42
44
  splitting with [react-router](https://github.com/ReactTraining/react-router#readme),
@@ -275,7 +277,6 @@ Browse the links in the [Summary Table of Contents](./SUMMARY.md)
275
277
  Here are some highly recommended next articles to read:
276
278
 
277
279
  1. [How React on Rails Works](docs/outdated/how-react-on-rails-works.md)
278
- 1. [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
279
280
  1. [Webpack Configuration](./docs/basics/webpack-configuration.md)
280
281
  1. [View Helpers API](./docs/api/view-helpers-api.md)
281
282
  1. [Caching and Performance: React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
data/SUMMARY.md CHANGED
@@ -8,7 +8,6 @@
8
8
  + [How React on Rails Works](docs/outdated/how-react-on-rails-works.md)
9
9
  + [Client vs. Server Rendering](./docs/basics/client-vs-server-rendering.md)
10
10
  + [React Server Rendering](./docs/basics/react-server-rendering.md)
11
- + [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
12
11
  + [Render-Functions and the RailsContext](docs/basics/render-functions-and-railscontext.md)
13
12
  + [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
14
13
  + [Deployment](docs/basics/deployment.md).
@@ -28,6 +27,7 @@
28
27
  + [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
29
28
  + [Manual Installation Overview](docs/outdated/manual-installation-overview.md)
30
29
  + [Upgrading from rails/webpacker v3 to v4](docs/additional-reading/upgrade-webpacker-v3-to-v4.md)
30
+ + [Recommended Project Structure](docs/additional-reading/recommended-project-structure.md)
31
31
 
32
32
  ## **Rails**
33
33
  + [Rails Engine Integration](./docs/additional-reading/rails-engine-integration.md)
@@ -0,0 +1,69 @@
1
+ # Recommended Project structure
2
+
3
+ The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
4
+
5
+ ```yml
6
+ app/javascript:
7
+ ├── bundles:
8
+ │ # Logical groups of files that can be used for code splitting
9
+ │ └── hello-world-bundle.js
10
+ ├── packs:
11
+ │ # only webpack entry files here
12
+ │ └── hello-world-bundle.js
13
+ ```
14
+
15
+ Per the example repo [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),
16
+ you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
17
+
18
+ ## Steps to convert from the generator defaults to use a `/client` directory for source code
19
+
20
+ 1. Move the directory:
21
+
22
+ ```
23
+ mv app/javascript client
24
+ ```
25
+
26
+ 2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
27
+
28
+ ```yml
29
+ source_path: client
30
+ ```
31
+
32
+ ## Moving node_modules from `/` to `/client` with a custom webpack setup.
33
+
34
+ `rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
35
+
36
+ 1. Move the `/package.json` to `/client/package.json`
37
+ 2. Create a `/package.json` that delegates to `/client/package.json`.
38
+ ```
39
+ "scripts": {
40
+ "heroku-postbuild": "cd ./client && yarn"
41
+ },
42
+ ```
43
+ 3. If your node_modules directory is not at the top level of the Rails project, then you will need to set the
44
+ ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
45
+
46
+ ## CSS, Sass, Fonts, and Images
47
+ Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!
48
+
49
+ Here's a good discussion of this option: [Why does Rails 6 include both Webpacker and Sprockets?](https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html).
50
+
51
+ You have 2 basic choices:
52
+
53
+ ### Simple Rails Way
54
+ This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
55
+
56
+ #### Advantages to the Simple Rails Way
57
+ 1. Much simpler! There's no changes really from your current processes.
58
+
59
+ ### Using Webpack to Manage Styling Assets
60
+ This technique involves customization of the webpack config files to generate CSS, image, and font assets.
61
+
62
+ #### Directory structure
63
+ 1. `/client/app/assets`: Assets for CSS for client app.
64
+ 1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
65
+
66
+ #### Advantages to having Webpack Manage Styles
67
+ 1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
68
+ 1. You can use CSS in JS.
69
+ 1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.
@@ -1,5 +1,7 @@
1
1
  # Client-Side Rendering vs. Server-Side Rendering
2
2
 
3
+ *See also [react-server-rendering.md](./react-server-rendering.md).*
4
+
3
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`.
4
6
 
5
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,22 +8,18 @@ The webpack-dev-server provides:
8
8
  abruptly lose any tweaks within the Chrome development tools.
9
9
  3. Optional hot-reloading. The older react-hot-loader has been deprecated in
10
10
  favor of [fast-refresh](https://reactnative.dev/docs/fast-refresh).
11
- For use with webpack, see [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).
11
+ For use with webpack, see **Client Side rendering and HMR using react-refresh-webpack-plugin** section bellow or visit [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin) for additional details.
12
12
 
13
13
  If you are ***not*** using server-side rendering (***not*** using `prerender: true`),
14
14
  then you can follow all the regular docs for using the `bin/webpack-dev-server`
15
15
  during development.
16
16
 
17
-
18
17
  # Server Side Rendering with the Default rails/webpacker bin/webpack-dev-server
19
18
 
20
19
  If you are using server-side rendering, then you have a couple options. The
21
20
  recommended technique is to have a different webpack configuration for server
22
21
  rendering.
23
22
 
24
-
25
-
26
-
27
23
  ## If you use the same Webpack setup for your server and client bundles
28
24
  If you do use the webpack-dev-server for prerendering, be sure to set the
29
25
  `config/initializers/react_on_rails.rb` setting of
@@ -43,7 +39,64 @@ If you don't configure these two to false, you'll see errors like:
43
39
  * "ReferenceError: window is not defined" (if hmr is true)
44
40
  * "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
45
41
 
46
-
47
-
48
-
49
-
42
+ # Client Side rendering with HMR using react-refresh-webpack-plugin
43
+ ## Basic installation
44
+ To enable HMR functionality you have to use `./bin/webpack-dev-server`
45
+ 1. In `config/webpacker.yml` set **hmr** and **inline** `dev_server` properties to true.
46
+ ```
47
+ dev_server:
48
+ https: false
49
+ host: localhost
50
+ port: 3035
51
+ public: localhost:3035
52
+ hmr: true
53
+ # Inline should be set to true if using HMR
54
+ inline: true
55
+ ```
56
+
57
+ 2. Add react refresh packages:
58
+ ` yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh -D`
59
+
60
+ 3. HMR is for use with the webpack-dev-server, so we only add this for the webpack-dev-server.
61
+ ```
62
+ const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER;
63
+
64
+ //plugins
65
+ if(isWebpackDevServer) {
66
+ environment.plugins.append(
67
+ 'ReactRefreshWebpackPlugin',
68
+ new ReactRefreshWebpackPlugin({
69
+ overlay: {
70
+ sockPort: 3035
71
+ }
72
+ })
73
+ );
74
+ }
75
+ ```
76
+ We added overlay.sockedPort option in `ReactRefreshWebpackPlugin` to match the webpack dev-server port specified in config/webpacker.yml. Thats way we make sockjs works properly and suppress error in browser console `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`.
77
+
78
+ 4. Add react-refresh plugin in `babel.config.js`
79
+ ```
80
+ module.export = function(api) {
81
+ return {
82
+ plugins: [process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel'].filter(Boolean)
83
+ }
84
+ }
85
+ ```
86
+ That's it :).
87
+ Now Browser should reflect .js along with .css changes without reloading.
88
+
89
+ If by some reason plugin doesn't work you could revert changes and left only devServer hmr/inline to true affecting only css files.
90
+
91
+ These plugins are working and tested with
92
+ - babel 7
93
+ - webpacker 5
94
+ - bootstrap 4
95
+ - jest 26
96
+ - core-js 3
97
+ - node 12.10.0
98
+ - react-refresh-webpack-plugin@0.4.1
99
+ - react-refresh 0.8.3
100
+ - react_on_rails 11.1.4
101
+
102
+ configuration.
@@ -1,6 +1,9 @@
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](./client-vs-server-rendering.md).
4
+
5
+ ## What is the easiest way to setup a webpack configuration for server-side-rendering?
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).
4
7
 
5
8
  ## What is Server Rendering?
6
9
 
@@ -10,13 +13,13 @@ During the Rails rendering of HTML per a browser request, the Rails server will
10
13
 
11
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).
12
15
 
13
- See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering)
14
-
16
+ See [this note](docs/outdated/how-react-on-rails-works.md#client-side-rendering-vs-server-side-rendering).
15
17
 
16
18
  ## How do you do Server Rendering with React on Rails?
17
19
  1. The `react_component` view helper method provides the `prerender:` option to switch on or off server rendering.
18
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.
19
- 1. You need to configure `config.server_bundle_js_file = "my-server-bundle.js"` in your `config/initializers/react_on_rails.rb`
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.
20
23
 
21
24
  ## Do you need server rendering?
22
25
 
@@ -26,4 +29,4 @@ Server rendering is used for either SEO or performance reasons.
26
29
 
27
30
  1. Never access `window`. Animations, globals on window, etc. just don't make sense when you're trying to run some JavaScript code to output a string of HTML.
28
31
  2. JavaScript calls to `setTimeout`, `setInterval`, and `clearInterval` similarly don't make sense when server rendering.
29
- 3. Promises don't work when server rendering. Anything to be done in a promise will never complete. This includes concepts such as asynchronous code loading and AJAX calls. If you want to do server rendering with asynchronous calls, [get in touch](mailto:justin@shakacode.com) as we're working on a Node renderer that handles asynchronous calls.
32
+ 3. Promises and file system access don't work when server rendering with ExecJS. Instead, you can use the Node renderer or [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
@@ -28,20 +28,23 @@ return a React component, or you are registering a React component defined by a
28
28
  Please see [Render-Functions and the Rails Context](./render-functions-and-railscontext.md) for
29
29
  more information on what a Render-Function is.
30
30
 
31
- ##### Correct
31
+ ##### Update required for registered functions taking exactly 2 params.
32
32
 
33
- Registered Objects are of the following types. Either of these will work:
34
- 1. Takes only zero or one params and you return a React Element, often JSX.
33
+ Registered Objects are of the following type:
34
+ 1. **Function that takes only zero or one params and you return a React Element**, often JSX. If the function takes zero or one params, there is **no migration needed** for that function.
35
35
  ```js
36
36
  export default (props) => <Component {...props} />;
37
37
  ```
38
- 2. Takes **2 params** and returns **a React function or class component**. A function
39
- component is a function that takes zero or one params and returns a React Element, like JSX.
38
+ 2. Function that takes **2 params** and returns **a React function or class component**. _Migration is needed as the older syntax returned a React Element._
39
+ A function component is a function that takes zero or one params and returns a React Element, like JSX. The correct syntax
40
+ looks like:
40
41
  ```js
41
- export default (props, _railsContext) => () => <Component {...props} />;
42
+ export default (props, railsContext) => () => <Component {{...props, railsContext}} />;
42
43
  ```
43
- Note, you cannot return a React Element (JSX).
44
- 3. Takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`
44
+ Note, you cannot return a React Element (JSX). See below for the migration steps. If your function that took **two params returned
45
+ an Object**, then no migration is required.
46
+ 3. Function that takes **3 params** and uses the 3rd param, `domNodeId`, to call `ReactDOM.hydrate`. If the function takes 3 params, there is **no migration needed** for that function.
47
+ 4. ES6 or ES5 class. There is **no migration needed**.
45
48
 
46
49
  Previously, with case number 2, you could return a React Element.
47
50
 
@@ -51,7 +54,7 @@ The fix is simple. Here is an example of the change you'll do:
51
54
 
52
55
  ##### Broken, as this function takes two params and it returns a React Element from a JSX Literal
53
56
  ```js
54
- export default (props, _railsContext) => <Component {...props} />;
57
+ export default (props, railsContext) => <Component {{...props, railsContext} />;
55
58
  ```
56
59
 
57
60
  If you make this mistake, you'll get this warning
@@ -6,8 +6,13 @@
6
6
 
7
7
  [rails/webpacker](https://github.com/rails/webpacker) is the Ruby gem that mainly gives us 2 things:
8
8
 
9
- 1. View helpers for placing the Webpack bundles on your Rails views. React on Rails depends on these view helpers.
10
- 2. A layer of abstraction on top of Webpack customization. This is great for demo projects, but most real world projects will want a customized version of Webpack.
9
+ 1. View helpers for placing the webpack bundles on your Rails views. React on Rails depends on these view helpers.
10
+ 2. A layer of abstraction on top of Webpack customization. The base setup works great for the client side webpack configuration.
11
+
12
+ To get a deeper understanding of `rails/webpacker`, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8)
13
+
14
+ Per the example repo [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),
15
+ you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
11
16
 
12
17
  # React on Rails
13
18
 
@@ -15,15 +20,15 @@ Version 9 of React on Rails added support for the rails/webpacker view helpers s
15
20
 
16
21
  A key decision in your use React on Rails is whether you go with the rails/webpacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
17
22
 
18
- ## Option 1: Recommended: Traditional React on Rails using the /client directory
23
+ ## Option 1: Default Generator Setup: rails/webpacker app/javascript
19
24
 
20
- Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
25
+ Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/master/docs/folder-structure.md). If you follow the steps in the the [basic tutorial](../../docs/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://github.com/rails/webpacker/blob/master/docs/webpack.md).
21
26
 
22
- The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for projects beyond the simplest cases as it provides the greatest transparency in your webpack and overall client-side setup. The *big advantage* to this is that almost everything within the `/client` directory will apply if you wish to convert your client-side code to a pure Single Page Application that runs without Rails. This allows you to Google for how to do something with Webpack configuration and what applies to a non-Rails app will apply just as well to a React on Rails app.
27
+ The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization.
23
28
 
24
- An examples of this pattern is the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
29
+ ## Option 2: Traditional React on Rails using the /client directory
25
30
 
26
- In this case, you don't need to understand the nuances of customization of your Webpack config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
31
+ Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
27
32
 
28
33
  You can access values in the `config/webpacker.yml`
29
34
 
@@ -36,15 +41,4 @@ You will want consider using some of the same values set in these files:
36
41
  * https://github.com/rails/webpacker/blob/master/package/environments/base.js
37
42
  * https://github.com/rails/webpacker/blob/master/package/environments/development.js
38
43
 
39
- **Note**, if your node_modules directory is not at the top level of the Rails project, then you will need to set the
40
- ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
41
-
42
- ## Option 2: Default Generator Setup: rails/webpacker app/javascript
43
-
44
- Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/master/docs/folder-structure.md). If you follow the steps in the the [basic tutorial](../../docs/tutorial.md), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://github.com/rails/webpacker/blob/master/docs/webpack.md).
45
-
46
- The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization. The *big disadvantage* to this is that you will need to learn the ins and outs of the [rails/webpacker way to customize Webpack](https://github.com/rails/webpacker/blob/master/docs/webpack.md) which differs from the plain [Webpack way](https://webpack.js.org/).
47
44
 
48
- You can find more details on this topic in [Recommended Project Structure](./recommended-project-structure.md).
49
-
50
- See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.
@@ -25,7 +25,6 @@ The React on Rails setup provides several key components related to front-end de
25
25
  * React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent:
26
26
  * [Style Guide](../coding-style/style.md)
27
27
  * [linters](../contributor-info/linters.md)
28
- * [Recommended Project Structure](../basics/recommended-project-structure.md)
29
28
 
30
29
  We're big believers in this quote from the Rails Doctrine:
31
30
 
@@ -1,5 +1,11 @@
1
1
  # React on Rails Basic Tutorial
2
2
 
3
+ -----
4
+
5
+ **August 2, 2020**: See the example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh) for a new way to setup the creation of your SSR bundle with `rails/webpacker`. This file will be update shortly. Most of it is still relevant.
6
+
7
+ -----
8
+
3
9
  *Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
4
10
 
5
11
  This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
@@ -71,7 +71,11 @@ module ReactOnRails
71
71
  # 1. Using same bundle for both server and client, so server bundle will be hashed in manifest
72
72
  # 2. Using a different bundle (different Webpack config), so file is not hashed, and
73
73
  # bundle_js_path will throw so the default path is used without a hash.
74
- # 3. Not using webpacker, and this method returns the bundle_js_file_path
74
+ # 3. The third option of having the server bundle hashed and a different configuration than
75
+ # the client bundle is not supported for 2 reasons:
76
+ # a. The webpack manifest plugin would have a race condition where the same manifest.json
77
+ # is edited by both the webpack-dev-server
78
+ # b. There is no good reason to hash the server bundle name.
75
79
  return @server_bundle_path if @server_bundle_path && !Rails.env.development?
76
80
 
77
81
  bundle_name = ReactOnRails.configuration.server_bundle_js_file
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ReactOnRails
4
- VERSION = "12.0.1"
4
+ VERSION = "12.0.2"
5
5
  end
@@ -28,10 +28,10 @@ module ReactOnRails
28
28
  # Next line will throw if the file or manifest does not exist
29
29
  hashed_bundle_name = Webpacker.manifest.lookup!(bundle_name)
30
30
 
31
- # support for hashing the server-bundle and having that built
32
- # by a webpack watch process and not served by the webpack-dev-server, then we
33
- # need an extra config value "same_bundle_for_client_and_server" where a value of false
34
- # would mean that the bundle is created by a separate webpack watch process.
31
+ # Support for hashing the server-bundle and having that built
32
+ # the webpack-dev-server is provided by the config value
33
+ # "same_bundle_for_client_and_server" where a value of true
34
+ # would mean that the bundle is created by the webpack-dev-server
35
35
  is_server_bundle = bundle_name == ReactOnRails.configuration.server_bundle_js_file
36
36
 
37
37
  if Webpacker.dev_server.running? && (!is_server_bundle ||
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-on-rails",
3
- "version": "12.0.1",
3
+ "version": "12.0.2",
4
4
  "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
5
5
  "main": "node_package/lib/ReactOnRails.js",
6
6
  "directories": {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: react_on_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.0.1
4
+ version: 12.0.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Justin Gordon
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-07-10 00:00:00.000000000 Z
11
+ date: 2020-08-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: addressable
@@ -357,6 +357,7 @@ files:
357
357
  - docs/additional-reading/react-and-redux.md
358
358
  - docs/additional-reading/react-helmet.md
359
359
  - docs/additional-reading/react-router.md
360
+ - docs/additional-reading/recommended-project-structure.md
360
361
  - docs/additional-reading/server-rendering-tips.md
361
362
  - docs/additional-reading/tips.md
362
363
  - docs/additional-reading/troubleshooting-when-using-webpacker.md
@@ -381,7 +382,6 @@ files:
381
382
  - docs/basics/migrating-from-react-rails.md
382
383
  - docs/basics/minitest-configuration.md
383
384
  - docs/basics/react-server-rendering.md
384
- - docs/basics/recommended-project-structure.md
385
385
  - docs/basics/render-functions-and-railscontext.md
386
386
  - docs/basics/rspec-configuration.md
387
387
  - docs/basics/upgrading-react-on-rails.md
@@ -1,77 +0,0 @@
1
- # Recommended Project structure
2
-
3
- The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
4
-
5
- ```yml
6
- app/javascript:
7
- ├── bundles:
8
- │ # Logical groups of files that can be used for code splitting
9
- │ └── hello-world-bundle.js
10
- ├── packs:
11
- │ # only webpack entry files here
12
- │ └── hello-world-bundle.js
13
- ```
14
-
15
- However, you may wish to move all your client side files to a single directory called something like `/client`.
16
-
17
- ## Steps to convert from the generator defaults to use a `/client` directory structure.
18
-
19
- 1. Move the directory:
20
-
21
- ```
22
- mv app/javascript client
23
- ```
24
-
25
- 2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
26
-
27
- ```yml
28
- source_path: client
29
- ```
30
-
31
- ## Moving node_modules from `/` to `/client` with a custom webpack setup.
32
-
33
- `rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
34
-
35
- 1. Move the `/package.json` to `/client/package.json`
36
- 2. Create a `/package.json` that delegates to `/client/package.json`. See the example in [spec/dummy/package.json](../../spec/dummy/package.json).
37
- 3. See the webpack configuration in [spec/dummy/client](../../spec/dummy/client) for a webpack configuration example.
38
-
39
-
40
- ## JavaScript Assets
41
- 1. `/client`: All client side JavaScript goes under the `/client` directory. Place all the major domains of the client side app under client.
42
- 1. `/client/app`: All application JavaScript. Note the adherence to the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#naming-conventions) where we name the files to correspond to exported Objects (PascalCase) or exported functions (camelCase). We don't use dashes or snake_case for JavaScript files, except for possibly some config files.
43
- 1. `/client/app/bundles`: Top level of different app domains. Use a name within this directory for you app domains. For example, if you had a domain called `widget-editing`, then you would have: `/client/app/bundles/widget-editing`
44
- 1. `/client/app/lib`: Common code for bundles
45
- 1. Within each bundle directory (or the lib directory), such as a domain named "comments"
46
- `/client/app/bundles/comments`, use following directory structure, if you're using redux. However, with React hooks, this will probably be a bit different:
47
-
48
- * `/actions`: Redux actions.
49
- * `/components`: "dumb" components (no connections to Redux or Ajax). These get props and can render themselves and children.
50
- * `/constants`: Constants used by Redux actions and reducers.
51
- * `/containers`: "smart" components. These components are bound to Redux.
52
- * `/reducers`: Reducers for redux.
53
- * `/routes`: Routes for React Router.
54
- * `/store`: Store, which might be [configured differently for dev vs. production](https://github.com/reactjs/redux/tree/master/examples/real-world/store).
55
- * `/startup`: Component bindings to stores, with registration of components and stores.
56
- * `/schemas`: Schemas for AJAX JSON requests and responses, as used by the [Normalizr](https://github.com/gaearon/normalizr) package.
57
-
58
- ## CSS, Sass, Fonts, and Images
59
- Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends! You have 2 basic choices:
60
-
61
- ### Simple Rails Way
62
- This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
63
-
64
- #### Advantages
65
- 1. Much simpler! There's no changes really from your current processes.
66
-
67
- ### Using Webpack to Manage Styling Assets
68
- This technique involves customization of the webpack config files to generate CSS, image, and font assets.
69
-
70
- #### Directory structure
71
- 1. `/client/app/assets`: Assets for CSS for client app.
72
- 1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
73
-
74
- #### Advantages
75
- 1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
76
- 1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.
77
- 1. You can run your client code on a mocked out express server for super fast prototyping. In other words, your client application can somewhat more easily be move to a different application server.