← Back to React Course | Chapter 14: Performance & Production Deployment | Lesson 8 of 13

Creating a Production Build

Creating a production build is like packing your finished dish to go — trimming away the messy kitchen prep and sending out just the polished, ready-to-eat version.

In this page:

  1. Why Development Mode Isn't Production-Ready
  2. What the Build Process Actually Does
  3. Previewing the Production Build Locally

Why Development Mode Isn't Production-Ready

The development server (npm run dev) prioritizes fast rebuilds and helpful warnings/error messages over runtime speed, making it noticeably slower and larger than what real users should receive. A production build strips this dev-only overhead and applies real optimizations like minification.

Note: Development mode is optimized for YOUR iteration speed while coding; production mode is optimized for your USERS' experience.

Warning: Deploying the raw development server to real users means slower load times and exposed, unminified source code, along with dev-only warnings running unnecessarily.

Example: Dev Server vs. Production Build Output

bash 
$ npm run dev
  VITE v5.0.0  ready in 320 ms
  ➜  Local:   http://localhost:5173/
# unminified, includes dev warnings, rebuilds instantly on save

$ npm run build
vite v5.0.0 building for production...
✓ 34 modules transformed.
dist/assets/index-4f3a2b1c.js   142.31 kB │ gzip: 45.62 kB
# minified, dev warnings stripped, optimized for users

⚠️ Run this command in your terminal.

What the Build Process Actually Does

Running the build command bundles all your JavaScript/CSS into optimized files, minifies them (removing whitespace and shortening variable names), and often splits code into smaller chunks for faster initial loading — all producing a static output folder (dist or build) ready to be served.

Note: The output folder from a build is just static files (HTML/CSS/JS) — it can be hosted anywhere that serves static files, no special server logic required for a plain React SPA.

Warning: Committing the build output folder to version control is usually unnecessary and can cause confusing merge conflicts — most projects .gitignore it and rebuild fresh for each deployment.

Example: Running the Build Command

bash 
$ npm run build
vite v5.0.0 building for production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB
dist/assets/index-4f3a2b1c.js   142.31 kB │ gzip: 45.62 kB
dist/assets/index-9c8d7e6f.css    3.21 kB │ gzip:  1.10 kB

$ ls dist
assets  index.html

⚠️ Run this command in your terminal.

Previewing the Production Build Locally

Before deploying, it's important to actually run and click through the production build locally, since some bugs only appear in the optimized/minified version, not in the more forgiving development server. Vite's 'vite preview' command serves the built output locally for exactly this purpose.

Note: Always do at least a quick smoke test of the production build before deploying, especially after significant changes.

Warning: Skipping this step and deploying straight from 'it worked in dev mode' can let production-only bugs (like environment variable misconfigurations) reach real users.

Example: Previewing the Build Locally

bash 
$ npm run build
✓ built in 1.2s

$ npm run preview
  ➜  Local:   http://localhost:4173/

⚠️ Run this command in your terminal.

Common Mistakes
  1. Deploying the development server (npm run dev) instead of a real production build — dev servers are slower and not meant for real users.
  2. Not testing the actual production build locally before deploying, missing build-specific bugs that don't show up in dev mode.
  3. Forgetting environment-specific configuration (like API URLs) needs to be set correctly for the production build, not left as development defaults.
Chapter Summary
  • A production build compiles, minifies, and optimizes your app's code for real users, unlike the development server.
  • 'npm run build' (Vite/Create React App convention) generates a static folder of optimized files ready to deploy.
  • Always test the actual production build locally (e.g. via 'vite preview') before deploying it.
  • Production builds strip out development-only warnings and enable optimizations that make apps meaningfully faster.
Browser Support

Build-tool feature — no specific React version requirement beyond what your app itself already needs.

🔒

Chapter Quiz — Complete all 13 topics to unlock

0/13 topics done

Complete these topics first:

← Previous Lesson React as a PWA Next Lesson → Environment Variables in React

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.