Skip to main content
Episode 21 of 24Go live50 min

Deploy your store to Vercel with your own domain

Connect your GitHub repository to Vercel, set the environment variables, get preview deployments for every pull request, and attach your domain.

You will have: Your store running online at your domain over HTTPS, with preview links for each change, the payment webhook and email domain pointed at the live site, and a rollback you have practiced.

Before you start

  • Episode 20 is done: Neon is migrated and you have the pooled DATABASE_URL ready
  • Your code is pushed to GitHub with main passing its tests (Episode 19)
  • A Vercel account (sign in with GitHub) and your domain bought from any registrar, with access to its DNS settings
  • Your Cloudinary, Resend and payment gateway dashboards open in other tabs

Make it yours

Change the example (a fashion store) to your own. Your answers are saved in this browser and used in every episode.

Other series keywords (3)

Your prompt

Paste into: Your AI agent (Claude Code or Codex) opened in your project folder. The agent prepares and checks things; you click the buttons on the Vercel, DNS, Resend and gateway websites because they need your logins.
You are my deployment engineer. My store "Thread & Needle" is a fashion e-commerce store that sells women's and men's clothing, shoes and accessories to customers in United States. It is a Next.js app in a GitHub repository, uses Neon Postgres, Cloudinary, Resend and Stripe. I want it live at threadandneedle.com on Vercel. I use macOS and I am not a programmer.

Plan first: show me your plan and wait for my OK before changing anything.

Be honest about one thing at the start: Vercel's free Hobby plan is meant for personal, non-commercial use. A store that takes real payments should use a paid Vercel plan or another host such as Cloudflare, Netlify or a small VPS. Tell me to verify the current terms on Vercel's website, explain the choice in plain words, and ask me which I prefer before continuing. Keep the steps below host-neutral where you can.

Tasks:
1. Check the project is ready to deploy: a clean production build (npm run build), lint and tests pass, and the main branch is up to date on GitHub. Fix only what blocks the build.
2. Make a table of every environment variable the app needs, taken from .env.example. For each one say: where I get it, whether it is secret, and which environments need it (Production, Preview). Preview must NEVER use the production database or live payment keys: it should use a separate Neon branch and test-mode keys. Show me the table with names only, no values.
3. Walk me through the Vercel steps one click at a time: import the GitHub repository, set the framework to Next.js, paste each variable myself in the Vercel settings, and deploy.
4. Explain preview deployments: every pull request gets its own test link. Show me how to open one and confirm it uses test data.
5. Connect my domain threadandneedle.com: tell me the exact DNS records Vercel shows (I copy them from Vercel, you do not guess them), where to add them at my registrar, how long it can take, and how to confirm HTTPS works. Redirect www to the main address or the other way round, my choice.
6. Update every place that knows the site address: the app base URL variable, the Auth.js URL and trusted host setting, the Cloudinary allowed domains, and the email links.
7. Webhook: tell me how to create a live webhook endpoint in Stripe that points to my new address plus the webhook path, copy its new signing secret into the host settings, and why the test and live secrets are different.
8. Email: help me verify threadandneedle.com in Resend by adding the SPF and DKIM records it shows, and switch the sender address to my domain.
9. Rollback: explain how to promote the previous deployment in Vercel if a release breaks the site, and have me practice it once.

Security rules: never print, log or commit a secret. Never ask me to paste a secret into chat. Do not disable any security setting to make a deploy pass.

Verify yourself: run the production build, then check the live address with a simple request: home page returns 200, HTTPS works, the admin page redirects when logged out, and the webhook path rejects an unsigned request.

Commit any changes to a branch and open a pull request with a clear message.

Report back in this format:
- What was done
- What I should check
- Anything that needs my decision

Review the prompt, then copy it. Never paste real passwords or API keys into a chat.

How to check it worked

  • Opening https://your-domain (your real domain) shows your store with a padlock in the browser
  • Vercel's Deployments list shows a Production deployment for main and a separate Preview deployment for a test pull request
  • The preview link uses test data and test payments, not your live database or live keys
  • Visiting the admin address while logged out sends you to the login page
  • Resend shows your domain as verified, and the payment gateway dashboard shows a live webhook endpoint with the right address
  • You promoted an older deployment as a rollback and then promoted the newest one again

Sample result

Fashion store example

Example report for the fashion store. Your domain, plan choice and variable list will differ.

If something goes wrong

The Vercel build fails but npm run build works on your computer.
Paste the last 30 lines of the Vercel build log to the agent. The usual causes are a missing environment variable or a different Node version. Ask the agent to set the Node version in the project and to list which variable is missing.
The domain shows "invalid configuration" or no padlock after an hour.
Compare the DNS records at your registrar with the ones Vercel shows, character for character. Remove old A or CNAME records for the same name. Propagation can take hours; check again later.
Login works on the preview link but not on the live domain, or the reverse.
The Auth.js site address and trusted host setting must match each environment's address. Ask the agent to re-check them, then redeploy.
Payments succeed but orders stay unpaid.
The webhook is not reaching the store. In the gateway dashboard open the live webhook endpoint and read its delivery log. Usually the address is wrong or the signing secret in Vercel is still the test one.

Vercel's free Hobby plan is for personal, non-commercial use. A store taking real payments should use a paid plan or another host (Cloudflare, Netlify or a VPS). Verify current terms and prices on the provider's pricing page. A domain name is a yearly cost from your registrar.

More in Go live

This is part of the series Build a secure, no-cost e-commerce website with AI agents. See all 24 episodes, the tools used and answers to common questions on the series page.

We use optional cookies for analytics and referral tracking. Learn more about our privacy policy