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.
Update
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.
- 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.
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.
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.