Node React Render Docs

Requirements

• You must React on Rails v11.0.7 or higher.

Install the Gem and the Node Module

See Installation.

Setup Node VM Renderer Server

Node.js server for react-on-rails-vm-renderer is a standalone application to serve requests from 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 vm-renderer

1. ENV values for the default config are (See VM Renderer JavaScript Configuration 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
2. Configure ENV values and run the command. Note, you can set port with args -p <PORT>. For example, assuming vm-renderer is in your path:

   RENDERER_BUNDLE_PATH=/tmp/bundle-path vm-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 VmRenderer.

1. Create some project directory, let's say renderer-app:

   mkdir renderer-app
   cd renderer-app

2. Make sure you have Node.js version 8 or higher and Yarn installed.

3. Init node application and yarn add to install react-on-rails-pro-vm-renderer package.

   yarn init
   yarn add https://[your-github-token]:[email protected]/shakacode/react_on_rails_pro.git\#master

4. Configure a JavaScript file that will launch the rendering server per the docs in VM Renderer JavaScript Configuration. For example, create a file vm-renderer.js. Here is a simple example that uses all the defaults except for bundlePath:

   import path from 'path';
   import reactOnRailsProVmRenderer from 'react-on-rails-pro-vm-renderer';
   
   const config = {
     bundlePath: path.resolve(__dirname, '../tmp/bundles'),
   };
   
   reactOnRailsProVmRenderer(config);

5. Now you can launch your renderer server with node vm-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 docs/configuration.md. Pay attention to:

1. Set config.server_renderer = "VmRenderer"
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:

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

Heroku

Deploy Node renderer to Heroku

1. Create your Heroku app with Node.js buildpack, say renderer-test.herokuapp.com.
2. In your JS configuration file or
   1. If setting the port, ensure the port uses process.env.PORT so it will use port number provided by Heroku environment. The default is to use the env value RENDERER_PORT if available. (TODO: Need to check on this)
   2. Set password in your configuration to something like process.env.RENDERER_PASSWORD and configure the corresponding ENV variable on your Heroku dyno so the config/initializers/react_on_rails_pro.rb uses this value.
3. Run deployment process (usually by pushing changes to Git repo associated with created Heroku app).
4. Once deployment process is finished, the renderer should start listening to something like renderer-test.herokuapp.com host.

Deploy react_on_rails application to Heroku

1. Create your Heroku app for react_on_rails.
2. Configure your app to communicate with renderer app you've created above. Put the following to your initializers/react_on_rails_pro (assuming you have SSL certificate uploaded to your renderer Heroku app or you use Heroku wildcard certificate under *.herokuapp.com) and configure corresponding ENV variable for the render_url and/or password on your Heroku dyno.
3. Run deployment process (usually by pushing changes to Git repo associated with created Heroku app).
4. Once deployment process is finished, all rendering requests form your react_on_rails app should be served by <your-heroku-app>.herokuapp.com app via HTTPS.

Upgrading

The VmRenderer 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.
• Rails Configuration
• VM Renderer JavaScript Configuration