marketplace-deploy

por vercel

Implementa una aplicación de Sitecore Marketplace en Vercel con los encabezados CSP y la configuración correctos.

npx skills add https://github.com/vercel-labs/sitecore-skills --skill marketplace-deploy

Deploy to Vercel

You are helping the user deploy their Sitecore Marketplace app to Vercel.

Important: This skill has real side effects (deploying to production). Confirm each step with the user before executing.

Pre-Deploy Checklist

Before deploying, verify:

  1. Build succeeds locally:
npm run build
  1. CSP headers are configured — Check next.config.ts for frame-ancestors:
// next.config.ts must include:
headers: [
  {
    source: "/(.*)",
    headers: [
      {
        key: "Content-Security-Policy",
        value: "frame-ancestors 'self' https://*.sitecorecloud.io",
      },
    ],
  },
]
  1. Environment variables are set — Check that .env.local exists and has required values

  2. Extension points are registered — All routes defined in the app should be registered in the Developer Portal

Deploy Steps

Step 1: Install Vercel CLI (if needed)

npm i -g vercel

Step 2: Link to Vercel project

vercel link

Step 3: Set environment variables

# For client-side apps
vercel env add NEXT_PUBLIC_SITECORE_APP_ID

# For full-stack (Auth0) apps — add all Auth0 vars too
vercel env add AUTH0_SECRET
vercel env add AUTH0_BASE_URL
vercel env add AUTH0_ISSUER_BASE_URL
vercel env add AUTH0_CLIENT_ID
vercel env add AUTH0_CLIENT_SECRET
vercel env add AUTH0_AUDIENCE
vercel env add AUTH0_SCOPE

Step 4: Deploy

# Preview deployment
vercel

# Production deployment
vercel --prod

Step 5: Post-Deploy Configuration

After deploying:

  1. Copy the production URL from Vercel
  2. Go to Sitecore Developer Portal → Your App → Settings
  3. Set the App URL to the Vercel production URL
  4. Update AUTH0_BASE_URL env var in Vercel to match the production URL (if using Auth0)

Reference Files

Más skills de vercel

benchmark-sandbox
vercel
Ejecuta escenarios de evaluación de vercel-plugin en Vercel Sandboxes en lugar de paneles locales de WezTerm. Aprovisiona microVMs efímeras con Claude Code y el plugin preinstalado,…
official
emil-design-eng
vercel
Esta habilidad codifica la filosofía de Emil Kowalski sobre el pulido de la interfaz de usuario, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.
official
vercel-react-best-practices
vercel
Directrices de optimización de rendimiento para React y Next.js de Vercel Engineering. Esta habilidad debe usarse al escribir, revisar o refactorizar React/Next.js…
official
vercel-react-best-practices
vercel
Directrices de optimización de rendimiento para React y Next.js de Vercel Engineering. Esta habilidad debe usarse al escribir, revisar o refactorizar React/Next.js…
official
write-guide
vercel
Producir una guía técnica que enseñe un caso de uso del mundo real mediante ejemplos progresivos. Los conceptos se introducen solo cuando el lector los necesita.
official
release
vercel
Liberar vercel-plugin — ejecutar gates, aumentar versión, generar artefactos, commit y push. Usar cuando se pida "release", "ship", "bump and push" o "cut a release".
official
deepsec
vercel
Ejecutar DeepSec contra un checkout de proyecto de Vercel desde dev3000. Usar para configuración de DeepSec con un clic, arranque de contexto de proyecto, procesamiento limitado de primera pasada y…
official
backport-pr
vercel
Hacer backport de un pull request fusionado de Next.js desde canary a una rama de versión anterior, como next-16-2. Usar cuando el usuario solicite hacer backport, cherry-pick o abrir un…
official