Multi-site set up on a Sitecore headless app

< Previous: Creating the Sitecore headless app

---

Following are the configurations that need to be set up to serve pages as multi sites using Sitecore headless approach

1. Site configurations

2. App configurations

3. Domain bindings

4. IP spoofing (Locally)

   
   

---

1. Site configurations

   
   

While we implemented our headless application, a default configuration would have been placed in the path <solution root>\sitecore\config\<app-name>.config.

The following is an example:

<site patch:before="site[@name='website']"
 inherits="website"
 name="sitecore-jss-app"
 hostName="sitecore-jss-app.dev.local"
 rootPath="/sitecore/content/sitecore-jss-app"
 startItem="/home"
 database="master" />

The following parameters in the configuration uniquely identify a site node on Sitecore.

• name

• hostName

• rootPath (root item in the Sitecore content tree, can be any Sitecore item/page)

You can now duplicate this configuration to define your custom site, an example given below -

<site patch:before="site[@name='website']"
 inherits="website"
 name="micrositeOne"
 hostName="micrositeone.dev.local"
 rootPath="/sitecore/content/sitecore-jss-app/microsites/one"
 startItem="/"
 database="web" />

---

2. App configuration

App definitions would also be part of the same file <solution root>\sitecore\config\<app-name>.config.

Below is the default app definition created during the creation of the headless app.

<app name="sitecore-jss-app"
             layoutServiceConfiguration="default"
             sitecorePath="/sitecore/content/sitecore-jss-app"
             useLanguageSpecificLayout="true"
             graphQLEndpoint="/sitecore/api/graph/edge"
             inherits="defaults" />

The following paramters uniquely identify an app:

• name

• sitecorePath

You can now duplicate this configuration to define your custom app, an example given below -

<app name="micrositeOne"
             layoutServiceConfiguration="jss"
             sitecorePath="/sitecore/content/sitecore-jss-app/microsites/one"
             useLanguageSpecificLayout="true"
             graphQLEndpoint="/sitecore/api/graph/edge"
             inherits="defaults" />

---

Once the <site> and <app> definitions are set up, run the following command to deploy the configs to the Sitecore directory.

jss deploy config

---

3. Domain bindings

If you are running the set up locally, make sure your ISS binding is in place for your custom domain (micrositeone.dev.local, in my case).

---

4. IP Spoofing

Also, make sure the custom domain is spoofed to your local IP 127.0.0.1

---

Once the 4 points are in place, hitting https://micrositeone.dev.local would now load your new custom website.

The same could be repeated for as many websites as you need.

More complex implementation of multisite would require usage of modules such as the NextJS middleware for sophisticated features.

---

< Previous: Creating the Sitecore headless app