Sitecore XM Cloud Vercel connector helps to host Website to Vercel
Before using this connector you have to create Project and Environment.
Prerequisite
Before we ould start configuring Project in Vercel we need following info-
JSS APP Name- can be found and should be same as configured in package.json in sxastarter folder
In this case it is sxastarter
GRAPHQL ENDPOINT
GraphQL endpoint for published Sitecore items i.e. Delivery/Live endpoint is –
https://edge.sitecorecloud.io/api/graphql/v1
Sitecore API Key
This should be the GraphQL Delivery token i.e. GQL token-
There are different ways to generate GQL Token. One of the way is generate from portal. Login to XM Cloud and navigate to Projects ==> Environments ==> Details tab
Click on Generate Delivery API Key (Note this key as this won’t be avilable again and needs to be re-generated again if lost)
Note this API key as this is required later whilst configuring the Vercel hosting.
Publish Site–
Publish the site to Edge before starting to configure Project in Vercel, since we are configuring GraphQL Delivery API token items in Sitecore needs to be published
Create a Project in Vercel
Login to Vercel and Create Project-
Since I have logged in using GitHub account it displays the repositories in Github the project will be based on-
Import the repository-
Configure Project
Once the project is created configure the project by selecting the Framework and repo folder FE code exists-
Choose the Nextjs Framework
Choose the sxastarter folder from the repo i.e. /src/sxastarter
Add following environment variables extracted earlier-
JSS_APP_NAME – sxastarter
GRAPH_QL_ENDPOINT – https://edge.sitecorecloud.io/api/graphql/v1
SITECORE_API_KEY – Delivery API Key generated from portal.
Should have this confiogured in the Vercel Project-
Deploy the Project
Deployment complete-
Visit the Site and should get the same view as configued in local environment and Experience Editor-
Thats all for how to create a Vercel Project and deploy site.
Errors-
If you see error-
The field 'item' does not exist on the type 'query'
Resolution-
Publish the site
