Mastering Multi-Site Development with Sitecore Headless Services

Mastering Multi-Site Development with Sitecore Headless Services

·

7 min read

Welcome to my new blog post, where I will explore the process of developing two distinct websites within the same Sitecore installation using Sitecore Headless Services. In today's digital landscape, companies often require multiple websites to cater to different service offerings or brands. Sitecore, a powerful and flexible content management system, provides a comprehensive solution for managing multiple websites within a unified platform.

Suppose you are responsible for developing two websites for different brands within your company. These websites need to be built within a single Sitecore installation. Let's dive in and discover the possibilities of developing multiple websites within a Sitecore installation using Sitecore Headless Services.

To begin our journey, let's take a look at the wireframes for both websites:

Site NameXMCloud
URLlocalhost:44366
Root Path/sitecore/content/XMCloud

Site NameOrderCloud
URLlocalhost:44367
Root Path/sitecore/content/OrderCloud

To kickstart the development, the first step is to create two separate sites within Sitecore databases.

To locate the site configuration file in the Platform project, follow these steps:

  1. Open the Sitecore solution in your preferred Integrated Development Environment (IDE) such as Visual Studio.

  2. Navigate to the "Platform" project within the solution structure.

  3. Look for the "Site" or "Sitecore" folder, which typically contains the site-specific configuration files.

  4. Within this folder, locate the relevant configuration file for the site you want to configure. It might be named something like "SiteName.config" or "SiteDefinition.config".

Once you have located the site configuration file, you can add the following site configuration to it:

<?xml version="1.0"?>

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/">
    <sitecore>
        <settings>
            <setting name="JavaScriptServices.ViewEngine.Http.JssEditingSecret" value="AQPYJ3r3tBhv2aAUZmwZALn5QpgqKGioIr9Xg4NJPohh232Fz6EjN3ovjYSuWOyS" />
        </settings>
        <sites>
            <site name="MyProject"
                  inherits="website"
                  hostName="MyProject.cm"
                  rootPath="/sitecore/content/MyProject"
                  patch:before="site[@name='website']" />

            <site name="XMCloud"
                  inherits="website"
                  hostName="xmcloud.cm"
                  rootPath="/sitecore/content/XMCloud"
                  patch:before="site[@name='website']" />

            <site name="OrderCloud"
                  inherits="website"
                  hostName="ordercloud.cm"
                  rootPath="/sitecore/content/OrderCloud"
                  patch:before="site[@name='website']" />

        </sites>
        <javaScriptServices>
            <apps>
                <!--
          We need to configure an 'app' for the site as well in order to
          enable support for Experience Editor. The URL below will be used
          by the Experience Editor to render pages for editing.
        -->
                <app name="MyProject" sitecorePath="/sitecore/content/MyProject" 
serverSideRenderingEngine="http" serverSideRenderingEngineEndpointUrl="http://localhost:55412/jss-render" serverSideRenderingEngineApplicationUrl="https://localhost:44364/" inherits="defaults" />

                <app name="XMCloud" 
sitecorePath="/sitecore/content/XMCloud" 
serverSideRenderingEngine="http" serverSideRenderingEngineEndpointUrl="http://localhost:55414/jss-render" serverSideRenderingEngineApplicationUrl="https://localhost:44366/" inherits="defaults" />

                <app name="OrderCloud" sitecorePath="/sitecore/content/OrderCloud" 
serverSideRenderingEngine="http"               serverSideRenderingEngineEndpointUrl="http://localhost:55415/jss-render" serverSideRenderingEngineApplicationUrl="https://localhost:44367/"
inherits="defaults" />    

            </apps>
        </javaScriptServices>
    </sitecore>
</configuration>

To ensure that the changes take effect, save and publish the modifications made to the site configuration file.

Now, in Visual Studio, you can proceed to add two distinct rendering host projects. These rendering host projects will allow you to develop and manage the rendering logic for each of the two websites separately, providing flexibility and control over their functionalities.

Ensure that you update the sc_site value in the appsettings.json file of each site. Follow these steps to make the necessary adjustments:

  1. Locate the appsettings.json file for each site within your project structure.

  2. Open the appsettings.json file for the first site.

  3. Locate the sc_site key and update its value with the appropriate site name for the first site.

  4. Save the changes to the appsettings.json file.

  5. Repeat the above steps for the appsettings.json file of the second site, updating the sc_site value with the relevant site name.

By updating the sc_site value in the appsettings.json file for each site, you ensure that the Sitecore configuration recognizes and associates the correct site configuration with each respective site during runtime. Please use the following snippets as a reference.

XMCloud Rendering Host:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "LayoutService": {
    "Handler": {
      "Name": "jss-endpoint",
      "Uri": "https://MyProject.cm/sitecore/api/layout/render/jss",
      "RequestDefaults": {
        "sc_apikey": "{dba6453f-6a71-4de9-b9c3-36ea77fcc730}",
        "sc_site": "XMCloud"
      }
    }
  },
  "RenderingEngine": {
    "ExperienceEditor": {
      "Endpoint": "/jss-render"
    }
  },
  "JSS_EDITING_SECRET": "...",
  "Analytics": {
    "SitecoreInstanceUri": "https://MyProject.cm/"
  },
  "Sitecore": {
    "ApiKey": "..."
  },
  "Foundation": {
    "GraphQL": {
      "UrlLive": "https://myproject.cm/sitecore/api/graph/items/web/",
      "UrlEdit": "https://myproject.cm/sitecore/api/graph/items/master/"
    }
  }
}

