Delivering Multiple Homepages 

Scrivito features built-in support for handling incoming requests from more than one domain. You can, for example, drive multi-language websites or several websites appearing to be independent, all backed by a single Scrivito CMS. This way, assets can be shared, the codebase is identical, all content can be edited in one place, only one deployment step is required, to name just the most beneficial effects of using a single CMS for multiple domains.

This is made possible by a callback, which is executed each time the homepage URL path, “/” is requested. If one takes account of the domain or host name in this callback, the corresponding specific homepage can be determined and rendered. As a default, the callback returns Scrivito.Obj.root(), which returns the CMS object whose path is “/”.

The callback can be defined by means of the homepage key inside the Scrivito.configure function. In the following example, we are directing the homepage requests for two subdomain names (indicating a specific language version of the site) to their respective CMS object:

src/config/scrivito.js
Copy
import * as Scrivito from 'scrivito';

function rootObj() {
  var rootPath = '/';
  switch (location.hostname) {
    case 'de.example.com':
      rootPath = '/de';
      break;
    case 'en.example.com':
      rootPath = '/en';
      break;
  }
  return Scrivito.Obj.getByPath(rootPath);
}

Scrivito.configure({
  tenant: process.env.SCRIVITO_TENANT,
  homepage: () => rootObj(),
});

As you can see, depending on the subdomain name, the CMS object to be used for rendering the homepage is determined by its respective path (Scrivito.Obj.getByPath). Alternatively, we could have identified the homepage objects by their permalink (Scrivito.Obj.getByPermalink) or even by their ID (Scrivito.Obj.get).

Note that there’s the option to switch homepages based on location.origin (protocol://example.com:port) or location.host (example.com:port) instead of location.hostname (example.com).