react_on_rails 13.3.1 → 13.3.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -1
- data/Gemfile.development_dependencies +2 -2
- data/docs/guides/deployment.md +3 -2
- data/docs/guides/file-system-based-automated-bundle-generation.md +7 -6
- data/docs/guides/how-react-on-rails-works.md +6 -6
- data/docs/guides/how-to-conditionally-server-render-based-on-device-type.md +2 -1
- data/docs/guides/installation-into-an-existing-rails-app.md +9 -7
- data/docs/guides/tutorial.md +81 -72
- data/lib/generators/react_on_rails/base_generator.rb +1 -1
- data/lib/generators/react_on_rails/bin/dev +1 -4
- data/lib/generators/react_on_rails/bin/dev-static +1 -4
- data/lib/generators/react_on_rails/install_generator.rb +9 -0
- data/lib/react_on_rails/helper.rb +6 -6
- data/lib/react_on_rails/version.rb +1 -1
- data/package.json +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 37f8e087fd09c6ea86239307c6c47121d294d73c84065b07ff0756e79ed6b679
|
|
4
|
+
data.tar.gz: 93fc7de963700c87af99cdb13ba4511c6b305721d1f2c784d4cd840f6084775a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2c7fa29cd46918b4605e8d9f5481eec8506536bd096cfbeb90bc284e0b246322a16956d0e218c9d7e905a5638674863df222b781826f47b1eafeb79e11ec03c5
|
|
7
|
+
data.tar.gz: 481709881b0f9d24fb5047b213325c189185e9869e62f664afb8dbcea6b3a24b510f12ba17e1ffc0b7db4c7e478318c92fc93e8d7188b255b26cc245ac430011
|
data/CHANGELOG.md
CHANGED
|
@@ -17,6 +17,11 @@ Changes since last non-beta release.
|
|
|
17
17
|
|
|
18
18
|
*Please add entries here for your pull requests that are not yet released.*
|
|
19
19
|
|
|
20
|
+
### [13.3.2] - 2022-02-24
|
|
21
|
+
|
|
22
|
+
### Fixed
|
|
23
|
+
- Fixed the bug in `bin/dev` and `bin/dev-static` scripts by using `system` instead of `exec` and remove option to pass arguments [PR 1519](https://github.com/shakacode/react_on_rails/pull/1519) by [ahangarha](https://github.com/ahangarha).
|
|
24
|
+
|
|
20
25
|
### [13.3.1] - 2022-01-30
|
|
21
26
|
## Added
|
|
22
27
|
- Optimized `ReactOnRails::TestHelper`'s RSpec integration using `when_first_matching_example_defined`. [PR 1496](https://github.com/shakacode/react_on_rails/pull/1496) by [mcls](https://github.com/mcls).
|
|
@@ -1067,7 +1072,8 @@ Best done with Object destructing:
|
|
|
1067
1072
|
##### Fixed
|
|
1068
1073
|
- Fix several generator related issues.
|
|
1069
1074
|
|
|
1070
|
-
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.3.
|
|
1075
|
+
[Unreleased]: https://github.com/shakacode/react_on_rails/compare/13.3.2...master
|
|
1076
|
+
[13.3.2]: https://github.com/shakacode/react_on_rails/compare/13.3.1...13.3.2
|
|
1071
1077
|
[13.3.1]: https://github.com/shakacode/react_on_rails/compare/13.3.0...13.3.1
|
|
1072
1078
|
[13.3.0]: https://github.com/shakacode/react_on_rails/compare/13.2.0...13.3.0
|
|
1073
1079
|
[13.2.0]: https://github.com/shakacode/react_on_rails/compare/13.1.0...13.2.0
|
|
@@ -29,8 +29,8 @@ group :development, :test do
|
|
|
29
29
|
gem "pry-rails"
|
|
30
30
|
gem "pry-rescue"
|
|
31
31
|
gem "rubocop", "1.14.0", require: false
|
|
32
|
-
gem "rubocop-performance", require: false
|
|
33
|
-
gem "rubocop-rspec", require: false
|
|
32
|
+
gem "rubocop-performance", "1.16.0", require: false
|
|
33
|
+
gem "rubocop-rspec", "2.4.0", require: false
|
|
34
34
|
gem "scss_lint", require: false
|
|
35
35
|
gem "spring", "~> 4.0"
|
|
36
36
|
end
|
data/docs/guides/deployment.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
# Deployment
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Shakapacker puts the necessary precompile steps automatically in the rake precompile step.
|
|
4
|
+
|
|
5
|
+
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.
|
|
@@ -64,6 +64,7 @@ default: &default
|
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
the directory structure will look like this
|
|
67
|
+
|
|
67
68
|
```
|
|
68
69
|
app/javascript:
|
|
69
70
|
└── packs: # sets up webpack entries
|
|
@@ -100,15 +101,15 @@ Your layout would contain:
|
|
|
100
101
|
<%= stylesheet_pack_tag 'application' %>
|
|
101
102
|
```
|
|
102
103
|
|
|
103
|
-
|
|
104
104
|
Suppose, you want to use bundle splitting to minimize unnecessary javascript loaded on each page, you would put each of your components in the `packs` directory.
|
|
105
|
+
|
|
105
106
|
```
|
|
106
107
|
app/javascript:
|
|
107
|
-
└── packs:
|
|
108
|
-
│ └── FooComponentOne.jsx
|
|
109
|
-
│ └── BarComponentOne.jsx
|
|
110
|
-
│ └── BarComponentTwo.jsx
|
|
111
|
-
└── src:
|
|
108
|
+
└── packs: # sets up webpack entries
|
|
109
|
+
│ └── FooComponentOne.jsx # Internally uses ReactOnRails.register
|
|
110
|
+
│ └── BarComponentOne.jsx # Internally uses ReactOnRails.register
|
|
111
|
+
│ └── BarComponentTwo.jsx # Internally uses ReactOnRails.register
|
|
112
|
+
└── src: # any directory name is fine. Referenced files need to be under source_path
|
|
112
113
|
│ └── Foo
|
|
113
114
|
│ │ └── ...
|
|
114
115
|
│ └── Bar
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# How React on Rails Works (with
|
|
1
|
+
# How React on Rails Works (with Shakapcker)
|
|
2
2
|
|
|
3
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. [
|
|
5
|
+
Webpack is used to generate JavaScript and CSS "bundles" directly to your `/public` directory. [Shakapacker](https://github.com/shakacode/shakapacker) 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 `shakapacker` 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
|
|
|
@@ -14,7 +14,7 @@ Optionally, you can also initialize a Redux store with the view or controller he
|
|
|
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
|
-
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
|
|
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 performance 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
|
|
|
@@ -22,17 +22,17 @@ If you open the HTML source of any web page using React on Rails, you'll see the
|
|
|
22
22
|
|
|
23
23
|
1. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component. If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
|
|
24
24
|
1. A script tag containing the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads, using this data to build and initialize your React components.
|
|
25
|
-
1. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server
|
|
25
|
+
1. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server-side logs can be configured only to be sent to the server logs.
|
|
26
26
|
|
|
27
27
|
You can see all this on the source for [reactrails.com](https://www.reactrails.com/)
|
|
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. Alternatively, the `shakapacker` library also can ensure that your bundles are built.
|
|
32
32
|
|
|
33
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
|
-
On production deployments that use asset precompilation, such as Heroku deployments, `
|
|
35
|
+
On production deployments that use asset precompilation, such as Heroku deployments, `shakapacker`, by default, will automatically run webpack to build your JavaScript bundles, running the command `bin/webpacker` 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. Define `config.build_production_command` in your [config/initializers/react_on_rails.rb](https://www.shakacode.com/react-on-rails/docs/guides/configuration/)
|
|
@@ -7,6 +7,7 @@ However, sometimes we want to have layouts sufficiently different that we can't
|
|
|
7
7
|
Here's an example:
|
|
8
8
|
|
|
9
9
|
## config/initializers/react_on_rails.rb
|
|
10
|
+
|
|
10
11
|
```ruby
|
|
11
12
|
module RenderingExtension
|
|
12
13
|
# Return a Hash that contains custom values from the view context that will get passed to
|
|
@@ -34,6 +35,6 @@ ReactOnRails.configure do |config|
|
|
|
34
35
|
end
|
|
35
36
|
```
|
|
36
37
|
|
|
37
|
-
Note, full details of the React on Rails
|
|
38
|
+
Note, full details of the React on Rails configuration are [here in docs/basics/configuration.md](https://shakacode.com/react-on-rails/docs/guides/configuration/).
|
|
38
39
|
|
|
39
40
|
See the doc file [docs/basics/generator-functions-and-railscontext.md](https://shakacode.com/react-on-rails/docs/guides/generator-functions-and-railscontext/#rails-context) for how your client-side code uses the device information
|
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
1. Add the following to your Gemfile and `bundle install`. We recommend fixing the version of React on Rails, as you will need to keep the exact version in sync with the version in your `package.json` file.
|
|
8
8
|
|
|
9
9
|
```ruby
|
|
10
|
-
gem "react_on_rails", "13.1
|
|
11
|
-
gem "shakapacker", "6.5.
|
|
10
|
+
gem "react_on_rails", "13.3.1" # Use the latest and the exact version
|
|
11
|
+
gem "shakapacker", "6.5.5"
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
Or use `bundle add`:
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
bundle add react_on_rails --version=13.1
|
|
18
|
-
bundle add shakapacker --strict
|
|
17
|
+
bundle add react_on_rails --version=13.3.1 --strict
|
|
18
|
+
bundle add shakapacker --version=6.5.5 --strict
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
2. Run the following 2 commands to install Webpacker with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
|
|
21
|
+
2. Run the following 2 commands to install Shakapakcer (Webpacker) with React. Note, if you are using an older version of Rails than 5.1, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
24
|
rails webpacker:install
|
|
@@ -37,14 +37,16 @@
|
|
|
37
37
|
```bash
|
|
38
38
|
rails generate react_on_rails:install --help
|
|
39
39
|
```
|
|
40
|
-
5. Ensure that you have `overmind` or `foreman` installed
|
|
40
|
+
5. Ensure that you have `overmind` or `foreman` installed.
|
|
41
|
+
|
|
42
|
+
Note: `foreman` should be installed on the system not on your project. [Read more](https://github.com/ddollar/foreman/wiki/Don't-Bundle-Foreman)
|
|
41
43
|
|
|
42
44
|
6. Start your Rails server:
|
|
43
45
|
|
|
44
46
|
```bash
|
|
45
47
|
./bin/dev
|
|
46
48
|
```
|
|
47
|
-
Note: `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example this is already set.
|
|
49
|
+
Note: `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example, this is already set.
|
|
48
50
|
|
|
49
51
|
7. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world).
|
|
50
52
|
|
data/docs/guides/tutorial.md
CHANGED
|
@@ -12,7 +12,7 @@ After finishing this tutorial you will get an application that can do the follow
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
You can find here:
|
|
15
|
+
You can find it here:
|
|
16
16
|
* [Source code for this app in PR, using the --redux option](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/17) and [for Heroku](https://github.com/shakacode/react_on_rails-test-new-redux-generation/pull/18).
|
|
17
17
|
* [Live on Heroku](https://react-on-rails-redux-gen-8-0-0.herokuapp.com/)
|
|
18
18
|
|
|
@@ -21,42 +21,56 @@ By the time you read this, the latest may have changed. Be sure to check the ver
|
|
|
21
21
|
* https://rubygems.org/gems/react_on_rails
|
|
22
22
|
* https://www.npmjs.com/package/react-on-rails
|
|
23
23
|
|
|
24
|
+
# Table of Content:
|
|
25
|
+
- [Installation](#installation)
|
|
26
|
+
- [Setting up your environment](#setting-up-your-environment)
|
|
27
|
+
- [Create a new Ruby on Rails App](#create-a-new-ruby-on-rails-app)
|
|
28
|
+
- [Add the shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
|
|
29
|
+
- [Run the shakapacker (webpacker) generator](#run-the-shakapacker-webpacker-generator)
|
|
30
|
+
- [Run the React on Rails Generator](#run-the-react-on-rails-generator)
|
|
31
|
+
- [Setting up your environment variables](#setting-up-your-environment-variables)
|
|
32
|
+
- [Running the app](#running-the-app)
|
|
33
|
+
- [HMR vs. React Hot Reloading](#hmr-vs-react-hot-reloading)
|
|
34
|
+
- [Deploying to Heroku](#deploying-to-heroku)
|
|
35
|
+
- [Create Your Heroku App](#create-your-heroku-app)
|
|
36
|
+
- [Swap out sqlite for postgres](#swap-out-sqlite-for-postgres)
|
|
37
|
+
- [Other features](#other-features)
|
|
38
|
+
- [Turning on Server Rendering](#turning-on-server-rendering)
|
|
39
|
+
- [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
|
|
40
|
+
- [Using HMR with the shakapacker setup](#using-hmr-with-the-railswebpacker-setup)
|
|
41
|
+
- [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
|
|
42
|
+
- [RubyMine performance tip](#rubymine-performance-tip)
|
|
43
|
+
- [Conclusion](#conclusion)
|
|
44
|
+
# Installation
|
|
24
45
|
## Setting up your environment
|
|
25
46
|
|
|
26
|
-
Trying out **React on Rails** is super easy, so long as you have the basic prerequisites.
|
|
47
|
+
Trying out **React on Rails** is super easy, so long as you have the basic prerequisites.
|
|
27
48
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
nvm
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
brew install yarn # you can use other installer if desired, such as yvm
|
|
34
|
-
rvm install 2.7 # download and install latest stable Ruby (update to exact version)
|
|
35
|
-
rvm use 2.7 --default # use it and make it default
|
|
36
|
-
rvm list # check
|
|
37
|
-
|
|
38
|
-
gem install rails # download and install latest stable Rails
|
|
39
|
-
gem install foreman # download and install Foreman
|
|
40
|
-
```
|
|
49
|
+
- **Ruby:** We support all active Ruby versions but recommend using the latest stable Ruby version. Solutions like [rvm](https://rvm.io) or [rbenv](https://github.com/rbenv/rbenv) make it easy to have multiple Ruby versions on your machine.
|
|
50
|
+
- **Rails:** We support Rails 6 and later.
|
|
51
|
+
- **Nodejs:** We support all [active Node versions](https://github.com/nodejs/release#release-schedule) but recommend using the latest LTS release of Nodejs for the longest support. Older inactive node versions might still work but is not guaranteed. We also recommend using [nvm](https://github.com/nvm-sh/nvm/) to ease using different node versions in different projects.
|
|
52
|
+
- **yarn:** We use [yarn classic](https://classic.yarnpkg.com/) as our node package manager.
|
|
53
|
+
- You need to have either [Overmind](https://github.com/DarthSim/overmind) or [Foreman](https://rubygems.org/gems/foreman) as a process manager.
|
|
41
54
|
|
|
42
55
|
## Create a new Ruby on Rails App
|
|
43
|
-
Then we need to create a fresh Rails application as
|
|
56
|
+
Then we need to create a fresh Rails application as follows.
|
|
44
57
|
|
|
45
|
-
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).
|
|
58
|
+
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).
|
|
46
59
|
|
|
47
60
|
```bash
|
|
48
61
|
# For Rails 6.x
|
|
49
62
|
rails new test-react-on-rails --skip-javascript
|
|
50
63
|
|
|
51
64
|
# For Rails 7.x
|
|
52
|
-
rails new test-react-on-rails --skip-
|
|
65
|
+
rails new test-react-on-rails --skip-javascript
|
|
53
66
|
|
|
54
67
|
cd test-react-on-rails
|
|
55
68
|
```
|
|
69
|
+
Note: You can use `--database=postgresql` option to use Postgresql for the database.
|
|
56
70
|
|
|
57
71
|
## Add the shakapacker and react_on_rails gems
|
|
58
72
|
We recommend using the latest version of these gems. Otherwise, specify the
|
|
59
|
-
exact versions of both the gem and npm
|
|
73
|
+
exact versions of both the gem and npm packages. In other words, don't use
|
|
60
74
|
the `^` or `~` in the version specifications.
|
|
61
75
|
|
|
62
76
|
```bash
|
|
@@ -79,7 +93,7 @@ Commit all the changes so far to avoid getting errors in the next step.
|
|
|
79
93
|
git commit -am "Initial commit"
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
Alternatively you can use `--ignore-warnings` in the next step.
|
|
96
|
+
Alternatively, you can use `--ignore-warnings` in the next step.
|
|
83
97
|
|
|
84
98
|
## Run the React on Rails Generator
|
|
85
99
|
|
|
@@ -110,16 +124,10 @@ Then run the server with one of the following options:
|
|
|
110
124
|
|
|
111
125
|
## Running the app
|
|
112
126
|
|
|
113
|
-
### For HMR:
|
|
114
|
-
|
|
115
127
|
```bash
|
|
116
|
-
./bin/dev
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
### Without HMR, statically creating the bundles
|
|
120
|
-
|
|
121
|
-
```bash
|
|
122
|
-
./bin/dev-static
|
|
128
|
+
./bin/dev # For HMR
|
|
129
|
+
# or
|
|
130
|
+
./bin/dev-static # Without HMR, statically creating the bundles
|
|
123
131
|
```
|
|
124
132
|
|
|
125
133
|
Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
|
|
@@ -128,41 +136,52 @@ Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and
|
|
|
128
136
|
|
|
129
137
|
First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
|
|
130
138
|
|
|
131
|
-
The basic setup will have HMR working with the default
|
|
139
|
+
The basic setup will have HMR working with the default Shakapacker setup. The basic
|
|
132
140
|
[HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
|
|
133
141
|
React setup, will cause a full page refresh each time you save a file.
|
|
134
142
|
|
|
135
|
-
|
|
143
|
+
# Deploying to Heroku
|
|
136
144
|
|
|
137
|
-
|
|
138
|
-
*Assuming you can
|
|
145
|
+
## Create Your Heroku App
|
|
146
|
+
*Assuming you can log in to heroku.com and have logged into your shell for Heroku.*
|
|
139
147
|
|
|
140
148
|
1. Visit [https://dashboard.heroku.com/new](https://dashboard.heroku.com/new) and create an app, say named `my-name-react-on-rails`:
|
|
141
149
|
|
|
142
150
|
|
|
143
151
|
|
|
144
|
-
Run this command that looks like this from your new
|
|
152
|
+
Run this command that looks like this from your new Heroku app
|
|
145
153
|
|
|
146
|
-
|
|
154
|
+
```bash
|
|
155
|
+
heroku git:remote -a my-name-react-on-rails
|
|
156
|
+
```
|
|
147
157
|
|
|
148
158
|
Set heroku to use multiple buildpacks:
|
|
149
159
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
160
|
+
```bash
|
|
161
|
+
heroku buildpacks:set heroku/ruby
|
|
162
|
+
heroku buildpacks:add --index 1 heroku/nodejs
|
|
163
|
+
```
|
|
153
164
|
|
|
154
|
-
|
|
165
|
+
## Swap out sqlite for postgres:
|
|
166
|
+
Heroku requires your app to use Postgresql. If you have not setup your app
|
|
167
|
+
with Postgresql, you need to change your app settings to use this database.
|
|
155
168
|
|
|
156
|
-
Run
|
|
169
|
+
Run the following command (in Rails 6+):
|
|
157
170
|
|
|
171
|
+
```bash
|
|
172
|
+
rails db:system:change --to=postgresql
|
|
158
173
|
```
|
|
174
|
+
|
|
175
|
+
If for any reason you want to do this process manually, run these two commands:
|
|
176
|
+
|
|
177
|
+
```bash
|
|
159
178
|
bundle remove sqlite3
|
|
160
179
|
bundle add pg
|
|
161
180
|
```
|
|
162
181
|
|
|
163
182
|
|
|
164
183
|
|
|
165
|
-
|
|
184
|
+
Now replace your `database.yml` file with this (assuming your app name is "ror").
|
|
166
185
|
|
|
167
186
|
```yml
|
|
168
187
|
default: &default
|
|
@@ -189,14 +208,14 @@ production:
|
|
|
189
208
|
|
|
190
209
|
Then you need to setup postgres so you can run locally:
|
|
191
210
|
|
|
192
|
-
```
|
|
211
|
+
```bash
|
|
193
212
|
rake db:setup
|
|
194
213
|
rake db:migrate
|
|
195
214
|
```
|
|
196
215
|
|
|
197
216
|
|
|
198
217
|
|
|
199
|
-
|
|
218
|
+
Optionally you can add this line to your `routes.rb`. That way, your root page will go to the Hello World page for React On Rails.
|
|
200
219
|
|
|
201
220
|
```ruby
|
|
202
221
|
root "hello_world#index"
|
|
@@ -206,9 +225,8 @@ root "hello_world#index"
|
|
|
206
225
|
|
|
207
226
|
Next, configure your app for Puma, per the [instructions on Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server).
|
|
208
227
|
|
|
209
|
-
Create
|
|
228
|
+
Create `./Procfile` with the following content. This is what Heroku uses to start your app.
|
|
210
229
|
|
|
211
|
-
`Procfile`
|
|
212
230
|
```
|
|
213
231
|
web: bundle exec puma -C config/puma.rb
|
|
214
232
|
```
|
|
@@ -238,14 +256,14 @@ Next, update your `package.json` to specify the version of yarn and node. Add th
|
|
|
238
256
|
|
|
239
257
|
```json
|
|
240
258
|
"engines": {
|
|
241
|
-
"node": "
|
|
259
|
+
"node": "16.19.0",
|
|
242
260
|
"yarn": "1.22.4"
|
|
243
261
|
},
|
|
244
262
|
```
|
|
245
263
|
|
|
246
|
-
Then after all changes are done don't forget to commit them with git and finally you can push your app to Heroku!
|
|
264
|
+
Then after all changes are done don't forget to commit them with git and finally, you can push your app to Heroku!
|
|
247
265
|
|
|
248
|
-
```
|
|
266
|
+
```bash
|
|
249
267
|
git add -A
|
|
250
268
|
git commit -m "Changes for Heroku"
|
|
251
269
|
git push heroku master
|
|
@@ -253,14 +271,13 @@ git push heroku master
|
|
|
253
271
|
|
|
254
272
|
Then run:
|
|
255
273
|
|
|
256
|
-
```
|
|
274
|
+
```bash
|
|
257
275
|
heroku open
|
|
258
276
|
```
|
|
259
277
|
|
|
260
278
|
and you will see your live app and you can share this URL with your friends. Congrats!
|
|
261
279
|
|
|
262
|
-
|
|
263
|
-
|
|
280
|
+
# Other features
|
|
264
281
|
## Turning on Server Rendering
|
|
265
282
|
|
|
266
283
|
You can turn on server rendering by simply changing the `prerender` option to `true`:
|
|
@@ -279,14 +296,6 @@ If you want to test this out with HMR, then you also need to add this line to yo
|
|
|
279
296
|
More likely, you will create a different build file for server rendering. However, if you want to
|
|
280
297
|
use the same file from the webpack-dev-server, you'll need to add that line.
|
|
281
298
|
|
|
282
|
-
Then push to Heroku:
|
|
283
|
-
|
|
284
|
-
```
|
|
285
|
-
git add -A
|
|
286
|
-
git commit -m "Enable server rendering"
|
|
287
|
-
git push heroku master
|
|
288
|
-
```
|
|
289
|
-
|
|
290
299
|
When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
|
|
291
300
|
|
|
292
301
|
```html
|
|
@@ -311,34 +320,34 @@ ShakaCode recommends that you use `/client` for your client side app. This way a
|
|
|
311
320
|
|
|
312
321
|
1. Move the directory:
|
|
313
322
|
|
|
314
|
-
```
|
|
323
|
+
```bash
|
|
315
324
|
mv app/javascript client
|
|
316
325
|
```
|
|
317
326
|
|
|
318
327
|
2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
|
|
319
328
|
|
|
320
329
|
```yml
|
|
321
|
-
|
|
330
|
+
source_path: client
|
|
322
331
|
```
|
|
323
332
|
|
|
324
|
-
## Using HMR with the
|
|
333
|
+
## Using HMR with the shakapacker setup
|
|
325
334
|
|
|
326
|
-
Start the app using `foreman start -f Procfile.dev`.
|
|
335
|
+
Start the app using `overmind start -f Procfile.dev` or `foreman start -f Procfile.dev`.
|
|
327
336
|
|
|
328
|
-
When you change a JSX file
|
|
337
|
+
When you change and save a JSX file, the browser will automatically refresh!
|
|
329
338
|
|
|
330
339
|
So you get some basics from HMR with no code changes. If you want to go further, take a look at these links:
|
|
331
340
|
|
|
332
|
-
* https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md
|
|
333
|
-
* https://webpack.js.org/configuration/dev-server/
|
|
334
|
-
* https://webpack.js.org/concepts/hot-module-replacement/
|
|
341
|
+
* [webpack-dev-server](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack-dev-server.md)
|
|
342
|
+
* [DevServer](https://webpack.js.org/configuration/dev-server/)
|
|
343
|
+
* [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/)
|
|
335
344
|
|
|
336
|
-
React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by
|
|
345
|
+
React on Rails will automatically handle disabling server rendering if there is only one bundle file created by the Webpack development server by `shakapcker`.
|
|
337
346
|
|
|
338
347
|
|
|
339
|
-
|
|
348
|
+
## Custom IP & PORT setup (Cloud9 example)
|
|
340
349
|
|
|
341
|
-
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`.
|
|
350
|
+
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`.
|
|
342
351
|
|
|
343
352
|
``` Procfile.dev
|
|
344
353
|
web: rails s -p 8080 -b 0.0.0.0
|
|
@@ -346,7 +355,7 @@ web: rails s -p 8080 -b 0.0.0.0
|
|
|
346
355
|
|
|
347
356
|
Then visit https://your-shared-addr.c9users.io:8080/hello_world
|
|
348
357
|
|
|
349
|
-
## RubyMine
|
|
358
|
+
## RubyMine performance tip
|
|
350
359
|
|
|
351
360
|
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.
|
|
352
361
|
|
|
@@ -356,7 +365,7 @@ It's super important to exclude certain directories from RubyMine or else it wil
|
|
|
356
365
|
|
|
357
366
|
|
|
358
367
|
|
|
359
|
-
|
|
368
|
+
# Conclusion
|
|
360
369
|
|
|
361
370
|
* Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/docs/)
|
|
362
371
|
|
|
@@ -150,7 +150,7 @@ module ReactOnRails
|
|
|
150
150
|
|
|
151
151
|
or
|
|
152
152
|
|
|
153
|
-
./bin/dev # Running with statically created bundles, without HMR
|
|
153
|
+
./bin/dev-static # Running with statically created bundles, without HMR
|
|
154
154
|
|
|
155
155
|
- To server render, change this line app/views/hello_world/index.html.erb to
|
|
156
156
|
`prerender: true` to see server rendering (right click on page and select "view source").
|
|
@@ -8,10 +8,7 @@ rescue Errno::ENOENT
|
|
|
8
8
|
end
|
|
9
9
|
|
|
10
10
|
def run(process)
|
|
11
|
-
|
|
12
|
-
args.shift
|
|
13
|
-
puts "Using #{process}"
|
|
14
|
-
exec "#{process} start -f Procfile.dev", args.join(" ")
|
|
11
|
+
system "#{process} start -f Procfile.dev"
|
|
15
12
|
rescue Errno::ENOENT
|
|
16
13
|
warn <<~MSG
|
|
17
14
|
ERROR:
|
|
@@ -8,10 +8,7 @@ rescue Errno::ENOENT
|
|
|
8
8
|
end
|
|
9
9
|
|
|
10
10
|
def run(process)
|
|
11
|
-
|
|
12
|
-
args.shift
|
|
13
|
-
puts "Using #{process}"
|
|
14
|
-
exec "#{process} start -f Procfile.dev-static", args.join(" ")
|
|
11
|
+
system "#{process} start -f Procfile.dev-static"
|
|
15
12
|
rescue Errno::ENOENT
|
|
16
13
|
warn <<~MSG
|
|
17
14
|
ERROR:
|
|
@@ -79,6 +79,15 @@ module ReactOnRails
|
|
|
79
79
|
|
|
80
80
|
def add_bin_scripts
|
|
81
81
|
directory "#{__dir__}/bin", "bin"
|
|
82
|
+
|
|
83
|
+
# Make these and only these files executable
|
|
84
|
+
files_to_copy = []
|
|
85
|
+
Dir.chdir("#{__dir__}/bin") do
|
|
86
|
+
files_to_copy.concat(Dir.glob("*"))
|
|
87
|
+
end
|
|
88
|
+
files_to_become_excutable = files_to_copy.map { |filename| "bin/#{filename}" }
|
|
89
|
+
|
|
90
|
+
File.chmod(0o755, *files_to_become_excutable)
|
|
82
91
|
end
|
|
83
92
|
end
|
|
84
93
|
end
|
|
@@ -313,10 +313,6 @@ module ReactOnRails
|
|
|
313
313
|
@rails_context.merge(serverSide: server_side)
|
|
314
314
|
end
|
|
315
315
|
|
|
316
|
-
# rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
|
|
317
|
-
|
|
318
|
-
private
|
|
319
|
-
|
|
320
316
|
def load_pack_for_component(component_name)
|
|
321
317
|
is_component_pack_present = File.exist?(generated_components_pack_path(component_name))
|
|
322
318
|
is_development = ENV["RAILS_ENV"] == "development"
|
|
@@ -328,10 +324,14 @@ module ReactOnRails
|
|
|
328
324
|
|
|
329
325
|
ReactOnRails::WebpackerUtils.raise_nested_entries_disabled unless ReactOnRails::WebpackerUtils.nested_entries?
|
|
330
326
|
|
|
331
|
-
append_javascript_pack_tag
|
|
332
|
-
append_stylesheet_pack_tag
|
|
327
|
+
ApplicationController.helpers.append_javascript_pack_tag("generated/#{component_name}")
|
|
328
|
+
ApplicationController.helpers.append_stylesheet_pack_tag("generated/#{component_name}")
|
|
333
329
|
end
|
|
334
330
|
|
|
331
|
+
# rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
|
|
332
|
+
|
|
333
|
+
private
|
|
334
|
+
|
|
335
335
|
def generated_components_pack_path(component_name)
|
|
336
336
|
"#{ReactOnRails::WebpackerUtils.webpacker_source_entry_path}/generated/#{component_name}.js"
|
|
337
337
|
end
|
data/package.json
CHANGED
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: 13.3.
|
|
4
|
+
version: 13.3.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: 2023-
|
|
11
|
+
date: 2023-02-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: addressable
|