Building Multisite implementations at scale with XM Cloud
Why Multisite?
Many of you are working for big enterprise companies that offer services and products. These can be offered in multiple regions, or you might have different product or service lines under certain brands. And also, your organization might be separated into independently working Brands or Regions.
Let’s assume you have Markets across the globe.
And we know that every region or country works differently. So, you need different ways of communication tailored to your target audiences.
Dependent of the level of autonomy of your regional offices every office might run their marketing campaigns and activities, and all of them have setup their own channels.
This can be quite costly when summing everything up as every entity is developing their own sites.
Now wouldn’t it make sense to consolidate efforts centrally and offer streamlined solutions to every regional office: So you can cut costs on Development, Hosting and Licensing.
But now you need a vendor that can handle that for you!
Sitecore has always been strong in serving enterprise companies with solutions at scale. XP, XM has been leading the markets for years and now XM Cloud continues on that route as a SaaS offering.
Multisite Architectures
There can be 2 ways of architecting your Multisite Solution in code which we tried with 2 implementations we did for the SUGCON sites:
Dedicated app per site
...and a dedicated vercel project per site
This Allows independent development of each site, meaning: independent UIs and Functionality, but also, potential duplication of code.
One app serving all sites
...and a dedicated vercel project per site
This way you have a unified and centralized implementation of sites, that share commonly the same UI design and functionality. This approach definitely allows a simplified maintenance in terms of coding, but also build and deployments.
There could be good reasons to go the one or the other way. You can also mix both approaches, like we did with the XM Cloud Introdution Repo (https://github.com/Sitecore/XM-Cloud-Introduction). There is no best practice or recommendation without knowing your requirements.
You have to ask yourself how different the UI Design and functionality really is, so that you require decoupled development.
Of course, you can always spin up several XM Cloud instances for each site, but that can be rather costly.
More detailed differences about both approaches can be found here:
Website Rollouts
Now that we know what options we have, let’s take a look on: How to quickly roll out new sites and how XM Cloud supports that.
No matter if you do a Regional rollout or relaunch your Brand sites: Usually, you start with one website which is kind of your MVP implementation. Once that is successful and you gained knowledge, you are ready to rollout the other regional website, brand websites or campaign sites.
Therefore, you create a Template Site from the first website that only contains what’s most common across all sites, so, you have a good starting point with least efforts.
Meaning you don’t have to create sites from scratch each time.
Then you can start rolling out new sites one by one.
Clone Sites:
Building your Template Site means, you build a website just as any other that is the most common starting point for all your websites of that type, so:
- a common content architecture
- a common page design
- features that can be preconfigured
This is usually derived from your first site implementation.
Once your Template Site is setup you can run the clone site script in Content Editor and get an exact copy with all the reference re-adjusted to your new site context.
If you are rolling out regional websites, you probably also need to support different languages. You can run the Add Site Language Script additionally to add Language Versions.
Site Templates:
The Second Option is Site Templating. Here you build a site template, meaning an installation description of a site using Modules.
You can reuse the modules you have created along with your features or components. You also add an installation description for your content Architecture. New Sites Can be created from your site template directly in XM Cloud Sites.
Other Multisite Features in XM Cloud
But there are more Multisite related features.
- Sites and Site Collections
- XM Cloud Sites
- Shared Sites
- Cross site linking
- Site Manager
- Site Configuration/Definition
- Modules
- Site related roles
Let’s take a closer look into each of those
Sites and Site Collections
XM Cloud structures content into site collections and sites.
A site represents a website or web presence containing all pages, content fragments and configuration for that particular site.
A site collection helps you bundle sites logically. Within a site collection you have certain advantages to e.g. share content among sites.
XM Cloud Sites
XM Cloud sites is the tool im XM Cloud to create and manage websites.
Checkout what's new in XM Coud sites and how this tool helps marketers and technologists in their daily work. https://www.youtube.com/watch?v=Pq-8pxivroE
Shared Sites
Within a Site Context you can create Content centrally so it can be used within one site. This simplifies content Management a lot, especially when you have to change content, you do that once, and it applies wherever used.
But sometimes you have content that is used by multiple sites: That can be Global Marketing content or something like Terms and Conditions. XM Cloud offers the capability to mark a site as shared and use that content across sites.
But not only content can be shared. Also, configurational items controlled by developers. Something like:
- The Component Variations that need to be configured
- Page and Partial Designs for common Page Layouts like Blogs, or even Header and Footer
- Styling options offered through rendering parameters
- You can control what components are offered to the Marketer through Available Renderings
- Or even control the availability of components per Placeholder using Placeholder Settings
- You can share Redirect Maps
- Page Templates are shared as well across your site collection
Cross Site Linking
Sometimes you need to link across sites. This can always be done via absolute links, but when a page moves, that absolute link is longer valid. With XM Cloud you link across sites keeping the relative information and transferring that later into an absolute URL automatically.
In XM Cloud you can mark sites as Linkable, so they potentially become visible for other sites as targets to be linked to.
And per site you can select if you want to see:
- only the site internal pages to link to
- Pages of other sites with your site collection (marked as linkable)
- all pages within your XM Cloud instance (marked as linkable)
Site Manager
Within the Desktop app of XM Cloud under PowerShell Toolbox you can find the Site Manager.
This Admin Tool helps you get an overview about the routing using different domains, subdomains or virtual folders. Using the traffic light icons the Site Manager indicates whether a site can be accessed through the configured routing. You can resolve the conflicts by configuring proper hosts, virtual folders or just moving sites up and down in the list.
The Site Manager is a bit hidding in the Desktop Tools of XM Cloud --> Menu --> PowerShell Toolbox --> SXA Site Manager
Site Configuration/Definition
When creating new sites there are a few things that need to configured:
- The Hostname for routing
- Homepage
- Rendering Host
- If this is a linkable site or not
- The default language
- And the Language handling
This can be done in the Site Configuration or Site Definition.
Modules
When building new features that consist of several configuration items such as
- Templates
- Renderings
- Media Library items
- and some more…
they can be bundled into Modules.
You can install Modules to one or many sites. Also during site setup you can select what modules you want to install. This way you decouple the deployment of a feature from the actual activation of a feature within a Site or Site Collection.
The module installation can be done either from site or from module perspective. You always only get shown what has not been installed already.
Site related roles
There are 2 reasons why you want to apply roles to your sites.
- If you only show to the authors and marketers what’s relevant for them they are much more focused and not overwhelmed by the size of the installation.
- Allowing only access to only particular sites mitigates the risks of having content created in areas it does not belong.
XM Cloud supports you in generating standard roles giving access only to particular sites.
You can later on finetune those roles or, create roles completely custom targeted to your particular requirements.
Deploying Multisite Solutions
Of course, you also need to deploy your multisite solutions. XM Cloud consists of several parts, we can deploy to. Let’s have a closer look at the XM Cloud Archtiecture.
Architecture
XM Cloud consists of the Core Application, which is basically our authoring environment. We are able to customize it through code deployment, however, be careful with that. There are usually more sustainable ways of augmenting your authoring activities. Also auto updates might break when changing. The Core application also holds all your items related to your sites. Additionally, XM Cloud contains one ore more node-based servers, the so-called [click] editing hosts, that run your head app for the purpose of serving the WYSIWYG Editors like “XM Cloud Pages”
For any public traffic you want to host your head application on a rendering host. Different providers have different features, but usually, they care about scaling out your frontend hosting based on the incoming traffic and based on your budget.
Your Code Solution is based on of our XM Cloud Starter kit and contains:
- Code to customize your XM Cloud instance. Again, be careful with that.
- Items (configuration)
- Code for your frontend applications
Deployments
When you deploy you can deploy to your XM Cloud Core and de-serialize your items from your code to your XM Cloud Core to serve the configuration of your features and sites.
Additionally, you want your frontend app to stay in sync with your configuration items. So, you also deploy your apps to internal and external editing hosts.
Finally, you deploy your frontend applications to your rendering hosts to change also the public appearance of your web application or website.
XM Cloud offers 2 ways of building your deployment pipeline.
- Using the out of the box pipeline
- Or build your own custom pipeline using the XM Cloud CLI
OOTB Deployment
If your scenario is supported, you should go with the OOTB XM Cloud Deploy pipeline. Your project will be connected to your source code repository. Each branch can be hooked up with an Environment, so, when changes get committed to one branch, that triggers the deployment to the connected environment.
It is easy to setup, and it is constantly improved, and you are benefitting for all the efforts we put in.
However, XM Cloud only supports GitHub and Azure as Source Code repositories at the moment and only offers Node based editing hosts internally.
Custom Pipeline
If your have differing requirements you can setup a custom pipeline using any tool like Github Actions or Azure DevOps. XM Cloud provides CLI that offers all required commands.
If you want to orchestrate your own build and deployment pipeline you can easily do that.
Head Application Hosting
Last but not least we should talk about the Head Application hosting. For sure, Vercel is the maintainer for NextJS. So, Vercel is definitely a great and the current recommended choice for hosting your XM Cloud run Head Applications. And XM Cloud has a native integration to connect to Vercel, but your requirements are unique:
So rather check the feature set of each provider:
Do they offer advanced support for FE Framework Features:
- Incremental static generation (ISR)
- Middleware
- Serverless functions
But also:
- How is the Developer Experience
- What are the Costs?
- And what about Scalability?
- Security
- SSO integration
- Dedicated customer support
And last but not least:
Weigh out what is important for you.
Summary
To summarize, when planning your Multisite implementation:
- Check if you can build one app serving all sites, or if you need one dedicated app per site? You might even need to mix the approaches.
- Can you go with the OOTB Deployment Pipeline or do you want to orchestrate a custom pipeline
- Make use of one of the Rollout features using Site Cloning or Site Templating.
- Choose your hosting provider based on your needs.
Resources
Video CI/CD Pipeline by Rob: https://www.youtube.com/watch?v=VNbieipVGk4
XM Cloud Introduction Repo: https://github.com/Sitecore/XM-Cloud-Introduction
Videos on Hosting Providers by Thomas Desmond: https://www.thetombomb.com/posts/nextjs-hosting-alternatives
How to choose a Hosting Provider (Fishtank): https://www.getfishtank.com/blog/how-to-choose-a-nextjs-hosting-provider-for-sitecore-xm-cloud
Accelerate Recipe about Multisite: https://developers.sitecore.com/learn/accelerate/xm-cloud/pre-development/project-architecture/multisite
Sitecore Documentation about Roles Setup: https://doc.sitecore.com/xmc/en/developers/xm-cloud/set-up-security-for-a-site-collection-and-a-site.html#set-up-security-for-a-site
...
Created: 23.10.2024
XM Cloud Multisite DevOps Architecture