Building & Deploying Your React App

From dev server to a real website

All through this course you ran npm run dev — a development server on your own machine. To put your app on the internet so anyone can visit it, you first create a production build: an optimised, minified bundle of plain HTML, CSS and JavaScript that browsers can serve fast. Then you upload that build to a host (a service that puts your files on the web and gives you a URL).

Step 1 — build

npm run build

This one command tells Vite to bundle and minify everything into a new dist/ folder. That folder contains your whole site as static files — the thing you actually deploy. You can preview it locally first with npm run preview.

Step 2 — environment variables

Your app often needs values that differ between your computer and the live site — most commonly the API URL (your local server vs the deployed one) and public API keys. You keep these in environment variables so you do not hard-code them. With Vite, put them in a .env file and prefix each with VITE_ so the app can read them.

# .env  (do NOT commit secrets to Git)
VITE_API_URL=https://api.myapp.com

// read it anywhere in your code:
const apiUrl = import.meta.env.VITE_API_URL;
fetch(apiUrl + '/users').then(/* ... */);

You define VITE_API_URL once in .env, then read it as import.meta.env.VITE_API_URL in your code. On the host’s dashboard you set the same variable to the production value, so the deployed app talks to your real API without changing any code. Only the VITE_ prefix makes a variable readable in the browser — that prefix is a reminder that these values are public, so never put true secrets (like a private database password) here.

Step 3 — deploy

Two beginner-friendly hosts dominate for React: Netlify and Vercel. Both connect to your GitHub repo and redeploy automatically every time you push. The typical flow:

1. Push your project to a GitHub repository.
2. On Netlify or Vercel, click New project / Import and pick that repo.
3. Set the build command to npm run build and the publish directory to dist (these hosts usually detect Vite automatically).
4. Add your environment variables (e.g. VITE_API_URL) in the host’s settings.
5. Click Deploy. After a minute you get a live URL like https://my-app.netlify.app.