Sitecore XM Cloud – Redeploy to Vercel from XM Cloud

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.

Programmers coding on computers with screens displaying complex software development code.

 

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:

  1. Make a new site
  2. Add a site URL for the new site's Site Grouping Site item in the host name field (assuming using default SXA)
  3. Publish site to experience edge
  4. 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:

  1. /v6/deployments
  2. /v13/deployments
  3. /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.

Coding language PowerShell Script for Redeploying Sitecore XM Cloud to Vercel Step 1

PowerShell Script for Redeploying Sitecore XM Cloud to Vercel Step 2

PowerShell Script for Redeploying Sitecore XM Cloud to Vercel Step 3

PowerShell Script for Redeploying Sitecore XM Cloud to Vercel Step 4

PowerShell Script for Redeploying Sitecore XM Cloud to Vercel Step 5

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

Jared Arnofsky, Sitecore Solutions Architect
Jared Arnofsky is a Solutions Architect at Americaneagle.com. He has been working with Sitecore and helping clients solve their technical challenges for over a decade across various industries. In his free time, he enjoys collecting vintage action figures, traveling, and spending quality time with his wife and son.


Featured Posts