wutzcalc/client/vite.config.ts
iris b07c7c3602 dev: vite proxy for '/admin' swallows the admin page itself, not just its API calls
Fixes the reported /admin MIME-type / NS_ERROR_CORRUPTED_CONTENT breakage on the
Vite dev server. The proxy matched by string prefix, so '/admin' also caught
'/admin' and '/admin.html' (the page requests), forwarding them to the backend
instead of letting Vite serve its own dev-mode HTML. In dev the backend only has
a stale production build (or none) to answer with, so the page loaded referencing
hashed prod asset paths that don't exist in Vite's dev module graph — Vite's dev
server then served its SPA-fallback HTML for those asset requests instead of JS.

Narrowed the proxy to the three backend-owned endpoints under /admin
(api/login/logout) so the bare page routes go through Vite's own dev serving.
2026-07-29 20:57:55 +02:00

53 lines
2 KiB
TypeScript

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import legacy from '@vitejs/plugin-legacy';
import { resolve } from 'node:path';
// The dev-server proxy target — same default (3000) as the server's own
// `process.env.PORT ?? 3000` in server/src/index.ts. Override with
// `WUTZ_SERVER_PORT` when running `dev:server` on a non-default port, e.g.:
// PORT=4000 pnpm dev:server
// WUTZ_SERVER_PORT=4000 pnpm dev:client
const serverTarget = `http://localhost:${process.env.WUTZ_SERVER_PORT ?? 3000}`;
export default defineConfig({
plugins: [
preact(),
legacy({
targets: ['ios >= 12', 'safari >= 12'],
modernPolyfills: true,
renderLegacyChunks: true,
}),
],
build: {
target: 'es2017',
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
admin: resolve(__dirname, 'admin.html'),
},
},
},
server: {
port: 5173,
proxy: {
'/api': serverTarget,
'/healthz': serverTarget,
// NOT a bare '/admin' prefix: that would also swallow the /admin and
// /admin.html *page* requests themselves (and, since Vite's proxy
// matches by string prefix, they do — '/admin' matches '/admin.html'
// too), forwarding them to the backend instead of letting Vite serve
// its own dev-mode admin.html. In dev the backend only has a stale
// production build to fall back on (or nothing, if `client` was never
// built), so the page ends up loaded with hashed prod asset paths that
// don't exist in Vite's dev module graph — Vite's dev server then
// answers those with its SPA-fallback HTML instead of JS, which is
// exactly the "wrong MIME type" / NS_ERROR_CORRUPTED_CONTENT failure
// reported for the admin page. Only the backend-owned endpoints need
// to cross the proxy.
'/admin/api': serverTarget,
'/admin/login': serverTarget,
'/admin/logout': serverTarget,
},
},
});