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

Sivalingaamorthy Subramaniam
3 min readMay 31, 2021

--

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 configurationconst 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.

--

--

Sivalingaamorthy Subramaniam
Sivalingaamorthy Subramaniam

Written by Sivalingaamorthy Subramaniam

Techie by profession, having decade and half, years of experience. Nature lover, interested in travel, hiking!

Responses (1)