Building for production

What a build step does

While you work, npm run dev serves your source files almost as they are, so changes appear instantly. Real users need something different: as few and as small files as possible, which their browser can keep (cache) for a long time. The build step makes that version. You set up Vite and npm scripts in the intermediate module on tools; here you use them for real.

npm run build and the dist folder

npm run build
# runs "vite build" (see the scripts in package.json)

# the result:
dist/
  index.html
  favicon.svg
  assets/
    index-B3x9kQ1a.js
    index-D8fL2pZc.css

dist is generated. Never edit files in it by hand: change the source and build again. The Vite starter already lists dist in .gitignore, because the host builds it again from your code. Why do hashed names help? The host can tell the browser "keep the files in assets for a year". When you change your code, the build makes new names, so the browser downloads the new files. index.html itself is not cached for long, so it always points to the newest hashed files.

Preview the build on your computer

npm run build
npm run preview
# serves the dist folder, usually at http://localhost:4173

Environment variables in Vite

Some values change between your laptop and the live site, such as the address of an API. Keep them in .env files and read them with import.meta.env. Vite only exposes variables whose names start with VITE_ to your browser code.

// .env.production contains:  VITE_API_URL=https://api.example.com
const apiUrl = import.meta.env.VITE_API_URL;

console.log(import.meta.env.MODE); // "development" or "production"
if (import.meta.env.DEV) {
  console.log("Extra logs only while developing");
}

Base path: hosting in a subfolder

By default the built page loads /assets/... from the root of the domain. If your site will live at https://asha.github.io/expense-tracker/, the files are really under /expense-tracker/, so the page stays blank until you tell Vite the base path.

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  base: "/expense-tracker/", // starts and ends with /
});

Check the size, then check everything else

After a build, Vite prints every file with its size and its gzip size (gzip is the compressed size that actually travels). On a cheap phone on mobile data, a large JS file is slow. Look for one huge file, a big library used for one small job, and images of several MB. The fixes are the ones from the quality module: compress images, lazy load, import only what you use, and split rarely used pages with dynamic import().

• Lighthouse (DevTools, Lighthouse panel) on the preview, in mobile mode: fix every red item.
• No broken links: click every menu link and every project link.
• A favicon shows in the browser tab.
• A friendly 404.html page with a link back home.
• A title and meta description on every page, plus Open Graph tags so links look good on WhatsApp and LinkedIn.
• No errors in the Console, and it works on a real phone.
• No secrets in the build: search the dist folder for words like "secret" and "key".