XM Cloud & Vercel - Azure Deployments

Summary

We had a requirement to deploy code from a private repository in Azure DeveOps to both Sitecore XM Cloud and Vercel.

The below example is a simple use case on accomplishing that goal and assumes that you have already set up XM Cloud and Vercel for your project.

For this example we are using the Sitecore XM Cloud Starter Repository (opens in a new tab) which comes with a Sitecore JSS SXA Headless Next.js application.

The Vercel portion of this is still applicable even if you are not using XM Cloud.

Build

First, we create a new Target Folder called build/xmcloud and copy all of the contents ** to that folder. XM Cloud has it's own internally hosted rendering host. It is important that we take the entire solution so that we have the rendering host set up and built properly in XM Cloud.

Next, we take all the files from the previous step and create a new build artifact called XMCloud.

Finally, we take the next.js headless application in the src/app folder and create a new build artifact called Vercel.

Release

Now, we have a build pipeline that creates our two artifacts for XM Cloud and Vercel. We have linked our build pipeline output to our release pipeline so that we can leverage those packages.

The XM Cloud deployment is two steps. The first is to use the .NET Core SDK as it is a requirement for the Sitecore CLI.

The next step is a PowerShell Script to deploy the code using the Cloud Login Command (opens in a new tab) and the Cloud Deployment Command (opens in a new tab).

The code:

dotnet tool restore --add-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json
dotnet sitecore cloud login --client-credentials --client-id [CLIENT ID GOES HERE] --client-secret [CLIENT SECRET GOES HERE]
dotnet sitecore cloud deployment create --working-dir . --upload --environment-id [ENVIRONMENT ID GOES HERE]

Finally, we have our single command to release to Vercel.

Using PowerShell we use a Vercel Token (opens in a new tab) as well as setting up the VERCEL_ORG_ID and VERCEL_PROJECT_ID as variables in our pipeline. We are leveraging the PROD slot here as this is a build to an environment with a static url.

The code:

npm i -g vercel
vercel deploy --force --prod --token [PLACE TOKEN HERE]

Conclusion

Azure DevOps deployments for XM Cloud and Vercel seem to be less complex as far as traditional build and deployment setups go. Most of the heavy lifting has now been placed on Sitecore and Vercel. This is a simple example for a single environment and there is room for improvement and enhancements for a PROD setup.