dashfront/vite.config.js

import fs from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } 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 formatLoggedBody(statusCode, body) {
  if (statusCode === 304) return '(304 no body)';
  if (statusCode === 204 || body === '') return '(empty)';
  return truncate(body);
}

function hasRequestBody(method) {
  return method === 'POST' || method === 'PUT' || method === 'PATCH';
}

const sharedServer = {
  // HTTP :4209 — HTTPS :4308 (self-signed; see npm run cert / dev:https)
  port: useHttps ? 4308 : 4209,
  https: httpsOptions(),
  allowedHosts: true,
  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', () => {
            req._proxyRequestBody = chunks.length
              ? Buffer.concat(chunks).toString('utf8')
              : '';
          });
        });

        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 responseBody = responseChunks.length
              ? Buffer.concat(responseChunks).toString('utf8')
              : '';
            const details = {
              status: proxyRes.statusCode,
              setCookie: cookies ?? '(none)',
              response: formatLoggedBody(proxyRes.statusCode, responseBody),
            };
            if (hasRequestBody(req.method)) {
              details.body = req._proxyRequestBody
                ? truncate(req._proxyRequestBody)
                : '(empty)';
            }
            console.log('[vite-proxy]', req.method, req.url, details);
          });
        });
      },
    },
  },
};

export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        codeSplitting: {
          groups: [
            {
              name: 'react-vendor',
              test: /node_modules\/(react|react-dom|react-router|react-router-dom|scheduler)\//,
            },
            {
              name: 'mui-vendor',
              test: /node_modules\/(@mui|@emotion)\//,
            },
          ],
        },
      },
    },
  },
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        id: '/',
        name: 'Dashfront',
        short_name: 'Dashfront',
        start_url: '/',
        scope: '/',
        display: 'standalone',
        background_color: '#dceeea',
        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}'],
        navigateFallback: 'index.html',
      },
    }),
  ],
  server: sharedServer,
  preview: sharedServer,
});