Deploying React AppsEntry 6 of 11

Building for Production

The build command compiles, bundles, minifies, and tree-shakes the app into static files ready to deploy.

Notes

  • Vite: npm run build outputs to dist/ (Create React App used build/).
  • Output: index.html, plus hashed JS/CSS files in assets/ (e.g. index-a1b2c3.js). Lazy-loaded pages appear as separate chunks.
  • Hashed file names let hosts cache assets forever; a new build produces new names.
  • npm run preview serves the production build locally for a final check.
  • Development-only code (React's dev warnings, StrictMode double effects) is removed.

What / Why / When

What

Production-optimized output.

Why

Far smaller and faster than the dev server.

When

Before every deploy.

Code compare

React
npm run build    # → dist/npm run preview  # test the build locally
Angular
ng build         # production is the default configuration

Angular's build also enforces budgets (angular.json) and warns when bundles grow too large.

Quick reference

TaskReact (Vite)Angular
Buildnpm run buildng build
Outputdist/dist/<project>/browser/
Preview locallynpm run previewnpx http-server dist/<project>/browser
Bundle limitsPlugins (e.g. rollup-plugin-visualizer)Built-in budgets