L15 · Publish · 4 min
Preview and Production: how your app goes live
In one sentence
Your app moves through three places as you build it: first localhost:3000 on your own computer, next a private Preview link on Vercel created automatically for every branch you push, and finally Production, the public website updated from main only after you approve.
Think of it like this
Think of rehearsing a play. First you practice in your living room (`localhost`), then you hold a dress rehearsal on the real stage for invited friends only (**Preview**), and finally you open the doors on opening night (**Production**).
How it works
While your Definitioncoding agentAn AI that works in your project folder: it reads files, writes code and runs commands, with your permission.Open in the glossary → is building a task, your app runs on DefinitionlocalhostYour own computer acting as a server while you test, usually at `http://localhost:3000`.Open in the glossary →, usually at http://localhost:3000 (where 3000 is the numbered DefinitionportA numbered door on a computer that an app listens on, like 3000. Only one app can use a port at a time.Open in the glossary →). Only you can see localhost: it lives entirely on your computer and stops as soon as you close the app.
When a task works locally, your agent sends the DefinitionbranchA safe copy of your project where changes are drafted. `main` is the live one.Open in the glossary → to GitHub with a DefinitionpushSending your commits from your computer up to GitHub.Open in the glossary → and opens a Definitionpull requestA proposal to merge a branch, shown on GitHub with its changes and checks, so you can review it first.Open in the glossary →. Because DefinitionVercelThe service that turns your code on GitHub into a live site, with a Preview for every change.Open in the glossary → watches your GitHub Definitionrepo (repository)Your project folder plus its full history. Git records each checkpoint so you can go back to any version.Open in the glossary →, it automatically builds a DefinitionPreviewA private test link Vercel makes for each change, so you can try it before it goes live.Open in the glossary → and gives you a private web address so you can test the change on a real server or on your phone.
Your real users never see unfinished work while you test in Preview. Only when you try the Preview link and say “publish it” does your agent DefinitionmergeBringing the changes from one branch into another, usually into `main` once approved.Open in the glossary → the pull request into DefinitionmainThe main branch. Whatever is in `main` is what your live site shows.Open in the glossary →, which tells Vercel to DefinitiondeployPutting a version of your app online.Open in the glossary → the new version to DefinitionProductionThe live version of your app, the one everyone sees. It comes from `main`.Open in the glossary → at your public address (such as my-first-app.vercel.app).
If you ever notice a problem on the live site after publishing, you don't have to panic. In Vercel's Deployments tab, you can click Instant Rollback on the previous working version to restore it in seconds (a DefinitionrollbackPutting the previous working version back online in one click, while the problem gets fixed.Open in the glossary →) while your agent calmly fixes the code on a branch.
What it looks like in your project
After finishing a task on a branch, your agent pushes to GitHub, opens a pull request, runs the checks, and hands you the Vercel Preview link. It always waits for your explicit approval before merging into main to update Production.
Copy for your agent
Push our current branch, open a pull request, and share the Vercel Preview link so I can test it before we merge into main.
Quick check · 1 question