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

2. 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",
      },
    ],
  },
]

3. Environment variables are set — Check that .env.local exists and has required values

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

• Vercel Config — vercel.json and next.config.ts templates

Vercel Configuration Templates

vercel.json

For most marketplace apps, you don't need a vercel.json since next.config.ts handles headers. But if you need it:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "nextjs",
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "frame-ancestors 'self' https://*.sitecorecloud.io"
        },
        {
          "key": "X-Frame-Options",
          "value": "ALLOW-FROM https://*.sitecorecloud.io"
        }
      ]
    }
  ]
}

next.config.ts (Recommended)

Headers in next.config.ts are preferred over vercel.json:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "frame-ancestors 'self' https://*.sitecorecloud.io",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

CSP Header Explanation

Important: Without frame-ancestors, Sitecore cannot embed your app, and it will show a blank iframe.

Environment Variables on Vercel

Client-Side Apps

Full-Stack (Auth0) Apps

Setting Variables via CLI

# Add for all environments
vercel env add VARIABLE_NAME

# Add for specific environment
vercel env add VARIABLE_NAME production
vercel env add VARIABLE_NAME preview
vercel env add VARIABLE_NAME development