Fix: Vite preview not working error

The ‘Vite preview not working’ error occurs when the Vite preview server fails to start or serve the built application, typically due to missing build files, server configuration issues, or port conflicts.

How the Error Happens

❌ Error Scenario:

# ❌ This causes the error
npm run preview
# Error: Preview server failed to start or serve built files

✅ Quick Fix - Resolve Vite Preview Issues

Solution 1: Build Before Preview

# ✅ Ensure build is completed first
npm run build

# ✅ Then run preview
npm run preview

Solution 2: Check Dist Directory

# ✅ Verify build output exists
ls dist/
# If empty or missing, rebuild
npm run build

Solution 3: Specify Port and Host

# ✅ Run preview with specific port
vite preview --port 4173

# ✅ Bind to all hosts
vite preview --host 0.0.0.0

# ✅ In package.json
{
  "scripts": {
    "preview": "vite preview --port 4173 --host"
  }
}

Solution 4: Check Vite Configuration

// ✅ In vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist', // ✅ Ensure correct output directory
    rollupOptions: {
      output: {
        dir: 'dist' // ✅ Consistent output location
      }
    }
  },
  preview: {
    port: 4173,
    host: true
  }
});