Development and production builds

npm run dev starts the development server. It favors fast feedback, source maps, and useful warnings while you edit.

Development behavior is not the deployed application. The build may reveal an import that differs only by filename case, a missing environment value, or code that cannot be bundled.

Create the production assets with:

npm run build

Vite writes optimized files to dist/. Then inspect them locally:

npm run preview

Open the URL Vite prints, usually http://localhost:4173/. You are now looking at the built files, not the live dev server.

The preview command serves the built files from dist/. It does not recreate your real hosting platform, so test routing, headers, and server features in the deployed environment too.

React can also do extra development work. Strict Mode may render components or rerun Effects to expose impure code and missing cleanup. Do not “fix” that by depending on production running fewer checks. Fix the component so repeating the setup is safe.

The dist/ folder is what you upload to static hosting. File names include content hashes so browsers can cache safely. If you change one component, only the affected bundles change.

Environment variables also behave differently. Values prefixed with VITE_ are available in client code at build time. Missing variables often show up only after npm run build, not during dev.

Source maps in development map minified production code back to your original files when you debug a built bundle in the browser.

Before publishing, run the build, open the preview, check the browser console, and test one critical interaction. A page working in an already-open development tab is not enough evidence.