OrderCloud Rendering Host:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "LayoutService": {
    "Handler": {
      "Name": "jss-endpoint",
      "Uri": "https://MyProject.cm/sitecore/api/layout/render/jss",
      "RequestDefaults": {
        "sc_apikey": "{dba6453f-6a71-4de9-b9c3-36ea77fcc730}",
        "sc_site": "OrderCloud"
      }
    }
  },
  "RenderingEngine": {
    "ExperienceEditor": {
      "Endpoint": "/jss-render"
    }
  },
  "JSS_EDITING_SECRET": "...",
  "Analytics": {
    "SitecoreInstanceUri": "https://MyProject.cm/"
  },
  "Sitecore": {
    "ApiKey": "..."
  },
  "Foundation": {
    "GraphQL": {
      "UrlLive": "https://myproject.cm/sitecore/api/graph/items/web/",
      "UrlEdit": "https://myproject.cm/sitecore/api/graph/items/master/"
    }
  }
}

Don't forget to update the launch settings for each project to ensure proper configuration and execution. Here are example snippets that can be used as a reference:

XMCloud Rendering Host:

{
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true, 
    "iisExpress": {
      "applicationUrl": "http://localhost:55414",
      "sslPort": 44366
    }
  }
}

OrderCloud Rendering Host:

{
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true, 
    "iisExpress": {
      "applicationUrl": "http://localhost:55415",
      "sslPort": 44367
    }
  }
}

Let's begin customizing the layout for each website, tailoring them to their unique design and branding elements.

To run multiple projects within the same solution in Visual Studio, follow these steps:

  1. Right-click on the solution in the Solution Explorer window and select "Set Startup Projects" from the context menu.

  2. In the "Set Startup Projects" window, choose the "Multiple startup projects" option.

  3. For each project you want to run, select the project from the list and choose the desired action from the "Action" column (e.g., "Start" or "Start without debugging").

  4. Click "OK" to save the changes and close the "Set Startup Projects" window.

  5. Press F5 or click the "Start" button in the Visual Studio toolbar to launch the solution with the selected projects.

Visual Studio will now launch the specified projects simultaneously, allowing you to run and test multiple projects within the same solution. You can monitor the output and debug each project independently, as they will be running in separate instances or hosting environments.

To edit the content for each brand site, follow these steps using the Experience Editor in Sitecore:

  1. Log in to the Sitecore Content Editor.

  2. Navigate to the content items associated with the first brand site.

  3. From the Sitecore Content Editor, switch to the Experience Editor by clicking on the "Experience Editor" button in the top ribbon.

  4. In the Experience Editor, you can make live edits to the content directly on the website's frontend. Update text, images, layout, and other elements as needed. Take advantage of the Experience Editor's intuitive interface to modify the content and preview the changes in real-time.

  5. Repeat the process for the second brand site, navigating to the content items specific to that site and making the necessary edits using the Experience Editor.

  6. Once you have made the desired changes and reviewed them using the Experience Editor, you need to republish both sites to ensure the updated content is reflected on the rendering hosts. To do this, go back to the Sitecore Content Editor.

  7. Select the root item for each brand site or the relevant sections containing the edited content.

  8. Right-click on the selected item(s) and choose "Publish" from the context menu.

  9. In the Publish dialog box, select the appropriate publishing options and click "Publish" to initiate the publishing process. This action will update the published content for both brand sites.

  10. Finally, navigate to the rendering hosts for each site, access the URLs in a web browser, and observe the changes you made in the content using the Experience Editor. Ensure that the modifications are accurately displayed on the frontend of both brand sites.

By leveraging the Experience Editor in Sitecore, you can efficiently edit and update the content for each brand site, and subsequently, republishing ensures the changes are reflected on the rendering hosts for a seamless user experience.

In conclusion, we have explored how to develop two distinct websites within the same Sitecore installation using Sitecore Headless Services. By following the outlined steps, we were able to create separate sites, customize their layouts, and manage their content using the Experience Editor. Additionally, we updated the launch settings in Visual Studio to run multiple projects simultaneously and ensured the correct site configurations were set in the appsettings.json files.

This approach allows for the efficient development and management of multiple websites, accommodating different service offerings or brands within a unified Sitecore platform. Leveraging Sitecore Headless Services enables us to build flexible and customizable front-end experiences while maintaining the power and capabilities of the Sitecore ecosystem.

By utilizing Sitecore's features and integrating them with our rendering host projects, we can seamlessly deliver engaging and tailored experiences to our website visitors. The ability to edit content through the Experience Editor and republish the sites ensures that updates are accurately reflected on the rendering hosts.

With Sitecore Headless Services, we can confidently deliver two distinct websites, each aligned with their specific branding and content requirements, while benefiting from the robust features and scalability provided by Sitecore.

By following these practices and leveraging Sitecore's capabilities, you can successfully develop and manage multiple websites within a single Sitecore installation, providing a seamless and personalized experience for your users.