333 lines
11 KiB
JavaScript
333 lines
11 KiB
JavaScript
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
import { defineConfig, searchForWorkspaceRoot } from 'vite';
|
|
import react from '@vitejs/plugin-react';
|
|
import { VitePWA } from 'vite-plugin-pwa';
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const useHttps = process.env.VITE_HTTPS === '1';
|
|
const certDir = path.resolve(__dirname, 'certs');
|
|
const keyPath = path.join(certDir, 'key.pem');
|
|
const certPath = path.join(certDir, 'cert.pem');
|
|
|
|
function httpsOptions() {
|
|
if (!useHttps) return false;
|
|
if (!fs.existsSync(keyPath) || !fs.existsSync(certPath)) {
|
|
throw new Error(
|
|
'Missing TLS certs. Run: npm run cert (or ./scripts/generate-cert.sh)',
|
|
);
|
|
}
|
|
return {
|
|
key: fs.readFileSync(keyPath),
|
|
cert: fs.readFileSync(certPath),
|
|
};
|
|
}
|
|
|
|
function truncate(text, max = 500) {
|
|
if (text == null || text === '') return text;
|
|
const s = typeof text === 'string' ? text : String(text);
|
|
if (s.length <= max) return s;
|
|
return `${s.slice(0, max)}… (${s.length} chars)`;
|
|
}
|
|
|
|
function isBinaryContentType(contentType = '') {
|
|
const type = contentType.split(';')[0].trim().toLowerCase();
|
|
if (!type) return false;
|
|
if (type.startsWith('image/')) return true;
|
|
if (type === 'application/octet-stream') return true;
|
|
return false;
|
|
}
|
|
|
|
function formatRequestBody(contentType, buffer) {
|
|
if (!buffer || buffer.length === 0) return '(empty)';
|
|
if (isBinaryContentType(contentType)) {
|
|
const type = contentType.split(';')[0].trim();
|
|
return `(binary ${type}, ${buffer.length} bytes)`;
|
|
}
|
|
return truncate(buffer.toString('utf8'));
|
|
}
|
|
|
|
function formatResponseBody(statusCode, contentType, buffer) {
|
|
if (statusCode === 304) return '(304 no body)';
|
|
if (statusCode === 204 || !buffer || buffer.length === 0) return '(empty)';
|
|
if (isBinaryContentType(contentType)) {
|
|
const type = contentType.split(';')[0].trim();
|
|
return `(binary ${type}, ${buffer.length} bytes)`;
|
|
}
|
|
return truncate(buffer.toString('utf8'));
|
|
}
|
|
|
|
function hasRequestBody(method) {
|
|
return method === 'POST' || method === 'PUT' || method === 'PATCH';
|
|
}
|
|
|
|
// dashgui is a local (symlinked) package with its own nested node_modules.
|
|
// Its nested react/@mui/@emotion copies would otherwise get bundled in,
|
|
// producing a duplicate React instance and "Cannot read properties of null
|
|
// (reading 'useContext')" at runtime. Dedupe forces these to resolve from
|
|
// dashfront's tree. (dashgui's own package.json "exports" map already points
|
|
// the dashgui/* subpaths at its src/, so no alias is needed.)
|
|
const sharedDeps = [
|
|
'react',
|
|
'react-dom',
|
|
'react/jsx-runtime',
|
|
'react/jsx-dev-runtime',
|
|
'react-router',
|
|
'react-router-dom',
|
|
'@emotion/react',
|
|
'@emotion/styled',
|
|
'@mui/material',
|
|
'@mui/icons-material',
|
|
];
|
|
|
|
const sharedResolve = {
|
|
dedupe: sharedDeps,
|
|
alias: {
|
|
'node:module': path.resolve(__dirname, 'src/utils/emptyNodeModule.js'),
|
|
},
|
|
};
|
|
|
|
const sharedServer = {
|
|
// HTTP :4209 — HTTPS :4308 (self-signed; see npm run cert / dev:https)
|
|
port: useHttps ? 4308 : 4209,
|
|
https: httpsOptions(),
|
|
allowedHosts: true,
|
|
fs: {
|
|
allow: [
|
|
searchForWorkspaceRoot(process.cwd()),
|
|
path.resolve(__dirname, '..'),
|
|
],
|
|
},
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:4208',
|
|
changeOrigin: true,
|
|
cookieDomainRewrite: '',
|
|
configure(proxy) {
|
|
proxy.on('proxyReq', (_proxyReq, req) => {
|
|
if (!hasRequestBody(req.method)) return;
|
|
const chunks = [];
|
|
req.on('data', (chunk) => chunks.push(chunk));
|
|
req.on('end', () => {
|
|
const buffer = chunks.length ? Buffer.concat(chunks) : null;
|
|
req._proxyRequestBody = formatRequestBody(
|
|
req.headers['content-type'] ?? '',
|
|
buffer,
|
|
);
|
|
});
|
|
});
|
|
|
|
proxy.on('proxyRes', (proxyRes, req) => {
|
|
const raw = proxyRes.headers['set-cookie'];
|
|
let cookies = raw ? (Array.isArray(raw) ? raw : [raw]) : null;
|
|
// Backend sets Secure; browsers/WebViews on plain HTTP refuse it.
|
|
if (cookies && !useHttps) {
|
|
cookies = cookies.map((c) => c.replace(/;\s*Secure/gi, ''));
|
|
proxyRes.headers['set-cookie'] = cookies;
|
|
}
|
|
|
|
const responseChunks = [];
|
|
proxyRes.on('data', (chunk) => responseChunks.push(chunk));
|
|
proxyRes.on('end', () => {
|
|
const responseBuffer = responseChunks.length
|
|
? Buffer.concat(responseChunks)
|
|
: null;
|
|
const parts = [
|
|
'[vite-proxy]',
|
|
req.method,
|
|
req.url,
|
|
String(proxyRes.statusCode),
|
|
];
|
|
if (hasRequestBody(req.method)) {
|
|
parts.push(`body=${req._proxyRequestBody ?? '(empty)'}`);
|
|
}
|
|
if (cookies?.length) {
|
|
parts.push(`set-cookie=${cookies.map((c) => c.split(';')[0]).join(',')}`);
|
|
}
|
|
parts.push(formatResponseBody(
|
|
proxyRes.statusCode,
|
|
proxyRes.headers['content-type'] ?? '',
|
|
responseBuffer,
|
|
));
|
|
console.log(parts.join(' '));
|
|
});
|
|
});
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
function nginxHeadersPreviewPlugin() {
|
|
return {
|
|
name: 'nginx-headers-preview',
|
|
configurePreviewServer(server) {
|
|
server.middlewares.use((req, res, next) => {
|
|
const url = (req.url || '').split('?')[0];
|
|
|
|
// Never touch API requests (proxied to backend)
|
|
if (url.startsWith('/api')) {
|
|
return next();
|
|
}
|
|
|
|
// --- Security Headers (from deploy/nginx-dashfront.conf lines 72-76) ---
|
|
res.setHeader('X-Content-Type-Options', 'nosniff');
|
|
res.setHeader('X-Frame-Options', 'SAMEORIGIN');
|
|
res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
|
|
res.setHeader('Permissions-Policy', 'camera=(self), microphone=(), geolocation=()');
|
|
|
|
// --- Caching Rules (from deploy/nginx-dashfront.conf lines 129-166) ---
|
|
if (/^\/(sw\.js|registerSW\.js|workbox-[a-f0-9]+\.js)$/.test(url)) {
|
|
// Zero caching for Service Worker & registration scripts
|
|
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
|
|
res.setHeader('Pragma', 'no-cache');
|
|
res.setHeader('Expires', '0');
|
|
} else if (/^\/(manifest\.webmanifest|favicon\.svg|icons\/.*)$/.test(url)) {
|
|
// 1 hour for web manifest & icons
|
|
res.setHeader('Cache-Control', 'public, max-age=3600');
|
|
res.setHeader('Vary', 'Accept-Encoding');
|
|
} else if (url.startsWith('/assets/')) {
|
|
// 1 year immutable for hashed assets
|
|
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
|
|
res.setHeader('Vary', 'Accept-Encoding');
|
|
} else if (url.endsWith('.wasm')) {
|
|
// 1 year immutable for WASM binaries
|
|
res.setHeader('Content-Type', 'application/wasm');
|
|
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
|
|
} else if (url === '/' || url === '/index.html' || !path.extname(url)) {
|
|
// HTML5 SPA Entry / Fallback: Zero caching
|
|
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
|
|
res.setHeader('Pragma', 'no-cache');
|
|
res.setHeader('Expires', '0');
|
|
}
|
|
|
|
next();
|
|
});
|
|
},
|
|
};
|
|
}
|
|
|
|
export default defineConfig(({ command }) => ({
|
|
resolve: sharedResolve,
|
|
build: {
|
|
emptyOutDir: false,
|
|
rolldownOptions: {
|
|
output: {
|
|
strictExecutionOrder: true,
|
|
codeSplitting: {
|
|
groups: [
|
|
// Split the lazy routes into a handful of per-section chunks
|
|
// (not one tiny chunk per route). Each section chunk groups the
|
|
// section's pages together with the component trees used only by
|
|
// that section, so first navigation to /artikel, /auftrag, …
|
|
// loads just that section's code. Modules shared across sections
|
|
// (api/, automats/, utils/, generic components/) fall out into a
|
|
// common chunk by the bundler automatically.
|
|
{
|
|
priority: 20,
|
|
name: 'appArticleComponents',
|
|
test: /\/dashfront\/src\/components\/article\//,
|
|
includeDependenciesRecursively: false,
|
|
},
|
|
{
|
|
priority: 10,
|
|
name: 'appComponents',
|
|
test: /\/dashfront\/src\/components\//,
|
|
includeDependenciesRecursively: false,
|
|
},
|
|
{
|
|
priority: 5,
|
|
name: 'app',
|
|
test: /\/dashfront\/src\//,
|
|
includeDependenciesRecursively: false,
|
|
},
|
|
{
|
|
priority: 150,
|
|
name: 'react-vendor',
|
|
test: /node_modules\/(react|react-dom|scheduler)\//,
|
|
},
|
|
{
|
|
priority: 140,
|
|
name: 'router-vendor',
|
|
test: /node_modules\/(react-router|react-router-dom)\//,
|
|
},
|
|
{
|
|
priority: 135,
|
|
name: 'mui-icons',
|
|
test: /node_modules\/@mui\/icons-material\//,
|
|
},
|
|
{
|
|
priority: 130,
|
|
name: 'mui-vendor',
|
|
test: /node_modules\/@mui\//,
|
|
},
|
|
{
|
|
priority: 125,
|
|
name: 'emotion-vendor',
|
|
test: /node_modules\/@emotion\//,
|
|
},
|
|
{
|
|
priority: 100,
|
|
name: 'jsquash-image',
|
|
test: /node_modules\/@jsquash\/(avif|resize)\//,
|
|
},
|
|
{
|
|
priority: 100,
|
|
name: 'vendor',
|
|
test: /node_modules\/(jsbarcode|sortablejs|notistack)\//,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
react(),
|
|
nginxHeadersPreviewPlugin(),
|
|
...(command === 'build'
|
|
? [
|
|
VitePWA({
|
|
registerType: 'autoUpdate',
|
|
injectRegister: 'auto',
|
|
manifest: {
|
|
id: '/',
|
|
name: 'Dashfront',
|
|
short_name: 'Dashfront',
|
|
start_url: '/',
|
|
scope: '/',
|
|
display: 'standalone',
|
|
background_color: '#c5ddd8',
|
|
theme_color: '#3b5bdb',
|
|
icons: [
|
|
{
|
|
src: '/icons/icon-192.png',
|
|
sizes: '192x192',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: '/icons/icon-512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: '/icons/icon-512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'maskable',
|
|
},
|
|
],
|
|
},
|
|
workbox: {
|
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest,woff2}'],
|
|
globIgnores: ['**/*.wasm'],
|
|
navigateFallback: 'index.html',
|
|
navigateFallbackDenylist: [/^\/api/],
|
|
},
|
|
}),
|
|
]
|
|
: []),
|
|
],
|
|
server: sharedServer,
|
|
preview: sharedServer,
|
|
}));
|