97 lines
3.6 KiB
JavaScript
97 lines
3.6 KiB
JavaScript
import path from 'node:path';
|
|
import react from '@vitejs/plugin-react';
|
|
import { defineConfig } from 'vite';
|
|
|
|
// The reference app resolves `@/*` through the Base44 Vite plugin. This demo is
|
|
// backend-free, so the alias is declared directly.
|
|
// The API host the dev server forwards to. Only read here; nothing in client
|
|
// code names a backend host.
|
|
const PROXY_TARGET = process.env.VITE_API_PROXY_TARGET || 'https://mcp.krowforce.com';
|
|
|
|
/**
|
|
* One proxy entry per path prefix, all pointing at the same backend.
|
|
*
|
|
* `secure: true` keeps certificate verification on — the target is a real host
|
|
* with a real certificate, and turning verification off would hide a genuine
|
|
* TLS failure behind a working-looking proxy.
|
|
*
|
|
* `changeOrigin` rewrites the Host header to the target, which the backend's
|
|
* TLS termination requires to route the request at all.
|
|
*/
|
|
function proxyRoutes(prefixes) {
|
|
return Object.fromEntries(prefixes.map((prefix) => [prefix, {
|
|
target: PROXY_TARGET,
|
|
changeOrigin: true,
|
|
secure: true,
|
|
configure: (proxy) => {
|
|
proxy.on('error', (err, _req, res) => {
|
|
console.error('[vite proxy error]:', err.message);
|
|
if (res && res.writeHead && !res.headersSent) {
|
|
res.writeHead(502, { 'Content-Type': 'application/json' });
|
|
res.end(JSON.stringify({
|
|
error: `Backend unreachable (${PROXY_TARGET}): ${err.message}`,
|
|
}));
|
|
}
|
|
});
|
|
},
|
|
}]));
|
|
}
|
|
|
|
export default defineConfig({
|
|
plugins: [react()],
|
|
resolve: {
|
|
alias: {
|
|
'@': path.resolve(import.meta.dirname, './src'),
|
|
},
|
|
},
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
// Split the heavy libraries out of the app bundle. They change far less
|
|
// often than app code, so browsers keep them cached across deploys.
|
|
manualChunks: {
|
|
react: ['react', 'react-dom', 'react-router-dom'],
|
|
charts: ['recharts'],
|
|
motion: ['framer-motion'],
|
|
markdown: ['react-markdown'],
|
|
canvas: ['html2canvas'],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
server: {
|
|
// Expose server over network (0.0.0.0)
|
|
host: true,
|
|
// Honor a port assigned by the environment; fall back to Vite's default.
|
|
port: process.env.PORT ? Number(process.env.PORT) : 5173,
|
|
|
|
/**
|
|
* Proxy the API so the browser only ever talks to one origin.
|
|
*
|
|
* This exists for the session cookie. The cookie is HttpOnly with
|
|
* SameSite=Lax, and a Lax cookie is not sent on a cross-site subresource
|
|
* request — which is exactly what `fetch('http://127.0.0.1:8080/...')` from
|
|
* a page served by `http://localhost:5173` is, because a browser treats
|
|
* those two as different sites. Every request after login would arrive
|
|
* without the cookie and be answered 401.
|
|
*
|
|
* The alternatives are both worse. SameSite=None would send the cookie on
|
|
* genuine cross-site requests too, which is the CSRF hole Lax closes, and
|
|
* it requires Secure — so it cannot work over plain HTTP on localhost at
|
|
* all. Widening CORS with credentials would keep the cross-site problem and
|
|
* add a second one.
|
|
*
|
|
* browser → localhost:5173/api/v1 → this proxy → 127.0.0.1:8080/api/v1
|
|
*
|
|
* Same origin from the browser's point of view, so the cookie is a
|
|
* first-party cookie, CORS never enters into it, and nothing in the React
|
|
* code names a backend host.
|
|
*
|
|
* Production serves the built assets and the API from one origin (see
|
|
* nginx.conf), so this is a development-only shim for a property the
|
|
* deployed app has for free.
|
|
*/
|
|
proxy: proxyRoutes(['/api', '/health']),
|
|
},
|
|
});
|