Build & Deploy — Programuoki

Code

vite.config.ts + vite-env.d.ts — config and types

Two files in the code column, as tabs: vite.config.ts (how Vite serves and bundles) and src/vite-env.d.ts (the types for your env vars). vite.config.ts controls how Vite serves (dev) and bundles (build).

Three parts:

server — dev server settings (port 5173, open the browser).
build — outDir: 'dist' (where the bundle lands) and sourcemap: true (so production stack traces are readable).
define — inline a constant at build time (e.g. a version number for an About box).

The key part — loadEnv and the VITE_ prefix. Vite exposes to the browser only vars starting with VITE_:

import.meta.env.VITE_NASA_API_KEY;   // ✅ available in the browser
import.meta.env.DATABASE_PASSWORD;   // ❌ undefined — no VITE_ prefix

That's a deliberate guard rail. Name a var without VITE_ and you can't get it into the bundle even if you tried — Vite keeps it build-only. So the VITE_ prefix forces a conscious decision: "yes, this one is safe to show the browser".

One more detail — typing the vars. src/vite-env.d.ts declares which VITE_ vars you expect:

interface ImportMetaEnv {
  readonly VITE_NASA_API_KEY: string;
}

That gives you autocomplete AND a compile error if you typo one (VITE_NASA_API_KYE) — instead of a silent undefined at runtime.

Tip. Never commit the .env file to git (it's .gitignored). Instead you commit .env.example with blank or demo values — so others know which vars are needed but don't get your real ones. Standard practice for any project with secrets.

vite.config.ts CREATE

Create this file in ./

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  // Load .env files. Only vars prefixed VITE_ are exposed to the browser —
  // that prefix is a GUARD RAIL: it makes it hard to leak a server secret into
  // the bundle by accident. A var without the prefix stays build-only.
  const env = loadEnv(mode, process.cwd(), '');

  return {
    server: { port: 5173, open: true },
    build: {
      outDir: 'dist',        // `vite build` writes the deployable bundle here
      sourcemap: true,       // ship maps so production stack traces are readable
    },
    define: {
      // Inline a constant at build time (e.g. show the version in an About box)
      __APP_VERSION__: JSON.stringify(process.env['npm_package_version'] ?? '0.0.0'),
    },
  };
});

vite-env.d.ts CREATE

Create this file in src/

/// <reference types="vite/client" />

// Declaring the env vars we use gives us autocomplete AND a compile error
// if we typo one — instead of a silent `undefined` at runtime.
interface ImportMetaEnv {
  readonly VITE_NASA_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}