Tailwind Logo

Deploying XM Cloud sites on Vercel (updated version)

XM Cloud

Published: 2023-07-19

If you choose to deploy your XM Cloud site to Vercel, the CI / CD and other parts will be easier to do in conjunction with GitHub. We have already explained the procedure once before, but here are the new and updated parts of the process.

Web Site Publication

Before the collaboration can take place, the pages involved must be published once. Publishing from the Content Editor using the procedure described in the previous article will continue to work, but it is now possible to deploy from XM Cloud Deploy as well.

xmcdeploysite01.png

Getting API Keys

API keys can now also be issued from the administration screen: go to the target environment in XM Cloud Deploy, click on the Detail tab, and you will see the Edge token value button as shown below.

xmcdeploysite02.png

When actually clicked, a Token is issued and the screen changes to the one shown below. Click on the icon to display it on the screen or copy it to the clipboard.

xmcdeploysite03.png

The obtained Token should be placed in the Header of the Edge Playground ( https://edge.sitecorecloud.io/api/graphql/ide ) provided by Experience Edge with the obtained key.

JSON
{
    "sc_apikey":"YOUR-API-KEY"
}

This confirms that the Key has actually been activated.

xmcdeploysite04.png

Previously, it was necessary to obtain this information from the command line, but it can now be easily obtained from the administration screen. Please refer to the following page for details on how to use it.

Configure Next.js Add-on

As we move forward with the use of sxastarter, the analytics and personalization features are included, and we will introduce this part of the setup in this article.

If you first go to the .env file of your local environment, you will see the following items are provided. We have compiled a table with samples of the actual information that should be set.

Column

Value

NEXT_PUBLIC_CDP_TARGET_URL

https://api-engage-ap.sitecorecloud.io

NEXT_PUBLIC_CDP_CLIENT_KEY

pqsPERS3lw12v5a9rrHPW1c4hET73GxQ

NEXT_PUBLIC_PERSONALIZE_SCOPE

{"en": "example.com", "da": "example.com/da"}

NEXT_PUBLIC_CDP_POINTOFSALE

{"en": "sitecoredemo.jp", "da": "sitecoredemo.jp/da"}

PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT

400

PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT

400

The value to be set here can be obtained by the following procedure.

First, open the menu on the Site List page and select Settings.

xmcdeploysite05.png

Open Settings and switch to the Developer Settings tab to see the values for the current site.

xmcdeploysite06.png

These items should be set in Vercel's Variables. You can see the details of this setting in the following page.

For the rest of the steps, please review the previous pages again and expand on them.

xmcdeploysite07.png

Summary

We showed how to obtain API keys, which now make it possible to easily retrieve items for previous settings, and how to retrieve and deploy data from the administration screen regarding new items of data needed for integration with analytics.

Tags