jsschools
Deployment

From `npm run build` to a Live URL

Deployment

A Vite-built React app is a folder of static files. Many free hosts will serve them for you in under five minutes.

4 min read Level 1/5 #react#deployment#vite
What you'll learn
  • Build for production
  • Deploy to Netlify, Vercel, or Cloudflare Pages
  • Configure the SPA routing fallback

A Vite-built React app is just static files — index.html, some JS, some CSS. Any static host will serve it.

Build

npm run build

Outputs to dist/. You can preview locally:

npm run preview

Free Static Hosts

HostWhat you do
NetlifyDrag-and-drop dist/, or connect a GitHub repo
VercelConnect GitHub; auto-deploys on push
Cloudflare PagesConnect GitHub; very fast edge network
GitHub PagesFree for public repos; needs base path config

All three of the first three auto-detect Vite — pick “Vite” as the framework and accept the defaults.

The SPA Fallback

Client-side routing means https://yoursite.com/about should serve the same index.html as / — React Router takes over from there. Without this, hard-refreshing /about returns a 404 from the host.

Most hosts know this. Look for the right config file:

Netlify — _redirects

/*  /index.html  200

Vercel — vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Cloudflare Pages

Add _redirects like Netlify, or use a _headers file alongside.

Environment Variables

Vite exposes only variables prefixed with VITE_ to your code:

VITE_API_URL=https://api.example.com
fetch(`${import.meta.env.VITE_API_URL}/users`)

Most hosts have a UI for setting env vars per-environment. Secrets — never put real secrets in client-side env vars. Anything in the bundle is public.

Configuring a Base Path

If you’re hosting under a sub-path like example.com/app/, set the base in vite.config.js:

export default defineConfig({ base: "/app/" });

And the router:

<BrowserRouter basename="/app">

Course Complete

That wraps it. You’ve gone from “what is React” to deploying a real app, with state, effects, hooks, patterns, and the libraries that make real apps possible.

The next step is to build something — a todo app, a markdown editor, a Wordle clone, anything. Reading more won’t help nearly as much as shipping a small project.