How to setup Multi Site using vHost for Sitecore Headless SSR Proxy ?

This document details steps to setup Sitecore Multi Site in headless JSS environment.

I assume you are already familiar with Sitecore SSR Proxy and tried out how it works for single site. If not try to use the below link.

https://jss.sitecore.com/docs/techniques/ssr/headless-mode-ssr

The article focus on how to setup Headless SSR Proxy & vhost npm module.

Why using vhost ?

If you want to handle website traffic based on the hostname, vhost is best npm package to consider.

https://levelup.gitconnected.com/nodejs-virtual-domains-with-vhost-ce2d039db040

Step 1

Download the Sitecore headless ssr proxy code from git hub.

https://github.com/Sitecore/jss/tree/master/samples/node-headless-ssr-proxy

Step 2

Copy the config.js to as many sites you want (so that you can have site specific customization)

https://github.com/Sitecore/jss/blob/master/samples/node-headless-ssr-proxy/config.js

• Copy the config.js to site1_config.js
• Copy the config.js to site2_config.js
• Copy the config.js to site3_config.js

Step 3

Modify the index.js and include (***)the following.

• Include vhost
• Add Multi Site Configuration → Site Host names.
• Create and map Site Specific configuration (from Step 2)
• Map site specific host name with site configuration using vhost
• Comment the scProxy code.

const express = require('express');
const compression = require('compression');
const scProxy = require('@sitecore-jss/sitecore-jss-proxy').default;
const cacheMiddleware = require('./cacheMiddleware');
// const config = require('./config');   // --> *** you can create site specific configuration.
const myhost = require( 'vhost' );
const express = require('express');
const compression = require('compression');
const scProxy = require('@sitecore-jss/sitecore-jss-proxy').default;
const cacheMiddleware = require('./cacheMiddleware');
// *** Multi Site Configuration.
const sites = {
    MyApp: {
        MySite1: {
            hostName: 'https://site1.samplejsssite.com/'
        },
  MySite2: {
            hostName: 'https://site2.samplejsssite.com/'
        },
  MySite3: {
            hostName: 'https://site2.samplejsssite.com/'
        },
 },
};
// *** create and map Site specific configuration
const site1 = require('./site1_config');
const site2 = require('./site2_config');
const site3 = require('./site3_config');
const server = express();
const port = process.env.PORT || 3000;
// enable gzip compression for appropriate file types
server.use(compression());
// turn off x-powered-by http header
server.settings['x-powered-by'] = false;
// Serve static app assets from local /dist folder
server.use(
  '/dist',
  express.static('dist', {
    fallthrough: false, // force 404 for unknown assets under /dist
  })
);
/**
 * Output caching, can be enabled,
 * Read about restrictions here: {@link https://jss.sitecore.com/docs/techniques/performance/caching}
 */
// server.use(cacheMiddleware());
// **** map site specific host name and site configuration to vhost  *** important.
server.use(myhost(sites.MyApp.MySite1.hostName,scProxy(site1.serverBundle.renderView, site1, site1.serverBundle.parseRouteUrl)));
server.use(myhost(sites.MyApp.MySite2.hostName,scProxy(site2.serverBundle.renderView, site2, site2.serverBundle.parseRouteUrl)));
server.use(myhost(sites.MyApp.MySite2.hostName,scProxy(site3.serverBundle.renderView, site3, site3.serverBundle.parseRouteUrl)));
// For any other requests, we render app routes server-side and return them
// *** The below code not required.
// server.use('*', scProxy(config.serverBundle.renderView, config, config.serverBundle.parseRouteUrl));
server.listen(port, () => {
  console.log(`server listening on port ${port}!`);
});

Step 4

To overcome any reverse proxy issue, you can further customize the vhost — index.js file as mentioned in the below file.

Using express vhost behind a reverse proxy · Issue #20 · expressjs/vhost · GitHub

• You can copy the vhost index file from vhost package, modify the below line and include in your project or solution.

var host = req.hostname || req.host || req.headers.host

I hope this helps someone out there, thanks for reading, keep your questions posted if any.