A project that only runs on localhost:5173 is invisible to everyone else, including the people deciding whether to hire you. Deploying turns the Watchlist into a URL you can put on your CV, send to a friend and open on your phone. For a Vite app on Vercel this takes a few minutes, and once it’s set up, every git push deploys automatically.
npm run build turns your project into a folder of static files: dist/index.html, one or two JavaScript bundles and a CSS file, with hashed file names like index-B3f9xk2a.js so browsers can cache them forever. There’s no server code. Any static host can serve it; Vercel is popular because it detects the framework, builds on every push and gives you preview URLs for free on the Hobby plan.
Before deploying, check the production build locally:
\nnpm run build\nnpm run previewpreview serves dist/ on http://localhost:4173. If something breaks only in production, such as a wrong asset path or a missing environment variable, you find out here instead of on the live site.
git remote add origin … and git push -u origin main.watchlist repository. Vercel detects Vite and fills in the build command (vite build, which is what npm run build runs) and the output directory (dist). Leave them as they are.watchlist-yourname.vercel.app.From now on, the repository drives deployments:
\nmain builds and deploys to production.Preview deployments change how you work. You restyle the filter bar on a branch, open a pull request, and click the preview link on your phone before merging. Production never sees unfinished work.
\nIf you’d rather deploy from the terminal, or the code isn’t on GitHub yet:
\nnpm install -g vercel\nvercel # first run: log in, link the project, deploy a preview\nvercel --prod # deploy to productionThe first vercel run asks a few questions (scope, project name, which directory) and detects Vite the same way. It creates a .vercel folder that links your directory to the project; keep it out of Git. The CLI is handy for quick experiments. For a project you’ll keep working on, the Git integration is better, because deployments happen without anyone remembering to run a command.
Sooner or later you’ll want configuration, such as an API base URL. Vite exposes environment variables to your code only if they start with VITE_:
const apiUrl = import.meta.env.VITE_API_URL;Locally, put them in a .env.local file (already git-ignored by the Vite template). On Vercel, add them under Project Settings → Environment Variables, then redeploy, because Vite inlines the values when it builds.
The Watchlist has one page, so every request is for / and Vercel serves index.html. If you later add client-side routing with React Router, a URL like /watched exists only inside your JavaScript. Refreshing on it asks the server for a /watched file that doesn’t exist, and you get a 404. The fix is a rewrite that serves the app shell for any path:
{\n \"rewrites\": [{ \"source\": \"/(.*)\", \"destination\": \"/index.html\" }]\n}Real files in dist/, such as your JavaScript and CSS, are still served normally; the rewrite only applies when no file matches.
The Watchlist is live. In the last lesson, you’ll look back at what you’ve learned and plan what to learn next.
\n","toc":[{"id":"sec-1","text":"What you’re deploying","level":2},{"id":"sec-2","text":"Option 1: import from GitHub (recommended)","level":2},{"id":"sec-3","text":"Option 2: the Vercel CLI","level":2},{"id":"sec-4","text":"Environment variables","level":2},{"id":"sec-5","text":"Routing on a static host","level":2}],"takeaways":["A Vite app builds to static files in dist/, which Vercel detects automatically with the Vite preset (vite build, output dist).","Importing a GitHub repository gives you a production deployment on every push to main and a preview URL for every other branch and pull request.","The Vercel CLI deploys from your terminal; vercel creates a preview and vercel --prod deploys to production.","Only variables prefixed VITE_ reach browser code, and they are public, so never put secrets in them.","A single-page app with client-side routes needs a rewrite to index.html; the Watchlist, with one page, doesn’t."],"further":[{"title":"Vite on Vercel","url":"https://vercel.com/docs/frameworks/frontend/vite"},{"title":"Vercel CLI overview","url":"https://vercel.com/docs/cli"},{"title":"Deploying a Static Site (Vite)","url":"https://vite.dev/guide/static-deploy"},{"title":"Env Variables and Modes (Vite)","url":"https://vite.dev/guide/env-and-mode"}],"quiz":[{"q":"You import the Watchlist repository into Vercel. What does Vercel run, and what does it serve?
","options":[{"text":"It runsnpm run dev and keeps the dev server running for visitors.","why":"The dev server is for local development only. Production serves optimized static files."},{"text":"It installs dependencies, runs the build (vite build), and serves the static files in dist/.","why":"Correct. The Vite preset knows the build command and output folder, so the defaults just work."},{"text":"It uploads your src/ folder and the browser compiles the JSX.","why":"Browsers can’t run JSX. The build step compiles and bundles everything before anything is served."},{"text":"It serves index.html from the project root with no build step.","why":"That root index.html points at /src/main.jsx, which only works through Vite. The built dist/index.html is what gets served."}],"answer":1},{"q":"You open a pull request that restyles the filter bar. With the GitHub integration set up, what happens?
","options":[{"text":"Nothing until you merge, because Vercel only builds main.","why":"Vercel builds every pushed branch. Only the production URL waits for main."},{"text":"The production site updates immediately with the unmerged changes.","why":"Production is only updated from the production branch (main), so unfinished work doesn’t reach real users."},{"text":"Vercel asks you to runvercel --prod locally.","why":"The Git integration deploys automatically; the CLI is an alternative, not a required step."},{"text":"Vercel builds the branch and posts a unique preview URL on the pull request, leaving production unchanged.","why":"Correct. Preview deployments let you and reviewers click through the change before merging."}],"answer":3},{"q":"Your app reads import.meta.env.VITE_TMDB_KEY to call a movie API. Which statement is true?
import.meta.env.VITE_… with the literal value during the build. There’s no runtime fetch."},{"text":"The prefix is optional; any environment variable is available as import.meta.env.NAME.","why":"Vite only exposes variables with the VITE_ prefix to client code, precisely to prevent accidental leaks."}],"answer":0},{"q":"You add React Router so /watched is its own page. Clicking around works, but refreshing on /watched in production shows a 404. What’s the fix?
public/watched/ folder.","why":"The page is rendered by JavaScript from index.html; a static folder would need its own copy of the whole app."},{"text":"Switch the build to npm run dev on Vercel.","why":"The dev server isn’t a production server. The fix is a routing rule for the static files."},{"text":"Add a rewrite in vercel.json that sends every path to /index.html, so the app loads and the router handles the URL.","why":"Correct. There’s no watched file on the server; the rewrite serves the app shell for any path and lets client-side routing take over."}],"answer":2}],"exercise":{"kind":"order","items":["build-preview","commit","push","import","deploy","branch-preview","merge"],"title":"Ship the Watchlist","prompt":"Put these steps in order: from a working app on your laptop to a live production site, then shipping one more change safely through a preview deployment.
\n","hints":["Check the production build on your own machine before anything leaves it.","Vercel imports a repository, so the code has to be on GitHub first.","A change on a branch gets a preview URL; production only changes when main does."],"explanation":"You verify the real build locally with npm run build and npm run preview, commit, and push to GitHub so Vercel has a repository to import. Importing detects Vite (vite build, output dist), and the first deploy gives you a production URL. After that, changes go on a branch: the pull request gets its own preview URL to check, and merging into main triggers the production deployment.
npm run build and npm run preview and click through the app locally","commit":"Commit the working app with Git","push":"Create a GitHub repository and git push -u origin main","import":"In Vercel, Add New → Project and import the repository (preset: Vite, output: dist)","deploy":"Click Deploy and open the production URL on your phone","branch-preview":"Restyle the filter bar on a branch, open a pull request and check its preview URL","merge":"Merge the pull request into main so production updates"}},"words":712,"readMinutes":3}