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