All 5 Build Tools & Bundlers (Vite, Webpack & CRA) questions
More in Build Tools & Bundlers (Vite, Webpack & CRA)
What does a build tool like Vite or Webpack actually do for a React project? Why has Vite become more popular than Create React App for starting new React projects? What is code minification and why does a build tool perform it automatically? How do build tools split a React app into smaller chunks for faster page loads?
Advertisement
React › Build Tools & Bundlers (Vite, Webpack & CRA)

What is the difference between a development server and a production build in a React project?

Beginner

Answer

A development server, started with a command like npm run dev, shows helpful error messages and updates the page instantly as you save changes, but the code is not optimized for speed. A production build, created with npm run build, produces smaller and faster files that are meant to be uploaded to a real server for actual visitors to use.
npm run dev    // starts a local server for coding, with helpful errors
npm run build  // creates a fast, optimized version ready for real users
Real-world example A developer tests their new feature using npm run dev on their own computer, and once everything works correctly, runs npm run build to create the final files that get uploaded to the live website.

Common follow-ups: Why should you never deploy the development version of a React app to real users?;What files does the production build actually create?

Deployment & Production Builds;Testing
All 5 Build Tools & Bundlers (Vite, Webpack & CRA) questions