Deploying

While you build, your app runs only on your computer, at an address like localhost:3000. In this lesson, you'll learn how to deploy it to a hosting service, so you get a real web address you can share with anyone.

What is deploying?

Cooking at home is like running your app on your laptop. Only you can eat it. Deploying is like opening a restaurant. Your food (the app) moves to a kitchen that is always open, and anyone can walk in.

• Deploying means copying your app to a computer on the internet that runs it all day
• Hosting is the service that runs it. Vercel and Netlify are popular, beginner-friendly choices.
• Environment variables are the values in your env file (like .env.local). The host needs its own copy, because that file never leaves your computer.

The steps below use Vercel, which works smoothly with Next.js, a framework AI coding tools often set up.

Step 1: Push to GitHub

The host gets your code from GitHub. Make sure everything is committed and pushed:

git status
git add .
git commit -m "Ready for first deploy"
git push

Not on GitHub yet? Create an empty repository on GitHub, then ask your AI coding tool: "Connect this project to my new GitHub repo at [URL] and push the main branch."

Step 2: Import the project

1. Sign up at Vercel using your GitHub account
2. Click Add New, then Project
3. Find your repository and click Import
4. Vercel usually detects your framework. Leave the build settings as they are.
5. Don't click Deploy yet. Open Environment Variables first.

Step 3: Add your environment variables

Copy each line from your env file into the host, one name and value at a time. For an app with a database, payments, and AI, your list might look like this:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
STRIPE_SECRET_KEY                (sk_test_... while testing)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
STRIPE_WEBHOOK_SECRET
ANTHROPIC_API_KEY
NEXT_PUBLIC_SITE_URL             (set this after the first deploy)

Now click Deploy. The host builds your app (turns your code into a ready-to-run website). After a minute or two, you get a link like your-app.vercel.app.

Copy that link. If your app uses a site URL variable, set it to the new link, then redeploy from the Deployments tab.

Step 4: Update redirect URLs

Login and payment providers send users back to your app after they sign in or pay. They only send people to addresses you allow. Right now, they only know localhost.

Login providers

In Supabase, for example, open Authentication, then URL Configuration:

1. Set Site URL to your live link
2. Add your live link to Redirect URLs. Keep http://localhost:3000 too, so local testing still works.

Payment providers

• Success and cancel URLs usually come from your site URL variable, so they update when you change it
• If your app uses a Stripe webhook, add your live address as a webhook endpoint in Stripe, and put the new signing secret in your host's variables
• Stay in test mode until you are ready for real payments

Not sure what your app needs? Ask:

I'm deploying this app to Vercel at https://[your-app].vercel.app.
List every setting I need to change in my login provider, payment
provider, and Vercel so everything works there. Don't edit files.

Step 5: Test the live site

Go through every important flow on the live link, not just the home page: sign up, log in, use the main features, pay with the test card 4242 4242 4242 4242 if you have payments, and try any AI feature.

Automatic deploys

Here is the best part. From now on, every time you git push to the main branch, the host deploys the new version by itself. If a build fails, the old version stays live, so visitors never see a broken build.

Troubleshooting

Common mistakes

• Committing your env file to GitHub to "save time"
• Forgetting to redeploy after changing environment variables
• Adding a secret key with a NEXT_PUBLIC_ name, which exposes it in the browser
• Only testing the home page, and not login, payments, and AI features

What's next?

Your app is live on the internet. Next, you'll go through a launch checklist: polish, a mobile check, a custom domain, and a short demo.