Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 134 additions & 29 deletions react_on_rails_pro/CHANGELOG.md

Large diffs are not rendered by default.

59 changes: 37 additions & 22 deletions react_on_rails_pro/docs/installation.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Installation

Since the repository is private, you will get a **GitHub Personal Access Token** and an account that can access the packages. Substitute that value in the commands below. If you dont' have this, ask [justin@shakacode.com](mailto:justin@shakacode.com) to give you one.

Check the [CHANGELOG](https://github.com/shakacode/react_on_rails_pro/blob/master/CHANGELOG.md) to see what version you want.
Expand All @@ -8,13 +9,16 @@ Check the [CHANGELOG](https://github.com/shakacode/react_on_rails_pro/blob/maste
For the below docs, find the desired `<version>` in the CHANGELOG. Note, for pre-release versions, gems have all periods, and node packages uses a dash, like gem `3.0.0.rc.0` and node package `3.0.0-rc.0`.

# Ruby

## Gem Installation

1. Ensure your **Rails** app is using the **react_on_rails** gem, version greater than 11.0.7.
1. Add the `react_on_rails_pro` gem to your **Gemfile**. Substitute the appropriate version number.
1. Add the `react_on_rails_pro` gem to your **Gemfile**. Substitute the appropriate version number.

## Gemfile Change

Replace the following in the snippet for the Gemfile

1. `<account>` for the api key
2. `<api-key>`
3. `<version>` desired
Expand All @@ -33,6 +37,7 @@ source "https://rubygems.pkg.github.com/shakacode-tools" do
gem "react_on_rails_pro", "<version>"
end
```

Or use the `gem install` command:

```bash
Expand All @@ -46,30 +51,35 @@ bundle config set rubygems.pkg.github.com <username>:<token>
```

## Using a branch in your Gemfile

Note, you should probably use an ENV value for the token so that you don't check this into your source code.
```ruby
gem "react_on_rails_pro", version: "<version>", git: "https://[your-github-token]:x-oauth-basic@github.com/shakacode/react_on_rails_pro.git", tag: "<version>"
```

```ruby
gem "react_on_rails_pro", version: "<version>", git: "https://[your-github-token]:x-oauth-basic@github.com/shakacode/react_on_rails_pro.git", tag: "<version>"
```

## Rails Configuration
You don't need to create an initializer if you are satisfied with the default as described in

You don't need to create an initializer if you are satisfied with the default as described in
[Configuration](./configuration.md)

# Node Package

Note, you only need to install the Node Package if you are using the standalone node renderer, `NodeRenderer`.

## Installation

1. Create a subdirectory of your rails project for the Node renderer. Let's use `react-on-rails-pro`.

2. Create a file `react-on-rails-pro/.npmrc` with the following

```
always-auth=true
//npm.pkg.github.com/:_authToken=<token>
@shakacode-tools:registry=https://npm.pkg.github.com
```

3. Create a `react-on-rails-pro/package.json`

```json
{
"private": true,
Expand All @@ -86,20 +96,18 @@ always-auth=true

If you really want to use yarn, see [Yarn can't find private Github npm registry](https://stackoverflow.com/questions/58316109/yarn-cant-find-private-github-npm-registry)

5. You can start the renderer with either the executable `node-renderer` or, preferably, with
5. You can start the renderer with either the executable `node-renderer` or, preferably, with
a startup JS file, say called `react-on-rails-pro/react-on-rails-pro-node-renderer.js` with
these contents. _Note the use of the namespaced **`@shakacode-tools/react-on-rails-pro-node-renderer`** for the package.
these contents. \_Note the use of the namespaced **`@shakacode-tools/react-on-rails-pro-node-renderer`** for the package.

```js
const path = require('path')
const {
reactOnRailsProNodeRenderer,
} = require('@shakacode-tools/react-on-rails-pro-node-renderer')
const path = require('path');
const { reactOnRailsProNodeRenderer } = require('@shakacode-tools/react-on-rails-pro-node-renderer');

const env = process.env
const env = process.env;

const config = {
bundlePath: path.resolve(__dirname, '../.node-renderer-bundles'),
serverBundleCachePath: path.resolve(__dirname, '../.node-renderer-bundles'),

// Listen at RENDERER_PORT env value or default port 3800
logLevel: env.RENDERER_LOG_LEVEL || 'debug', // show all logs
Expand Down Expand Up @@ -132,21 +140,22 @@ const config = {
// Also, you can set he parameter gracefulWorkerRestartTimeout to force the worker to restart
// If it's the time for the worker to restart, the worker waits until it serves all active requests before restarting
// If a worker stuck because of a memory leakage or an infinite loop, you can set a timeout that master waits for it before killing the worker
}
};

// Renderer detects a total number of CPUs on virtual hostings like Heroku
// or CircleCI instead of CPUs number allocated for current container. This
// results in spawning many workers while only 1-2 of them really needed.
if (env.CI) {
config.workersCount = 2
config.workersCount = 2;
}

reactOnRailsProNodeRenderer(config)
reactOnRailsProNodeRenderer(config);
```

## Instructions for using a branch

Install the node-renderer executable, possibly globally. Substitute the branch name or tag for `master`

```
yarn global add https://<your-github-token>:x-oauth-basic@github.com/shakacode/react_on_rails_pro.git\#master
```
Expand All @@ -159,28 +168,34 @@ Login into npm

```bash
npm install @shakacode-tools/react-on-rails-pro-node-renderer@<version>
```
```

or edit package.json directly

```json
"@shakacode-tools/react-on-rails-pro-node-renderer": "<version>"
```
```

### Configuration

See [NodeRenderer JavaScript Configuration](./node-renderer/js-configuration.md).

#### Webpack Configuration

Set your server bundle webpack configuration to use a target of `node` per the [Webpack docs](https://webpack.js.org/concepts/targets/#usage).

## Authentication when using Github packages

[Auth for the npm package](https://docs.github.com/en/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#authenticating-to-github-packages)

Create a new ~/.npmrc file if one doesn't exist.

```
//npm.pkg.github.com/:_authToken=TOKEN
```
```

To configure bundler if you don't want the token in your Gemfile:

```
bundle config https://rubygems.pkg.github.com/OWNER USERNAME:TOKEN
```
```
45 changes: 26 additions & 19 deletions react_on_rails_pro/docs/node-renderer/basics.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,34 @@
# Requirements
* You must use React on Rails v11.0.7 or higher.

- You must use React on Rails v11.0.7 or higher.

# Install the Gem and the Node Module

See [Installation](../installation.md).

# Setup Node Renderer Server

**node-renderer** is a standalone Node application to serve React SSR requests from a **Rails** client. You don't need any **Ruby** code to setup and launch it. You can configure with the command line or with a launch file.

## Simple Command Line for node-renderer

1. ENV values for the default config are (See [JS Configuration](./js-configuration.md) for more details):
* `RENDERER_PORT`
* `RENDERER_LOG_LEVEL`
* `RENDERER_BUNDLE_PATH`
* `RENDERER_WORKERS_COUNT`
* `RENDERER_PASSWORD`
* `RENDERER_ALL_WORKERS_RESTART_INTERVAL`
* `RENDERER_DELAY_BETWEEN_INDIVIDUAL_WORKER_RESTARTS`
* `RENDERER_SUPPORT_MODULES`
- `RENDERER_PORT`
- `RENDERER_LOG_LEVEL`
- `RENDERER_BUNDLE_PATH`
- `RENDERER_WORKERS_COUNT`
- `RENDERER_PASSWORD`
- `RENDERER_ALL_WORKERS_RESTART_INTERVAL`
- `RENDERER_DELAY_BETWEEN_INDIVIDUAL_WORKER_RESTARTS`
- `RENDERER_SUPPORT_MODULES`
2. Configure ENV values and run the command. Note, you can set port with args `-p <PORT>`. For example, assuming node-renderer is in your path:
```
RENDERER_BUNDLE_PATH=/app/.node-renderer-bundles node-renderer
```
3. You can use a command line argument of `-p SOME_PORT` to override any ENV value for the PORT.

## JavaScript Configuration File

For the most control over the setup, create a JavaScript file to start the NodeRenderer.

1. Create some project directory, let's say `renderer-app`:
Expand All @@ -38,48 +42,51 @@ For the most control over the setup, create a JavaScript file to start the NodeR
yarn init
yarn add https://[your-github-token]:x-oauth-basic@github.com/shakacode/react_on_rails_pro.git\#master
```
4. Configure a JavaScript file that will launch the rendering server per the docs in [Node Renderer JavaScript Configuration](./js-configuration.md). For example, create a file `node-renderer.js`. Here is a simple example that uses all the defaults except for bundlePath:
4. Configure a JavaScript file that will launch the rendering server per the docs in [Node Renderer JavaScript Configuration](./js-configuration.md). For example, create a file `node-renderer.js`. Here is a simple example that uses all the defaults except for serverBundleCachePath:

```javascript
import path from 'path';
import reactOnRailsProNodeRenderer from '@shakacode-tools/react-on-rails-pro-node-renderer';

const config = {
bundlePath: path.resolve(__dirname, '../.node-renderer-bundles'),
serverBundleCachePath: path.resolve(__dirname, '../.node-renderer-bundles'),
};

reactOnRailsProNodeRenderer(config);
```

5. Now you can launch your renderer server with `node node-renderer.js`. You will probably add a script to your `package.json`.
6. You can use a command line argument of `-p SOME_PORT` to override any configured or ENV value for the port.

# Setup Rails Application

Create `config/initializers/react_on_rails_pro.rb` and configure the **renderer server**. See configuration values in [Configuration](../configuration.md). Pay attention to:

1. Set `config.server_renderer = "NodeRenderer"`
2. Leave the default of `config.prerender_caching = true` and ensure your Rails cache is properly configured to handle the additional cache load.
3. Configure values beginning with `renderer_`
4. Use ENV values for values like `renderer_url` so that your deployed server is properly configured. If the ENV value is unset, the default for the renderer_url is `localhost:3800`.
5. Here's a tiny example using mostly defaults:

```ruby
ReactOnRailsPro.configure do |config|
config.server_renderer = "NodeRenderer"
# when this ENV value is not defined, the local server at localhost:3800 is used
config.renderer_url = ENV["REACT_RENDERER_URL"]

# when this ENV value is not defined, the local server at localhost:3800 is used
config.renderer_url = ENV["REACT_RENDERER_URL"]
end
```

## Troublshooting

* See [JS Memory Leaks](../js-memory-leaks.md).
- See [JS Memory Leaks](../js-memory-leaks.md).

## Upgrading

The NodeRenderer has a protocol version on both the Rails and Node sides. If the Rails server sends a protocol version that does not match the Node side, an error is returned. Ideally, you want to keep both the Rails and Node sides at the same version.

## References

* [Installation](../installation.md).
* [Rails Options for node-renderer](../configuration.md)
* [JS Options for node-renderer](./js-configuration.md)
- [Installation](../installation.md).
- [Rails Options for node-renderer](../configuration.md)
- [JS Options for node-renderer](./js-configuration.md)
Loading
Loading