In this blog post, Sitecore Solutions Architect Jared Arnofsky discusses the process of redeploying a website to Vercel from XM Cloud, particularly focusing on the integration of Sitecore's multi-site plugin and static site generation. He addresses the challenges of content authoring and site deployment, leveraging Vercel's Rest API for deployment, and integrating this process with Sitecore. He also provides insights into the benefits of on-demand site creation and hints at future possibilities with Vercel's Rest API for Sitecore integration.
Sitecore's Multi-Site Plugin and Static Site Generation
Challenges with Content Authoring and Site Deployment
Sitecore's multi-site plugin is dependent on your site being in the config.js Sites array, which happens during the buildstage. Additionally, our implementation utilizes static site generation. Therefore, we needed to identify a way for a content author to run a new build to Vercel from Sitecore when they create and publish a new site.
Leveraging Vercel Rest API for Deployment
Identifying the Last Successful Deployment
After going through the Vercel Rest API, we identified the best path forward was to find our last successful deployment and redeploy it. This meant we didn't need access to our repo, knew the last stable release was going to redeploy, and a new Vercel build would be triggered, causing our Sites array to populate and our static site generation to occur.
Integration with Sitecore
Adding a Context Menu Script for Redeployment
From the Sitecore side, the solution was to add a context menu script to Sitecore. This change made it so when you right click on a specific site node, you have a Redeploy to Vercel script option. We also leveraged built in rules to make it only show on our parent site nodes.
Sitecore Powershell Extensions and XM Cloud Scripts
The Sitecore Powershell Extensions documentation has some more details on adding a context menu script with some example blog posts. Additionally, there are examples of scripts that come with XM Cloud in SPE that can be referenced. In addition, we added an API call to add a new domain to Vercel during our redeploy. With this addition, the workflow for content authors is now as follows:
- Make a new site
- Add a site URL for the new site's Site Grouping Site item in the host name field (assuming using default SXA)
- Publish site to experience edge
- Select site node and Redeploy to Vercel
Utilizing Vercel's API for Deployment
To leverage Vercel's API, you first need to set up an access token. You also need to identify your project ID and team ID in the Vercel portal, or in the .vercel folder in your headless app after your initial deploy.
We leveraged the following API calls:
- /v6/deployments
- /v13/deployments
- /v10/projects
The Vercel Rest API is a great resource to further understand these calls, additional parameters, and more.
Redeploy To Vercel Script
This PowerShell script will make a DNS entry in Vercel and Redeploy the code, causing your newly created site to appear in the config.js. It’s important to note that the automatic DNS entry is set up to only take the first value in the Site Grouping Site item.
Benefits of On-Demand Site Creation
In our use case, our content authors needed the ability to create sites on demand fairly often without developer help. Not all multi-site instances in XM cloud need this, but this approach certainly makes it possible.
It’s exciting to see what is possible with Vercel’s Rest API and the ways it can be integrated with Sitecore. I am eager to learn about more use cases in the future.
What’s Next?
Is your business interested in elevating your Sitecore experience? Discover the unparalleled expertise of Americaneagle.com's Sitecore development services. Reach out to us today to get started!
About Author
