Deployment
Learn how to create an optimized production build of a React app and deploy it to a static host like Vercel or Netlify, plus a pre-deploy checklist.
Introduction
Everything up to this point has run in a local development server, which prioritizes fast feedback (hot reloading, unminified error messages) over speed for end users. Deployment is the process of turning that project into an optimized set of static files and putting them somewhere the whole world can reach.
This final lesson covers building a React app for production, understanding exactly what that build produces, deploying it to a static host, revisiting environment variables in a production context, and a short checklist to run through before every deploy.
- How to create an optimized production build with npm run build.
- What the resulting build output actually contains.
- How to deploy a React app to a static host like Vercel or Netlify by connecting a Git repository.
- How environment variables work in production, and a checklist to run before every deploy.
Creating a Production Build
Every modern React setup (Vite, Create React App, etc.) includes a build script that compiles, bundles, and optimizes your entire app into static files ready to be served by any web server.
npm run buildThis command does considerably more than your development server does on the fly. It minifies JavaScript and CSS, removes development-only warnings and dead code, bundles and splits your code into optimized chunks, and hashes filenames for effective long-term browser caching.
Minification
Variable names are shortened and whitespace removed, dramatically shrinking file sizes.
Dead Code Removal
Development-only warnings and unused code paths are stripped out.
Bundling & Splitting
Your code and dependencies are combined into optimized chunks, respecting any lazy-loaded boundaries you defined.
Content Hashing
Output filenames include a hash of their content, so browsers can cache them aggressively and safely.
Understanding the Build Output
Running the build produces a folder — typically named `dist` (Vite) or `build` (Create React App) — containing everything needed to serve the app: a single `index.html` plus a handful of optimized, hashed JavaScript and CSS files.
dist/
index.html
assets/
index-4f9a2b.js
index-8c3d11.css
logo-a92ff0.svgNotice this is entirely static — plain HTML, CSS, and JavaScript files, with no server-side rendering step or Node process required to serve them. Any static file host or basic web server can serve this folder directly to visitors.
Before deploying, most tooling provides a way to serve the production build locally to sanity-check it — for example, `npm run preview` with Vite. This catches build-specific issues that never show up in the development server.
npm run build
npm run previewDeploying to a Static Host
Because the build output is just static files, React apps deploy well to static hosting platforms. Two of the most popular are Vercel and Netlify, and both support the same simple workflow: connect a Git repository, and the platform builds and deploys automatically on every push.
▲ Vercel
Connect a GitHub/GitLab/Bitbucket repo; Vercel detects the framework, runs the build command, and deploys the output automatically.
Netlify
Similarly connects to a Git repository, running your build command and publishing the resulting folder to a global CDN.
Continuous Deployment
Once connected, every push to your main branch triggers a fresh build and deploy — no manual upload required.
Preview Deployments
Both platforms typically create a unique preview URL for every pull request, useful for reviewing changes before merging.
1. Push your project to a GitHub (or GitLab/Bitbucket) repository.
2. Sign in to Vercel or Netlify and choose "Import Project" / "Add new site."
3. Select the repository.
4. Confirm the build command (npm run build) and output directory (dist or build).
5. Deploy — the platform builds your app and serves it from a generated URL.Environment Variables in Production
As covered in the Environment Variables lesson, values like API base URLs differ between development and production. Static hosts let you configure these in their dashboard, and they get baked into the build at build time — remember that anything exposed this way ends up visible in the shipped JavaScript, so only non-secret, client-safe values belong here.
VITE_API_BASE_URL=https://api.myapp.comJust as in development, any variable exposed to the client bundle (prefixed with VITE_ or REACT_APP_, depending on your tooling) is visible to anyone who opens the browser's dev tools. Real secrets — database credentials, private API keys — must stay on a server and never be embedded in a frontend build.
Pre-Deploy Checklist
A short checklist before every deploy catches most embarrassing mistakes before real users see them.
- Remove or guard stray console.log statements left over from debugging.
- Confirm environment variables are set correctly for the production environment, not pointing at local or staging services.
- Run npm run build and check for warnings or errors in the output.
- Run npm run preview (or equivalent) and click through the app's main flows against the production build.
- Double-check that no secrets are exposed in client-side environment variables or committed source code.
Running through this checklist takes only a few minutes and catches the most common causes of "it worked on my machine" surprises after deployment.
Common Mistakes
- Deploying straight from the development server output instead of running a proper production build.
- Forgetting to set production environment variables, causing the deployed app to call the wrong API.
- Never testing the production build locally, only discovering build-specific bugs after users hit them.
- Committing secrets into a .env file that gets pushed to a public repository.
- Assuming a static host handles client-side routing correctly without configuring a fallback to index.html for deep links.
Best Practices
- Always run and sanity-check the actual production build before deploying, not just the dev server.
- Keep environment-specific configuration out of source code and in your hosting platform's environment variable settings.
- Use continuous deployment from Git so every change goes through the same consistent build process.
- Take advantage of preview deployments to review changes before they reach your main branch.
- Run through a short pre-deploy checklist every time, even for small changes.
Frequently Asked Questions
Do I need a special server to host a React app?
No. The production build is static HTML, CSS, and JavaScript, so any static file host or basic web server works — no Node.js process is required just to serve the files.
What is the difference between dist and build folder names?
It is purely a tooling convention — Vite outputs to dist by default, while Create React App outputs to build. Check your hosting platform's settings match whichever your tool produces.
Why does my app break on refresh when deployed, but not locally?
This usually means the host is not configured to redirect all paths to index.html for client-side routing. Most static hosts, including Vercel and Netlify, offer a simple rewrite rule to fix this.
Can I preview my production build before deploying it?
Yes — tools like Vite provide a preview command (npm run preview) that serves your built dist folder locally, letting you sanity-check the exact output that would be deployed.
Is Vercel or Netlify better?
Both are excellent, well-supported choices for deploying React apps with very similar workflows. The right choice often comes down to team preference, pricing, or specific platform features rather than one being categorically better.
Key Takeaways
- npm run build produces an optimized, minified, static bundle ready for production.
- The build output is a folder of plain HTML, CSS, and JS that any static host can serve.
- Vercel and Netlify both deploy automatically from a connected Git repository on every push.
- Environment variables configure production behavior but must never carry real secrets into the client bundle.
- A short pre-deploy checklist — no stray logs, correct env vars, a tested production build — prevents most deployment surprises.
Summary
Deployment turns a local project into something real users can open in a browser: a production build strips out development overhead and produces a small set of static files, and a host like Vercel or Netlify serves those files to the world, rebuilding automatically every time you push to Git.
In this lesson, you learned to create a production build, understood exactly what that build contains, connected a deployment to a static host, revisited environment variables for production, and picked up a pre-deploy checklist worth running every time.
- You can build and preview an optimized production version of a React app.
- You can deploy a React app to a static host by connecting a Git repository.
- You understand how environment variables work safely in production.
- You have a repeatable pre-deploy checklist to catch mistakes before users do.
What's Next After This Course
Congratulations on completing all 60 lessons of this React curriculum — from the very first component to a deployed production app. That is a genuinely complete foundation, and it opens the door to several natural next steps depending on where you want to go.
▲ Next.js
Learn a full-stack React framework with built-in routing, server-side rendering, and API routes — a natural next step for production-grade apps.
TypeScript
Add static typing to your React components and props, catching a whole category of bugs before they ever run.
Testing with Jest & React Testing Library
Learn to write automated tests for your components, giving you confidence to change code without breaking things silently.
Portfolio Projects
Apply everything you have learned to a handful of original, complete projects — the best way to cement these skills and show them to others.
Whichever direction you choose next, the fundamentals from this course — components, state, hooks, routing, data fetching, and deployment — will carry directly into it. Well done, and happy building.