marketplace-deploy

โดย vercel

ปรับใช้แอป Sitecore Marketplace ไปยัง Vercel พร้อมด้วย CSP headers และการกำหนดค่าที่ถูกต้อง

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

Skills เพิ่มเติมจาก vercel

benchmark-sandbox
vercel
เรียกใช้สถานการณ์ประเมินผลของ vercel-plugin ใน Vercel Sandboxes แทนแผง WezTerm ในเครื่อง จัดเตรียม microVM ชั่วคราวที่ติดตั้ง Claude Code และปลั๊กอินไว้ล่วงหน้า…
official
emil-design-eng
vercel
ทักษะนี้เข้ารหัสปรัชญาของ Emil Kowalski เกี่ยวกับการตกแต่ง UI การออกแบบคอมโพเนนต์ การตัดสินใจเรื่องแอนิเมชัน และรายละเอียดที่มองไม่เห็นซึ่งทำให้ซอฟต์แวร์รู้สึกดี
official
vercel-react-best-practices
vercel
แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับโครงสร้างโค้ด React/Next.js…
official
vercel-react-best-practices
vercel
แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับโครงสร้าง React/Next.js…
official
write-guide
vercel
ผลิตคู่มือทางเทคนิคที่สอนกรณีการใช้งานในโลกจริงผ่านตัวอย่างแบบค่อยเป็นค่อยไป แนวคิดจะถูกนำเสนอเมื่อผู้อ่านต้องการเท่านั้น
official
release
vercel
ปลั๊กอิน Vercel สำหรับการปล่อย — รัน gates, เพิ่มเวอร์ชัน, สร้าง artifacts, คอมมิต และพุช ใช้เมื่อถูกขอให้ "release", "ship", "bump and push" หรือ "cut a release
official
deepsec
vercel
รัน DeepSec กับโปรเจกต์ Vercel ที่เช็คเอาท์จาก dev3000 ใช้สำหรับการตั้งค่า DeepSec แบบคลิกเดียว การบูตสแตรปบริบทโปรเจกต์ การประมวลผลรอบแรกแบบมีขอบเขต และ…
official
backport-pr
vercel
ย้อนกลับ pull request ของ Next.js ที่รวมแล้วจาก canary ไปยังสาขารุ่นก่อนหน้า เช่น next-16-2 ใช้เมื่อผู้ใช้ขอให้ย้อนกลับ, cherry-pick, หรือเปิด...
official