09e1bec9bb
Fixes #68. - Bar switcher and stats page get a low-contrast "wutzcalc <git-sha>" footer at the bottom (VersionFooter component, shared). - Admin panel gets a fuller Diagnose section: version, user agent, screen resolution + device pixel ratio, viewport size, browser language. Version is the short git commit sha, baked in at build time via vite.config.ts define (falls back to "dev" if .git is unavailable at build time, e.g. a tarball/CI-artifact deploy) - matches how deploys actually run (pnpm build from a git checkout, per deploy/wutzcalc.service), but stays defensive rather than failing the build. pnpm --filter client typecheck and build both clean.
71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import { defineConfig } from 'vite';
|
|
import preact from '@preact/preset-vite';
|
|
import legacy from '@vitejs/plugin-legacy';
|
|
import { resolve } from 'node:path';
|
|
import { execSync } from 'node:child_process';
|
|
|
|
// 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}`;
|
|
|
|
// #68: baked into the bundle at build time so the client can show "which
|
|
// build is this" for bug triage without a server round-trip. Deploys run
|
|
// `pnpm build` from a git checkout (see deploy/wutzcalc.service), but this
|
|
// stays defensive against a tarball/CI-artifact deploy with no `.git` —
|
|
// falls back to 'dev' rather than failing the build.
|
|
function appVersion(): string {
|
|
try {
|
|
return execSync('git rev-parse --short HEAD', { cwd: __dirname }).toString().trim();
|
|
} catch {
|
|
return 'dev';
|
|
}
|
|
}
|
|
|
|
export default defineConfig({
|
|
define: {
|
|
__APP_VERSION__: JSON.stringify(appVersion()),
|
|
},
|
|
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'),
|
|
stats: resolve(__dirname, 'stats.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,
|
|
},
|
|
},
|
|
});
|