Context
XM Cloud requires to host your front-end website on a serverless hosting provider such as Vercel and Netlify. Outside of XM Cloud Deploy, visibility into deployments often requires direct access to the these hosting providers which always brings up queries such as who needs access and troubleshooting needs.
Other hosting providers such as Netlify can be approached, but in this example we’ll be focusing on Vercel. The provided code is intended as a guideline and must be tailored to suit your specific implementation requirements. Please ensure thorough end-to-end testing is conducted to validate its functionality and performance in your environment.
Execution
Marketplace allows us to build a Deployment Dashboard directly accessible from XM Cloud to monitor and create new deployments. The Vercel Deployments Dashboard provides a Next.js utility app that surfaces deployments and allows controlled redeploys through the Vercel API.
This app uses the Full screen extension mode in XM Cloud. This will make it available through the navigation header > Apps. This keeps the deployments in context of this XM Cloud instance.
You can find the code to setup, or extend on GitHub - Vercel Deployments Dashboard.
Insights
There’s plenty of ways this can be extended such as integrate with XM Cloud publish events to trigger redeploys automatically, but guard against build floods. Keep in mind:
- To ever distribute broad-scope Vercel tokens. Limit to project-level if possible and store secrets in your org’s secret manager.
- Explicitly configure
VERCEL_GIT_BRANCHandVERCEL_TARGETto “accidental deploys” to the wrong environment. - Hosting the dashboard on Vercel with SSO is the best balance between visibility and control. Local-only use is fine for developer troubleshooting but doesn’t scale for other audiences.