StorefrontsDeploying to Vercel

Deploying to Vercel

The starter is a standard Next.js app. It deploys like any Next.js app; the only Flightdeck-specific part is the four environment variables.

Deploy button

The starter’s README carries a Deploy to Vercel button. It clones the starter into your own GitHub + Vercel and prompts for the required env vars in one flow. Fastest path to a live store.

Manual deploy

  1. Push the starter to a Git repo Vercel can see (GitHub/GitLab/Bitbucket).
  2. New Project in Vercel -> import the repo. Framework preset: Next.js (auto-detected).
  3. Add the four required env vars under Settings -> Environment Variables (see Configuration). Set them for Production (and Preview, if you want preview deploys to hit the same store).
  4. Deploy.

CLI deploy

From the starter directory, with the Vercel CLI installed and authed:

vercel            # preview deploy
vercel --prod     # production deploy

Set env vars once with vercel env add FLIGHTDECK_TENANT production (repeat per var), or in the dashboard.

Preview vs production

Because the store is env-pinned by tenant, preview and production deployments serve the same store — both resolve FLIGHTDECK_TENANT directly, regardless of the deployment’s URL. A preview deploy on my-store-git-branch.vercel.app shows your real catalog. That’s the point: you can review a change on a preview URL before promoting it.

If you want a preview deploy to point at a different (staging) tenant, set FLIGHTDECK_TENANT (and the token/API URL) differently for the Preview environment in Vercel.

Build identity (recommended)

Surface the deployed build in your UI so testers can quote an exact version in bug reports. Vercel exposes VERCEL_GIT_COMMIT_SHA at build time; read it into a public env var and show it in a footer or an About page. A stamp like v{version} · {short sha} turns “it’s broken” into “it’s broken on build a1b2c3d”.

Other hosts

Nothing about the storefront requires Vercel — it’s a Next.js app and the SDK is framework-agnostic fetch. Any host that runs Next.js (or, for a custom frontend, any Node/edge runtime) works. Vercel is simply the lowest-friction path and what the Deploy button targets.

Checklist

  • Four required env vars set for the target environment.
  • FLIGHTDECK_STOREFRONT_TOKEN set as a secret, not exposed.
  • SESSION_SECRET is a real random 32-byte hex string.
  • Production build is green (npm run build) before promoting.
  • (When ready) custom domain added + verified — see Custom domains.
ConfigurationCustom domains