Deploy with Vercel

Connect your repo once, set your secret keys in the platform, and every push ships a live, HTTPS, always-on app to the world.

Building with AI · Lesson 30 · 11 min read

Your app runs at localhost:3000 on your laptop — which means nobody else can use it, and it dies the moment you close the lid. To make it real you need it live on the internet: a proper URL, HTTPS, your secret key configured safely, always-on, and ideally redeploying whenever you push a change. Doing all that by hand is a lot of plumbing. Vercel automates it — and it plugs right into the GitHub repo you already have.

Deploying = putting your app where the public can reach it

Deployment means moving your app from your laptop onto infrastructure anyone can reach: the code gets built (compiled/bundled), hosted on an always-on server (not your machine), and served at a real domain over HTTPS. Doing this by hand — provisioning servers, configuring web servers, managing certificates — is a pile of undifferentiated work that has nothing to do with your actual app.

Vercel connects to your GitHub repo

Because your code lives on GitHub (L26), Vercel can simply watch it. Every push to main triggers an automatic build and deploy (that’s CI/CD), and every pull request gets its own preview URL so you can test a change before merging. Your static frontend is served from a global CDN (fast everywhere), and your backend runs as serverless functions — spun up on demand, with no server for you to manage. That’s where this app’s /api/ai proxy runs in production.

Secrets live in environment variables

Your API key never goes in the repo or the frontend (L26–L28). In production you set it as an environment variable in Vercel’s project settings, where only your serverless backend reads it at runtime. So the workflow is: connect the repo once, set your env vars once, and from then on you just push code to get a live, HTTPS, auto-deploying app. (Honest note: free tiers are generous for learning — keep an eye on limits as real usage grows.)

An everyday analogy

Localhost is cooking for yourself at home. Vercel is handing your recipe (the repo) to a franchise operator who automatically opens identical, always-open locations all over the world (CDN + serverless), keeps the secret sauce in a locked safe at each location rather than printed on the menu (environment variables), and re-stocks every location the instant you update the recipe (auto-deploy on push). You stop running the building yourself; you just keep improving the recipe.

Worked example

Going live, step by step:
1. Connect the GitHub repo to Vercel once.
2. In Vercel’s project settings, set the env var ANTHROPIC_API_KEY (never committed to the repo).
3. Push to main → Vercel builds the frontend and deploys the /api functions, serving it at https://yourapp.vercel.app.
4. Open a PR for a change → get a preview URL to test it safely; merge → production updates automatically.
5. A user in another country loads it fast from the CDN, over HTTPS, while the key stays server-side inside the function. If a deploy is bad, revert the commit and the previous version is back.

This is the reading. The interactive version — active-recall quiz, a hands-on experiment you run in your own AI, and an earned mastery check — is free in the app.

Start this lesson free →

← Database with Supabase Capstone: Ship a Real AI App →