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.

Prepare a Preview Branch

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

postmanedge13.png

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.

postmanedge15.png

the following items regarding Environment Variables need to be changed.

  • SITECORE_API_KEY
  • GRAPH_QL_ENDPOINT

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

postmanedge16.png

The following is a screen shot of the completed setup.

postmanedge17.png

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.

postmanedge18.png

The screen after Deploy is completed is shown below.

postmanedge19.png

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.

postmanedge20.png

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

postmanedge21.png

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

Summary

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.

Tags