Vite development server returns a 404 error for my index.html #13505

matpethst · 2025-05-25T12:48:30Z

matpethst
May 25, 2025

Hi everyone,

I've been trying to get my existing Vanilla JS application (HTML, CSS, JS) to work with Tauri v2 and Vite, but I'm stuck on a persistent issue: The Vite development server returns a 404 error for my index.html when I access the Vite URL directly in the browser. Consequently, the Tauri window remains blank in development mode (npm run tauri dev).

System Environment:

OS: macOS Sonoma 14.6.1
Rust Version: rustc 1.82.0 (f6e511eec 2024-10-15)
Cargo Version: cargo 1.82.0 (8f40fc59f 2024-08-21)
Node Version: (please insert your Node version, e.g., check with node -v)
NPM Version: (please insert your NPM version, e.g., check with npm -v)
@tauri-apps/cli: ^2.5.0 (as per my package.json)
tauri (Rust Crate): 2.5.1 (as per my Cargo.lock)
tauri-build (Rust Crate): 2.2.0 (as per my Cargo.lock)
vite (devDependency): ^5.2.10 (or whatever version is in your package.json, although Vite log showed VITE v6.3.5 - this is a potential conflict I've noted)

Problem Description:
When I run npm run tauri dev, the terminal output shows Vite starting (e.g., on http://localhost:5173/). The Rust part also compiles successfully, and the Tauri application ("visu") launches. However:

The Tauri window remains completely blank.
The developer console in the Tauri window (after isolating other errors) often just shows an empty <html><head></head><body></body></html>, and the network tab is empty.
If I try to access the URL provided by Vite (e.g., http://localhost:5173/ or http://localhost:5173/index.html) directly in a normal web browser (Firefox, Chrome), I receive a Error code: 404 Not Found.

This happens even with an absolutely minimal index.html, style.css, and script.js (without any Tauri-specific imports or code), when Vite is configured to use the src folder as its root.

Minimal Configuration Reproducing the Error:

Project Structure:

Visualisierung/app/Visu/
├── node_modules/
├── src/
│ ├── index.html
│ ├── script.js
│ └── style.css
├── src-tauri/
│ ├── capabilities/
│ │ └── (empty for this test, or a minimal default.json)
│ ├── icons/
│ ├── src/
│ │ └── main.rs (standard from create-tauri-app)
│ ├── build.rs (standard: tauri_build::build())
│ ├── Cargo.toml
│ └── tauri.conf.json
├── vite.config.js
├── package.json
└── package-lock.json

Visualisierung/app/Visu/vite.config.js:
JavaScript

import { defineConfig } from 'vite';

export default defineConfig({
root: 'src',
server: {
port: 5173, // or any other free port
strictPort: true
},
build: {
outDir: '../dist', // Relative to root
emptyOutDir: true
}
});

(Based on and our latest attempts)

Visualisierung/app/Visu/src/index.html (minimal):
HTML

Hello from Vite!

Visualisierung/app/Visu/src/script.js (minimal):
JavaScript

console.log("Minimal script.js loaded");
// No Tauri imports for this pure Vite test

Visualisierung/app/Visu/src-tauri/tauri.conf.json:
JSON

{
"$schema": "https://schema.tauri.app/config/2",
"productName": "visu",
"version": "0.1.0",
"identifier": "com.visu.app",
"build": {
"devUrl": "http://localhost:5173", // Must match Vite port
"frontendDist": "../dist",
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"
},
"app": {
"withGlobalTauri": false,
"windows": [
{
"label": "main",
"title": "visu",
"width": 1200,
"height": 800
}
],
"security": {
"csp": null
// No "capabilities" for this test to isolate the issue
}
},
"bundle": { /* ... standard ... */ }
}

(Based on and our latest adjustments)

Visualisierung/app/Visu/package.json:
JSON

{
"name": "visu",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"tauri": "tauri"
},
"devDependencies": {
"@tauri-apps/cli": "^2.5.0", // or your exact ^2 version
"vite": "^5.2.10" // or your exact v5/v6 version
},
"dependencies": {
"@tauri-apps/api": "^2.5.0" // Even if not used in minimal JS, it's in the project
}
}

(Based on and our Vite additions)

What I've already tried (without success for the Vite 404 error):

Multiple thorough cleanups (cargo clean, deleting node_modules, package-lock.json, target, dist, then npm install).
Various port configurations in vite.config.js and tauri.conf.json.
strictPort: true and false.
Verified paths in index.html (/style.css, /script.js).
Verified root setting in vite.config.js ('src' or './src').
Attempted moving index.html to the project root and adjusting root as a test.
Firewall is disabled.

The strange part is that Vite reports in the terminal that it's "ready" and listening on the port, but then serves a 404 for index.html (and any other file in the src folder) when the URL is accessed in the browser.

Does anyone have an idea what could be the issue with Vite on macOS here, or what else I could check to get Vite to serve the index.html from the src directory correctly? As long as this isn't working, Tauri cannot load the frontend.

Thanks in advance for any help!

FabianLars · 2025-05-25T14:43:53Z

FabianLars
May 25, 2025
Maintainer

does localhost:5173/src work? For me both works (on Windows) but maybe worth a try.

is your project in a workspace? if so, did you try one outside of it as a sanity check?

p.s. since this is unrelated to tauri, you'll probably have better luck asking in the vite community if not done already.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Vite development server returns a 404 error for my index.html #13505

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Vite development server returns a 404 error for my index.html #13505

Uh oh!

matpethst May 25, 2025

Hello from Vite!

Replies: 1 comment

Uh oh!

FabianLars May 25, 2025 Maintainer

matpethst
May 25, 2025

FabianLars
May 25, 2025
Maintainer