Building and deploying

The npm run dev development server is only for you. For others to see the app, you build it: Vite turns JSX into plain JavaScript, bundles and minifies the files and puts the result into dist/. These are static files — HTML, CSS, JavaScript and images — that can be put on any host without Node.js on the server.

Building

In the blog project folder run:

npm run build

The terminal lists the files with their sizes, and a dist/ folder appears in the project:

dist/
├── assets/
│   ├── index-B7xQ2kLm.js
│   └── index-Dk3fA9pZ.css
├── index.html
└── vite.svg

The odd parts of the names are content hashes. If a file changes, so does its name, and browsers do not show a stale cached version.

Checking before publishing

The built site can be opened locally:

npm run preview

Open http://localhost:4173 — this is exactly what users will see. Go through the pages and make sure everything works.

Environment variables

It is better not to hard-code the API address but to set it in a .env file at the project root:

VITE_API_URL=https://jsonplaceholder.typicode.com

In code the value is read through import.meta.env:

// src/components/PostList.jsx
const url = `${import.meta.env.VITE_API_URL}/posts`;

Only variables with the VITE_ prefix reach the code. For the build you can add a separate .env.production file. The values are inserted at build time and visible to anyone who opens the page's code, so secret keys must never go here.

Publishing

Services like Netlify and Vercel run the build themselves on every repository update.

Routes on the host

While you follow links, React Router changes the addresses. But if you reload the page /posts/7, the browser asks the server for a file at that address, and there is none. The server must be set up to return index.html for any unknown address. On Netlify you create a public/_redirects file with the line:

/*  /index.html  200

Other hosts call the same setting a rewrite or an SPA fallback.

Common mistake

If you open dist/index.html with a double click, the page is blank: the browser loads files from a file:// address, and the script paths do not work. A built site is always opened through a web server — locally with npm run preview.