Tailwind Logo

Using Context ID to build an environment in Vercel

XM CloudVercel

Published: 2024-07-02

Previously, when deploying in Vercel or connecting to XM Cloud using local Next.js, deployment was done using API keys and endpoints; since JSS 21.6, this has been changed to allow the use of Context IDs. This is introduced in this issue.

Verification of Context ID.

In the XM Cloud Deploy administration screen, select the environment, open Detail and two Context IDs are given for the environment. This key allows you to view Live (published content) and Preview (all content).

contextid01.png

Switching to the Developer Settings tab also shows the actual keys used and makes it easier to use them with copy-paste.

contextid02.png

Deploy the XM Cloud sample site in practice.

Preparing sample sites

In this case, we just want to see how to deploy using Context IDs, so follow the steps below to create a site.

  • Create Basic site
  • Publish site
  • Prepare the Context ID.

Assume the following situation: a site is ready to go.

contextid03.png

Creating a project in Vercel

Create a new project. The steps are as follows.

  1. Create new project
  2. Select GitHub repository.
  3. Set the Environment Variables to the Live values in Developer Settings.
contextid04.png

Click on the Deploy button and the website is up and running in a few moments.

contextid05.png

Prepare Preview environment

We have launched a site using Context ID's Live, but this time we will create a preview site using Preview. First, create a Preview branch in the GitHub repository.

contextid06.png

In Vercel, select Settings - Domain from the previous project to add a preview domain.

contextid07.png

Then switch to the Environment Variables screen: do not change anything for SITECORE_SITE_NAME as it is common. For this reason, only check Production for SITECORE_EDGE_CONTEXT_ID.

contextid08.png

Then add the Preview values SITECORE_EDGE_CONTEXT_ID and JSS_EDITING_SECRET from the Developer settings screen in XM Cloud Deploy.

contextid09.png

You are now ready to deploy the Preview; updating the Preview branch on GitHub will automatically start the Build.

contextid10.png

After a short time, the site was up and running.

contextid11.png

Find out the difference between Live and Preview.

Now you have two sites up and running, what's the difference?

contextid12.png

With regard to this page, the Preview website shows that the content has already been updated.

contextid13.png

In this way, if you are using a Preview ID, you can preview the page you are editing in Sitecore via the web server. The site is updated when the Publish is actually executed.

Summary

When deploying to Vercel, we have confirmed that it is possible to obtain values from XM Cloud Deploy and deploy the site. We have also confirmed the difference between Live and Preview behaviour for Context IDs.

Note: We have added an article that confirms the operation of the system. Please refer to it as well.

Tags