render-man

A middle man, also a module and an application, wants to render your SPA on the server.

1. As a module

1.1. Install

npm install render-man

1.2. Usage

Create a .js file (such as server.js) with the following basic content:

// server.js

const {parseEnv} = require('dotenv-packed')
const RenderServerManager = require('render-man')

parseEnv()

RenderServerManager.start()

... then run it:

node server.js

Note: As default, Google Chrome is required to run. Please install it first.

1.3. Configuration

Create an .env file along with application script (server.js) and make some configurations on it.

See 3. Configuration for environment variables that can be set.

2. As an application

2.1. The Google Chrome

Install Google Chrome.

2.2. The Application

Here are things to guide you to install on Ubuntu.

2.2.1. Make the application run

• Clone and prepare the application:

# Clone the application to /var/www/render-man
cd /var/www
git clone https://github.com/linhntaim/render-man.git render-man

# Go install modules and create a folder for logging
cd render-man
npm install
mkdir logs

• Copy and edit the environment variables files (.env). (See 3. Configuration for more detail about what you should modify any value)

cp .env.example .env
vi .env

• Install the supervisor and use it to handle the application's running.

# Install supervisor
npm update && apt install supervisor -y

# Create a configuration to run the application with supervisor
cat > /etc/supervisor/conf.d/render-man.conf
[program:render-man]
process_name=%(program_name)s_%(process_num)02d
directory=/var/www/render-man
command=npm start
autostart=true
autorestart=true
numprocs=1
environment=NODE_ENV=production
stderr_logfile=/var/www/render-man/logs/err.log
stdout_logfile=/var/www/render-man/logs/out.log
^Z

# Update the configuration so supervisor can recognize it
supervisorctl reread
supervisorctl update

# Start the application
supervisorctl start render-man:*

• Now, the application is running. If troubles happen, try those commands:

# Restart the application
supervisorctl restart render-man:*

# Or if you want to stop first,
supervisorctl stop render-man:*
# ... then make some changes ...
# ... And finally, start it again.
supervisorctl start render-man:*

• Do not forget to check the log files at where you have configured in supervisor.

/var/www/render-man/logs/err.log
/var/www/render-man/logs/out.log

2.2.2. Use NGINX as a proxy server to the application:

• Firstly, make a NGINX configuration file such as render-man.conf (in folder etc/nginx):

index index.html;

location / {
    try_files $uri @renderman;
}

location @renderman {
    set $renderman 0;
    if ($http_user_agent ~* "googlebot|bingbot|bingpreview|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
        set $renderman 1;
    }
    if ($args ~ "_escaped_fragment_") {
        set $renderman 1;
    }
    if ($http_user_agent ~ "Prerender") {
        set $renderman 0;
    }
    if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
        set $renderman 0;
    }

    if ($renderman = 1) {
        set $port 3000; # Port to run the application, set in .env file
        set $renderman "localhost:${port}";
        rewrite .* /$scheme://$host$request_uri? break;
        proxy_pass http://$renderman;
    }
    if ($renderman = 0) {
        rewrite .* /index.html?$query_string break;
    }
}

• Secondly, just include the configuration in some domain's settings:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name render-man.com www.render-man.com;

    include ssl.conf;

    root /var/www/render-man;

    include render-man.conf; # Render-Man configuration
}

• Visit your site to check if the application works (remember to append the url by ?_render_man_=1):

https://render-man.com?_render_man_=1

3. Configuration

You can make some configuration via .env file.

View .env.example file for example.

• PORT

  • Port for the application to run
  • Default: 3000.

• LOG_REQUESTS

  • See logRequests.
  • Default: false.

• PAGE_DONE_CHECK_INTERVAL

  • See pageDoneCheckInterval.
  • Default: 1000.

• PAGE_LOAD_TIMEOUT

  • See pageLoadTimeout.
  • Default: 20000.

• WAIT_AFTER_LAST_REQUEST

  • See waitAfterLastRequest.
  • Default: 500.

• FOLLOW_REDIRECTS

  • See followredirects.
  • Default: false.

• CHROME_LOCATION

  • See chromeLocation.
  • Default: <empty>.

• CHROME_FLAGS

  • Run Google Chrome with some options.
  • Each option should be wrapped by double quotes (") and separated by the comma (,). All should lie inside brackets ([...]).
    • Example: CHROME_FLAGS=["--no-sandbox","--headless"]
  • If there are no options, please leave it as blank inside brackets.
    • Example: CHROME_FLAGS=[].
  • Default: ["--no-sandbox","--headless","--disable-gpu"].

• USE_PLUGINS

  • Plugins can be used:
    • basicAuth
      • See basicAuth.
      • Extra environment variables can be added in .env files: BASIC_AUTH_USERNAME, BASIC_AUTH_PASSWORD.
    • removeScriptTags
      • See removeScriptTags.
    • blockedResources
    • httpHeaders
      • See httpHeaders.
    • whitelist
      • See whitelist.
    • blacklist
      • See blacklist.
    • in-memory-cache
      • See in-memory-cache.
  • Each plugin should be wrapped by double quotes (") and separated by the comma (,). All should lie inside brackets ([...]).
    • Example: USE_PLUGINS=["removeScriptTags","blockedResources,"httpHeaders"]
  • If there are no plugins, please leave it as blank inside brackets.
    • Example: USE_PLUGINS=[].
  • Default: [].