What the Build Actually Does

What you write and what ships are different. JSX is not valid JavaScript and no browser runs it. A build step transforms it, bundles your files together, removes what is unused, and writes files with hashed names so they can be cached forever and still update when you change them.

Development mode also strips out React's warnings, which is why the production bundle is much smaller and noticeably faster.

Environment variables are baked in at build time, not read at run time. Changing one and reloading the page does nothing at all. You have to build again.

And they are not secret. A variable exposed to the browser is in the bundle, readable by everyone. The prefix your tool requires, such as VITE_, marks a variable as public rather than protecting it.

✦ Test the production build before deploying it

Run the build and preview it locally at least once. Things that only appear there are common: a case-sensitive import that worked on a Mac and fails on the server, a dependency that was only ever installed as a dev dependency, or a warning that was hiding a real error behind it.