Tailwind Logo

Prepare a server for Preview

XM CloudVercel

Published: 2023-12-17

In the previous issue, we confirmed that it is possible to check data before publication by using Experience Edge's Preview. Therefore, we will prepare an instance for Preview in Vercel this time.


Version JSS 21.6, Previews can also be easily created using Context IDs, see new article.

Prepare a Preview Branch

First, create a Preview branch in the GitHub repository, this time from the main branch.


Next, configure Vercel to use the domain for this branch. First, specify the domain on the Domains screen as follows (the domain vercel.app is fine, but in this case we use preview.sitecoredemo.jp). We also specify the branch as preview.


the following items regarding Environment Variables need to be changed.


Next, set the keys that have already been set as Production-only values. Next, set the key for Preview, specifying the branch.


The following is a screen shot of the completed setup.


Update the file against the Preview branch on GitHub. It is no problem just to update the commented-out text. After the update, the preview will be built as shown below.


The screen after Deploy is completed is shown below.


Refresh the page

This time, we will update the content in Pages (since Display Name is a value used within Sitecore and is not visible in the page preview). We made a simple text change.


If you access an instance of Preview, you will see that the page has changed as follows


Publish will reflect it externally. Thus, we were able to create a site with a single content database, published and previewed.


In this case, we have a GitHub branch, and we have a Preview. The GitHub environment allows you to set preview before main, so that you can only send pull requests from preview. You can set preview before main to allow pull requests to be sent only from preview.