react_on_rails 12.0.0.pre.beta.0 → 12.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +21 -4
- data/README.md +27 -23
- data/SUMMARY.md +1 -1
- data/docs/basics/configuration.md +27 -16
- data/docs/basics/deployment.md +2 -3
- data/docs/basics/heroku-deployment.md +24 -0
- data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +49 -0
- data/docs/basics/i18n.md +3 -3
- data/docs/basics/installation-into-an-existing-rails-app.md +2 -7
- data/docs/basics/recommended-project-structure.md +5 -22
- data/docs/basics/rspec-configuration.md +27 -16
- data/docs/basics/upgrading-react-on-rails.md +14 -6
- data/docs/basics/webpack-configuration.md +3 -7
- data/docs/misc/doctrine.md +1 -1
- data/docs/outdated/how-react-on-rails-works.md +8 -4
- data/docs/outdated/manual-installation-overview.md +1 -1
- data/docs/outdated/rails-assets.md +0 -7
- data/docs/tutorial.md +67 -61
- data/lib/generators/react_on_rails/base_generator.rb +2 -2
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +3 -1
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr +26 -0
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +20 -41
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +4 -1
- data/lib/react_on_rails/configuration.rb +45 -6
- data/lib/react_on_rails/locales/base.rb +8 -0
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +1 -1
- data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/webpacker_utils.rb +6 -0
- data/lib/tasks/assets.rake +36 -9
- data/lib/tasks/locale.rake +1 -5
- data/package.json +1 -1
- data/rakelib/release.rake +0 -6
- data/react_on_rails.gemspec +1 -0
- data/yarn.lock +260 -109
- metadata +21 -6
- data/docs/outdated/heroku-deployment.md +0 -86
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
@@ -1,9 +1,31 @@
|
|
1
1
|
# RSpec Configuration
|
2
2
|
_Click [here for minitest](./minitest-configuration.md)_
|
3
3
|
|
4
|
+
# If your webpack configurations correspond to rails/webpacker's default setup
|
5
|
+
If you're able to configure your webpack configuration to be run by having your webpack configuration
|
6
|
+
returned by the files in `/config/webpack`, then you have 2 options to ensure that your files are
|
7
|
+
compiled by webpack before running tests and during production deployment:
|
8
|
+
|
9
|
+
1. **Use rails/webpacker's compile option**: Configure your `config/webpacker.yml` so that `compile: true` is for `test` and `production`
|
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).
|
13
|
+
|
14
|
+
```yml
|
15
|
+
config.build_test_command = "NODE_ENV=test RAILS_ENV=test bin/webpack"
|
16
|
+
```
|
17
|
+
|
18
|
+
Which should you use? If you're already using the `rails/webpacker` way to configure webpack, then
|
19
|
+
you can keep things simple and use the `rails/webpacker` options.
|
20
|
+
|
21
|
+
# Checking for stale assets using React on Rails
|
22
|
+
|
4
23
|
Because you will probably want to run RSpec tests that rely on compiled webpack assets (typically, your integration/feature specs where `js: true`), you will want to ensure you don't accidentally run tests on missing or stale webpack assets. If you did use stale Webpack assets, you will get invalid test results as your tests do not use the very latest JavaScript code.
|
5
24
|
|
6
|
-
|
25
|
+
As mentioned above, you can configure `compile: true` in `config/webpacker.yml` _if_ you've got configuration for
|
26
|
+
your webpack in the standard `rails/webpacker` spot of `config/webpack/<NODE_ENV>.js`
|
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`.
|
7
29
|
|
8
30
|
```ruby
|
9
31
|
RSpec.configure do |config|
|
@@ -22,40 +44,29 @@ If you are using Webpack to build CSS assets, you should do something like this
|
|
22
44
|
```
|
23
45
|
|
24
46
|
Please take note of the following:
|
25
|
-
- 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.
|
26
48
|
|
27
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`
|
28
50
|
|
29
|
-
- 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.
|
30
52
|
|
31
|
-
- By default, the webpack processes look
|
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.
|
32
54
|
|
33
55
|
The following `config/react_on_rails.rb` settings **must** match your setup:
|
34
56
|
```ruby
|
35
|
-
# Directory where your generated assets go. All generated assets must go to the same directory.
|
36
|
-
# Configure this in your webpack config files. This relative to your Rails root directory.
|
37
|
-
# We recommend having different generated assets dirs per Rails env.
|
38
|
-
config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
|
39
|
-
|
40
57
|
# Define the files we need to check for webpack compilation when running tests.
|
41
|
-
# Generally, the manifest.json is good enough for this check if using webpacker
|
42
58
|
config.webpack_generated_files = %w( manifest.json )
|
43
59
|
|
44
60
|
# OR if you're not hashing the server-bundle.js, then you should include your server-bundle.js in the list.
|
45
61
|
# config.webpack_generated_files = %w( server-bundle.js manifest.json )
|
46
62
|
|
47
|
-
# OR if you're not using webpacker, your setup might look like.
|
48
|
-
# config.webpack_generated_files = %w( client-bundle.js server-bundle.js )
|
49
|
-
|
50
63
|
# If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
|
51
64
|
# with rspec then this controls what yarn command is run
|
52
65
|
# to automatically refresh your webpack assets on every test run.
|
53
66
|
config.build_test_command = "yarn run build:test"
|
54
67
|
```
|
55
68
|
|
56
|
-
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.
|
57
|
-
|
58
|
-
[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.
|
69
|
+
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. For example, `yarn run build:test --watch`
|
59
70
|
|
60
71
|
![2016-01-27_02-36-43](https://cloud.githubusercontent.com/assets/1118459/12611951/7c56d070-c4a4-11e5-8a80-9615f99960d9.png)
|
61
72
|
|
@@ -5,18 +5,26 @@ If you would like help in migrating between React on Rails versions or help with
|
|
5
5
|
|
6
6
|
We specialize in helping companies to quickly and efficiently move from versions before 9 to current. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4 for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
|
7
7
|
|
8
|
-
## Upgrading to
|
9
|
-
|
10
|
-
|
8
|
+
## Upgrading to v12
|
9
|
+
### Recent versions
|
10
|
+
Make sure that you are on a relatively more recent version of rails and webpacker.
|
11
|
+
v12 is tested on Rails 6. It should work on Rails v5. If you're on an older version,
|
12
|
+
and v12 doesn't work, please file an issue.
|
13
|
+
|
14
|
+
### i18n default format changed to JSON
|
15
|
+
* If you're using the internalization helper, then set `config.i18n_output_format = 'js'`. You can
|
16
|
+
later update to the default JSON format as you will need to update your usage of that file. A JSON
|
17
|
+
format is more efficient.
|
18
|
+
|
19
|
+
### Updated API for `ReactOnRails.register()`
|
11
20
|
|
12
21
|
In order to solve the issues regarding React Hooks compatibility, the number of parameters
|
13
22
|
for functions is used to determine if you have a render function that will get invoked to
|
14
23
|
return a React component, or you are registering a React component defined by a function.
|
15
24
|
|
16
|
-
Registered Objects are of the following types:
|
17
|
-
|
18
25
|
##### Correct
|
19
|
-
|
26
|
+
|
27
|
+
Registered Objects are of the following types. Either of these will work:
|
20
28
|
1. Take **2 params** and return **a React function or class component**. A function component is a function
|
21
29
|
that takes zero or one params and returns a React Element, like JSX.
|
22
30
|
```js
|
@@ -17,11 +17,11 @@ A key decision in your use React on Rails is whether you go with the rails/webpa
|
|
17
17
|
|
18
18
|
## Option 1: Recommended: Traditional React on Rails using the /client directory
|
19
19
|
|
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`.
|
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`.
|
21
21
|
|
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
|
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.
|
23
23
|
|
24
|
-
|
24
|
+
An examples of this pattern is the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial).
|
25
25
|
|
26
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).
|
27
27
|
|
@@ -45,10 +45,6 @@ Typical rails/webpacker apps have a standard directory structure as documented [
|
|
45
45
|
|
46
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
47
|
|
48
|
-
Overall, consider carefully if you prefer the `rails/webpacker` directory structure and Webpack configuration, over the placement of all client side files within the `/client` directory along with conventional Webpack configuration. Once again, the `/client` directory setup is recommended.
|
49
|
-
|
50
48
|
You can find more details on this topic in [Recommended Project Structure](./recommended-project-structure.md).
|
51
49
|
|
52
50
|
See [Issue 982: Tutorial Generating Correct Project Structure?](https://github.com/shakacode/react_on_rails/issues/982) to discuss this issue.
|
53
|
-
|
54
|
-
For more details on project setup, see [Recommended Project Structure](./docs/basics/recommended-project-structure.md).
|
data/docs/misc/doctrine.md
CHANGED
@@ -19,7 +19,7 @@ The React on Rails setup provides several key components related to front-end de
|
|
19
19
|
6. Happiness for us is actively participating in open source, so we want to be where the action is, which is with the npm libraries on github.com.
|
20
20
|
7. You can get set up on React on Rails **FAST** using our application generator.
|
21
21
|
8. By placing all client-side development inside of the `/client` directory, pure JavaScript developers can productively do development separate from Rails. Instead of Rails APIs, stub APIs on an express server can provide a simple backend, allowing for rapid iteration of UI prototypes.
|
22
|
-
9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](docs/
|
22
|
+
9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](docs/basics/heroku-deployment.md).
|
23
23
|
|
24
24
|
## Convention over Configuration
|
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:
|
@@ -28,13 +28,17 @@ 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.
|
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
|
-
|
33
|
+
For example, you might create a [Procfile.dev](spec/dummy/Procfile.dev).
|
34
34
|
|
35
|
-
On production deployments that use asset precompilation, such as Heroku deployments,
|
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
|
+
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)
|
40
|
+
|
41
|
+
Then React on Rails modifies the `assets:precompile` task to run your `build_production_command`.
|
38
42
|
|
39
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.
|
40
44
|
|
@@ -25,6 +25,6 @@ The default path: `public/webpack` can be loaded with webpackConfigLoader as sho
|
|
25
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.
|
26
26
|
1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
|
27
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/
|
28
|
+
1. If you are deploying to Heroku, see [heroku-deployment.md](/docs/basics/heroku-deployment.md)
|
29
29
|
|
30
30
|
If I missed anything, please submit a PR or file an issue.
|
@@ -36,13 +36,6 @@ _If you are interested in learning how to use assets in your React components, r
|
|
36
36
|
_Note, this solution was removed in v14. If you're intersted in this symlink solution, please create
|
37
37
|
a github issue._
|
38
38
|
|
39
|
-
React on Rails creates symlinks of non-digested versions (original webpack digested file names)
|
40
|
-
to the Rails deployed digested versions when doing a Rails assets compile. The solution is
|
41
|
-
implemented using `assets:precompile` after-hook in
|
42
|
-
file [lib/tasks/assets.rake](lib/tasks/assets.rake)
|
43
|
-
The assets for symlinking are defined by `config.symlink_non_digested_assets_regex` in
|
44
|
-
`config/initializers/react_on_rails.rb`.
|
45
|
-
|
46
39
|
## Example from /spec/dummy
|
47
40
|
|
48
41
|
```
|
data/docs/tutorial.md
CHANGED
@@ -37,6 +37,7 @@ gem install rails # download and install latest stable Rails
|
|
37
37
|
gem install foreman # download and install Foreman
|
38
38
|
```
|
39
39
|
|
40
|
+
## Create a new Ruby on Rails App
|
40
41
|
Then we need to create a fresh Rails application with webpacker react support as following.
|
41
42
|
|
42
43
|
First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
|
@@ -44,14 +45,22 @@ First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If
|
|
44
45
|
```
|
45
46
|
cd <directory where you want to create your new Rails app>
|
46
47
|
|
47
|
-
#
|
48
|
-
|
48
|
+
# Any name you like for the rails app
|
49
|
+
# Skip javascript so will add that next and get the current version
|
50
|
+
rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
|
49
51
|
|
50
52
|
cd test-react-on-rails
|
51
53
|
bundle
|
52
54
|
```
|
53
55
|
|
54
|
-
|
56
|
+
## Add the webpacker gem
|
57
|
+
|
58
|
+
```
|
59
|
+
bundle add webpacker
|
60
|
+
bundle add react_on_rails
|
61
|
+
```
|
62
|
+
|
63
|
+
## Run the webpacker generator
|
55
64
|
|
56
65
|
```
|
57
66
|
bundle exec rails webpacker:install
|
@@ -67,13 +76,17 @@ git add -A
|
|
67
76
|
git commit -m "Initial commit"
|
68
77
|
```
|
69
78
|
|
70
|
-
Add the **React On Rails** gem to your `Gemfile`:
|
79
|
+
## Add the **React On Rails** gem to your `Gemfile`:
|
80
|
+
|
81
|
+
To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
|
82
|
+
of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
|
71
83
|
|
72
84
|
```
|
73
85
|
gem 'react_on_rails', '12.0.0' # prefer exact gem version to match npm version
|
74
86
|
```
|
75
87
|
|
76
|
-
Note:
|
88
|
+
Note: The latest released React On Rails version is considered stable. Please use the latest
|
89
|
+
version to ensure you get all the security patches and the best support.
|
77
90
|
|
78
91
|
Run `bundle` and commit the changes.
|
79
92
|
|
@@ -83,70 +96,36 @@ bundle
|
|
83
96
|
git commit -am "Added React on Rails Gem"
|
84
97
|
```
|
85
98
|
|
86
|
-
Install React on Rails: `rails generate react_on_rails:install
|
99
|
+
Install React on Rails: `rails generate react_on_rails:install`. You need to first git commit your files before running the generator, or else it will generate an error.
|
100
|
+
|
101
|
+
Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
|
102
|
+
If you want the redux install: `rails generate react_on_rails:install --redux`
|
87
103
|
|
88
104
|
```
|
89
105
|
rails generate react_on_rails:install
|
90
106
|
```
|
91
107
|
|
92
|
-
Then run server with static client
|
108
|
+
Then run server with a static client bundle. Static means that the bundle is saved in your
|
109
|
+
public/webpack/packs directory.
|
93
110
|
|
94
111
|
```
|
95
112
|
foreman start -f Procfile.dev
|
96
113
|
```
|
97
114
|
|
98
|
-
To run with the webpack-dev-server:
|
115
|
+
## To run with the webpack-dev-server:
|
99
116
|
```
|
100
|
-
foreman start -f Procfile.dev-
|
117
|
+
foreman start -f Procfile.dev-hmr
|
101
118
|
```
|
102
119
|
|
103
120
|
Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
|
104
121
|
|
105
|
-
*Note, foreman may default to PORT 5000 unless you set the value of PORT in your environment or in the Procfile.*
|
106
|
-
|
107
122
|
# HMR vs. React Hot Reloading
|
108
123
|
|
109
|
-
First, check that the `hmr`
|
110
|
-
|
111
|
-
The basic setup will have HMR working with the default webpacker setup. However, the basic will cause a full page refresh each time you save a file.
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
### Custom IP & PORT setup (Cloud9 example)
|
134
|
-
|
135
|
-
In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
|
136
|
-
|
137
|
-
``` Procfile.dev
|
138
|
-
web: rails s -p 8080 -b 0.0.0.0
|
139
|
-
```
|
140
|
-
|
141
|
-
Then visit https://your-shared-addr.c9users.io:8080/hello_world
|
142
|
-
|
143
|
-
|
144
|
-
## RubyMine
|
145
|
-
|
146
|
-
It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
|
124
|
+
First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
|
147
125
|
|
148
|
-
|
149
|
-
|
126
|
+
The basic setup will have HMR working with the default webpacker setup. The basic
|
127
|
+
[HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
|
128
|
+
React setup, will cause a full page refresh each time you save a file.
|
150
129
|
|
151
130
|
## Deploying to Heroku
|
152
131
|
|
@@ -169,17 +148,16 @@ Set heroku to use multiple buildpacks:
|
|
169
148
|
|
170
149
|
### Swap out sqlite for postgres by doing the following:
|
171
150
|
|
172
|
-
|
151
|
+
Run these two commands:
|
173
152
|
|
174
|
-
```ruby
|
175
|
-
gem 'pg'
|
176
153
|
```
|
177
|
-
|
178
|
-
|
154
|
+
bundle remove sqlite3
|
155
|
+
bundle add pg
|
156
|
+
```
|
179
157
|
|
180
158
|
![07](https://cloud.githubusercontent.com/assets/20628911/17465015/1f2f4042-5cf4-11e6-8287-2fb077550809.png)
|
181
159
|
|
182
|
-
|
160
|
+
### Replace your `database.yml` file with this (assuming your app name is "ror").
|
183
161
|
|
184
162
|
```yml
|
185
163
|
default: &default
|
@@ -207,7 +185,6 @@ production:
|
|
207
185
|
Then you need to setup postgres so you can run locally:
|
208
186
|
|
209
187
|
```
|
210
|
-
bundle
|
211
188
|
rake db:setup
|
212
189
|
rake db:migrate
|
213
190
|
```
|
@@ -231,7 +208,7 @@ Create `/Procfile`. This is what Heroku uses to start your app.
|
|
231
208
|
web: bundle exec puma -C config/puma.rb
|
232
209
|
```
|
233
210
|
|
234
|
-
Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of
|
211
|
+
Note, newer versions of Rails create this file automatically. However, the [docs on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server#config) have something a bit different, so please make it conform to those docs. As of 2020-06-04, the docs looked like this:
|
235
212
|
|
236
213
|
`config/puma.rb`
|
237
214
|
```rb
|
@@ -252,6 +229,15 @@ on_worker_boot do
|
|
252
229
|
end
|
253
230
|
```
|
254
231
|
|
232
|
+
Next, update your `package.json` to specify the version of yarn and node. Add this section:
|
233
|
+
|
234
|
+
```json
|
235
|
+
"engines": {
|
236
|
+
"node": "13.9.0",
|
237
|
+
"yarn": "1.22.4"
|
238
|
+
},
|
239
|
+
```
|
240
|
+
|
255
241
|
Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
|
256
242
|
|
257
243
|
```
|
@@ -268,7 +254,6 @@ heroku open
|
|
268
254
|
|
269
255
|
and you will see your live app and you can share this URL with your friends. Congrats!
|
270
256
|
|
271
|
-
|
272
257
|
## Turning on Server Rendering
|
273
258
|
|
274
259
|
You can turn on server rendering by simply changing the `prerender` option to `true`:
|
@@ -331,7 +316,7 @@ mv app/javascript client
|
|
331
316
|
|
332
317
|
## Using HMR with the rails/webpacker setup
|
333
318
|
|
334
|
-
Start the app using `foreman start -f Procfile.dev-
|
319
|
+
Start the app using `foreman start -f Procfile.dev-hmr`.
|
335
320
|
|
336
321
|
When you change a JSX file and save, the browser will automatically refresh!
|
337
322
|
|
@@ -343,6 +328,27 @@ So you get some basics from HMR with no code changes. If you want to go further,
|
|
343
328
|
|
344
329
|
React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by rails/webpacker.
|
345
330
|
|
331
|
+
|
332
|
+
### Custom IP & PORT setup (Cloud9 example)
|
333
|
+
|
334
|
+
In case you are running some custom setup with different IP or PORT you should also edit Procfile.dev. For example to be able to run on free Cloud9 IDE we are putting IP 0.0.0.0 and PORT 8080. The default generated file `Procfile.dev` uses `-p 3000`.
|
335
|
+
|
336
|
+
``` Procfile.dev
|
337
|
+
web: rails s -p 8080 -b 0.0.0.0
|
338
|
+
```
|
339
|
+
|
340
|
+
Then visit https://your-shared-addr.c9users.io:8080/hello_world
|
341
|
+
|
342
|
+
## RubyMine
|
343
|
+
|
344
|
+
It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
|
345
|
+
|
346
|
+
* Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
|
347
|
+
* `node_modules`
|
348
|
+
|
349
|
+
|
350
|
+
|
351
|
+
|
346
352
|
## Conclusion
|
347
353
|
|
348
354
|
* Browse the docs either on the [gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) or in the [docs directory on github](https://github.com/shakacode/react_on_rails/tree/master/docs)
|
@@ -33,7 +33,7 @@ module ReactOnRails
|
|
33
33
|
app/views/layouts/hello_world.html.erb
|
34
34
|
config/initializers/react_on_rails.rb
|
35
35
|
Procfile.dev
|
36
|
-
Procfile.dev-
|
36
|
+
Procfile.dev-hmr]
|
37
37
|
base_files.each { |file| copy_file("#{base_path}#{file}", file) }
|
38
38
|
end
|
39
39
|
|
@@ -107,7 +107,7 @@ module ReactOnRails
|
|
107
107
|
foreman start -f Procfile.dev
|
108
108
|
|
109
109
|
- To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
|
110
|
-
and bin/webpack-dev-server. Or use Procfile.dev-
|
110
|
+
and bin/webpack-dev-server. Or use Procfile.dev-hmr.
|
111
111
|
|
112
112
|
- To server render, change this line app/views/hello_world/index.html.erb to
|
113
113
|
`prerender: true` to see server rendering (right click on page and select "view source").
|
@@ -4,4 +4,6 @@ web: rails s -p 3000
|
|
4
4
|
# Next line runs a watch process with webpack to compile the changed files.
|
5
5
|
# When making frequent changes to client side assets, you will prefer building webpack assets
|
6
6
|
# upon saving rather than when you refresh your browser page.
|
7
|
-
|
7
|
+
# Note, if using React on Rails localization you will need to run
|
8
|
+
# `bundle exec rake react_on_rails:locale` before you run bin/webpack
|
9
|
+
client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'
|