Stop 18 · DeploymentTopics · 1/9

Vercel

In short

A project on localhost impresses nobody. On Vercel you connect your GitHub repo once, and every push gets its own live link you can drop in your resume or a recruiter's DM.

The company behind Next.js, offering a zero-config hosting platform with automatic deployments from Git, preview URLs per PR, and a global edge network.

The jaadu hands a food parcel from the kitchen door to a delivery rider on a scooter.

Think of it like this

A Swiggy rider on standby

You cook (push code), and a rider is already waiting at the door. He picks it up, delivers it and sends you a tracking link. Vercel is that rider: every push is picked up, built and delivered to a URL without you lifting a finger.

Watch it happen

From git push to live URL

git push

Install

Build

Deploy

Promote

1/5You push a commit to a branch on GitHub. Vercel gets notified.

The big ideas

What you need to know

Git-based deploys

Import a repo once. Pushing to the main branch updates production automatically.

Preview URLs

Every other branch and pull request gets its own preview link, so teammates can test before merging.

Env vars per environment

Set different values for Production, Preview and Development in the project settings.

Old deployments stay

Each deploy is kept. If a release breaks, you can roll production back to an earlier one.

See it in code

Walk through the code

bash

1npm i -g vercel        # install the CLI2vercel login           # sign in once3vercel                 # deploy a preview from this folder4vercel --prod          # deploy straight to production5vercel env pull .env.local   # copy dev env vars to your laptop

1/4Install the CLI globally and sign in once.

Most of the time Git does the deploying for you. The CLI is handy for quick tests and for syncing environment variables to your machine.

Save yourself the pain

Common mistakes

Oops

Adding an env var in the dashboard and expecting the live site to pick it up straight away.

Do this instead

Env var changes apply only to new deployments. Redeploy after changing them so the new value is used.

Oops

Testing every change directly on the production branch.

Do this instead

Push to a branch, open a pull request and test on the preview URL first.

Your mission

Ship your first live link

~20 min

Quick check

You push a branch called fix-navbar to a repo connected to Vercel. What happens?

Go deeper

1Deploy a project to Vercel by connecting a GitHub repo.
2Open a PR and see Vercel's automatic preview deployment in action.
3Configure environment variables separately for production and preview.