Skip to content

[BUG] vite.config.ts missing base URL - all asset paths 404 when deployed to a subdirectory #1358

Description

@anshul23102

Description

vite.config.ts does not set the base option. Vite defaults to /, generating asset paths like /assets/main-abc123.js. When the application is served from a subdirectory (e.g., https://example.com/dev-zone/), all asset and chunk URLs are wrong and result in 404 errors, breaking the deployed site.

Steps to Reproduce

  1. Build the project: npm run build.
  2. Serve dist/ from a web server under /dev-zone/ (e.g., using nginx location /dev-zone/).
  3. Open https://<host>/dev-zone/ in a browser.
  4. Observe the browser console is full of 404 errors for /assets/... paths.

Root Cause

Without base configured in vite.config.ts, all built asset URLs are absolute from the domain root.

Impact

App cannot be deployed to any non-root URL path, which is a common requirement on shared hosting or GitHub Pages.

Proposed Fix

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: process.env.VITE_BASE_URL || "/",
});

Set VITE_BASE_URL=/dev-zone/ in the deployment environment.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions