What Happens When You Deploy? From Localhost to Live in Plain English

You have been building on localhost — your app runs on your machine, and you are the only one who can open it. Deploying is the step that puts your app on the internet so anyone with the URL can use it.

This guide explains what deployment actually is, what happens under the hood, and what you need to do so your first deploy goes smoothly.

Localhost vs Live

• Localhost — You run npm run dev. The app runs on your computer. The address is something like http://localhost:3000. Only you (and anyone on your local network, if you allow it) can access it. You use test data, test API keys, and a local or development database.
• Live (production) — Your app runs on servers owned by a hosting provider. It has a real URL (e.g., https://yourapp.com). Real users can sign up, log in, and use the app. It uses production database and production API keys.

Deploying is the process of taking the app that works on localhost and making it run in that live environment.

What Happens When You Deploy (Step by Step)

1. You Trigger a Deploy

Usually you push your code to a Git repository (e.g., GitHub) and your hosting provider is connected to that repo. When you push to the main branch (or another branch you configured), the host automatically starts a new deploy. You can also trigger a deploy manually from the host's dashboard.

2. The Build Runs

The host does not run your raw source code. It runs a build first — the same kind of thing that happens when you run npm run build locally. During the build:

• TypeScript is compiled to JavaScript.
• Code is bundled and optimized (smaller files, fewer requests).
• Pages that can be pre-rendered are generated.
• Linting and tests may run if you have configured them.

If the build fails (e.g., a TypeScript error or a failing test), the deploy stops. You get a log showing what went wrong. Fix the error, push again, and the next deploy will try again.

3. Your Code Is Deployed to the Host's Servers

Once the build succeeds, the host takes the built application and deploys it to its infrastructure. That means your compiled code and assets are now on their servers, ready to respond to requests. They also set the environment variables you configured in their dashboard (e.g., production database URL, Stripe live keys) so the app has the right config in production.

4. Traffic Goes to Your App

The host connects your domain (or their default URL) to the new deployment. When someone visits your URL, the request hits their servers, and your app responds. They typically provide SSL (HTTPS) and a CDN so your app is fast and secure without you configuring servers yourself.

What You Need Before You Deploy

• A hosting account — This template is designed to work with Vercel; you can sign up and connect your Git repo. Other hosts (Netlify, Railway, etc.) can work too if they support Node.js and the same build commands.
• Environment variables set in production — Everything you have in .env.local for development (database URL, Stripe keys, etc.) must be added in the host's environment settings with production values. Use the live database and live API keys in production, not test ones.
• A passing build — Run npm run build locally first. If it fails locally, it will fail on the host. Fix any errors and ensure tests pass before you rely on automatic deploys.
• A domain (optional) — You can start with the default URL the host gives you (e.g., yourapp.vercel.app). When you are ready, you add your own domain in the host's dashboard and point your domain's DNS to the host as they instruct.

What Often Goes Wrong (and How to Avoid It)

• "Build failed" — The build on the host failed. Check the deploy logs; they usually show the same error you would see when running npm run build locally. Fix the error and push again.
• "Application error" or blank page — The app might be missing an environment variable in production, or using a dev-only value (e.g., localhost URL). Double-check every variable in the host's environment settings and that the app does not assume it is always on localhost.
• Auth or payments not working — Many services (e.g., Stripe, OAuth) require you to register your production URL and sometimes a webhook URL. Add your live URL in their dashboard and use the production keys in your host's environment variables.

Key Takeaways

• Deploying means making your app run on the internet so real users can access it, with production data and production config.
• The process is usually: push code → host runs build → host deploys the built app → traffic is routed to it. Environment variables you set on the host are injected at runtime.
• Before you deploy, run npm run build locally, set all required environment variables in the host's dashboard with production values, and (if needed) register your production URL with third-party services.
• When something goes wrong, check the deploy logs for build errors and verify that production env vars and URLs are set correctly. Once the build passes and config is right, your app is live.