100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
React 19 & Ecosystem
30 minintermediate

Deployment: Vercel, Netlify, and Static Export

Building a React app is only half the job; getting it reliably in front of users is the other half. Deployment means producing an optimised production build and hosting it so it loads fast and stays available worldwide. Modern platforms like Vercel and Netlify have made this remarkably simple, turning a git push into a globally-distributed, automatically-built deployment with preview environments for every change.

A client-side React app builds to static assets — HTML, JavaScript, CSS — that any static host or CDN can serve. The key configuration concerns are routing (a single-page app needs all paths to serve index.html so client-side routing works), environment variables (build-time only and public in the client bundle, so never secrets), and caching for performance. Framework-based apps add server rendering, which these platforms also support.

This lesson covers producing a production build, deploying to Vercel/Netlify with their git-based workflow, the crucial SPA routing configuration, handling environment variables safely, and the role of CDNs and caching. The goal is a fast, reliable, automatically-deployed app — the bridge between code and users.

Analogy🏏Cricket
🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.
Lesson 31 of 35
0% complete