vite.config.ts

import { existsSync } from "node:fs";
import { ClientRequest, IncomingMessage, ServerResponse } from "node:http";

import basicSsl from "@vitejs/plugin-basic-ssl";
import react from "@vitejs/plugin-react";
import bodyParser from "body-parser";
import { fixRequestBody } from "http-proxy-middleware";
import { resolve } from "path";
import { defineConfig, loadEnv, ServerOptions } from "vite";
import envCompatible from "vite-plugin-env-compatible";
import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
import svgr from "vite-plugin-svgr";

const pwaOptions: Partial<VitePWAOptions> = {
    mode: "production",
    base: "/",
    registerType: "prompt",
    workbox: {
        cacheId: "novorender-explorer",
        maximumFileSizeToCacheInBytes: 15e6,
        globPatterns: ["**/*"],
        runtimeCaching: [
            {
                urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
                handler: "CacheFirst",
                options: {
                    cacheName: "google-fonts-cache",
                    expiration: {
                        maxEntries: 10,
                        maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
                    },
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            {
                urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
                handler: "CacheFirst",
                options: {
                    cacheName: "gstatic-fonts-cache",
                    expiration: {
                        maxEntries: 10,
                        maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
                    },
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // Scene config
            {
                urlPattern: /^https:\/\/data-v2(-staging)?\.novorender\.com\/api\/scenes\/[\w]{32}$/i,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                        headers: {
                            "x-explorer-cacheable": "true",
                        },
                    },
                },
            },
            // Scene bookmarks, favorites, etc.
            {
                urlPattern: /^https:\/\/data-v2(-staging)?\.novorender\.com\/explorer\/[\w]{32}\/(?!ditio).+/i,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // Device tier
            {
                urlPattern: /https:\/\/unpkg\.com\/detect-gpu@[\d]+\.[\d]+\.[\d]+\/dist\/benchmarks/,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // Skybox environments
            {
                urlPattern: /^https:\/\/assets\.novorender\.com\/env/,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // Project info
            {
                urlPattern: /^https:\/\/data-v2(-staging)?\.novorender\.com\/projects\/[\w]{32}$/,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // Deviations
            {
                urlPattern: /^https:\/\/novorenderblobs\.blob\.core\.windows\.net\/[\w]{32}\/deviations\.json/,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                    matchOptions: {
                        ignoreSearch: true,
                    },
                    plugins: [
                        {
                            cacheKeyWillBeUsed: async (param) => {
                                const url = new URL(param.request.url);
                                url.search = "";
                                return url.toString();
                            },
                        },
                    ],
                },
            },
            {
                urlPattern: /^https:\/\/data-v2(-staging)?\.novorender\.com\/explorer\/[\w]{32}\/deviations$/,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // epsg.io
            {
                urlPattern: /^https:\/\/epsg\.io\/\d+\.(proj4|wkt)$/,
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
            // config.json
            {
                urlPattern: (options) => {
                    if (!options.sameOrigin) {
                        return false;
                    }

                    return /^\/config\.json$/i.test(options.url.pathname);
                },
                handler: "NetworkFirst",
                options: {
                    cacheableResponse: {
                        statuses: [0, 200],
                    },
                },
            },
        ],
    },
    manifest: false,
};

const parseUrlencodedPlugin = () => ({
    name: "configure-server",
    configureServer(server) {
        server.middlewares.use(bodyParser.urlencoded({ extended: false }));
    },
});

const parseJsonPlugin = () => ({
    name: "configure-server",
    configureServer(server) {
        server.middlewares.use(bodyParser.json());
    },
});

const ownCerts = existsSync("./localhost.crt") && existsSync("./localhost.key");
const serverOptions: ServerOptions = {
    https: ownCerts
        ? {
              cert: "./localhost.crt",
              key: "./localhost.key",
          }
        : undefined,
    host: true,
    open: true,
    headers: {
        "Cross-Origin-Opener-Policy": "same-origin",
        "Cross-Origin-Embedder-Policy": "require-corp",
        "Cross-Origin-Resource-Policy": "cross-origin",
    },
    proxy: {
        "/token": {
            target: process.env.REACT_APP_AUTH_SERVER_URL ?? "https://auth.novorender.com",
            configure: (proxy) => {
                proxy.on("proxyReq", (proxyReq, req, res) => {
                    appendClientSecretToBody(proxyReq, req, res, "REACT_APP_NOVORENDER_CLIENT_SECRET");
                });
            },
            changeOrigin: true,
        },
        "/bimtrack/token": {
            target: "https://auth.bimtrackapp.co/connect/token",
            rewrite: (path) => path.replace(/^\/bimtrack\/token/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", (proxyReq, req, res) => {
                    appendClientSecretToBody(proxyReq, req, res, "REACT_APP_BIMTRACK_CLIENT_SECRET");
                });
            },
            changeOrigin: true,
        },
        "/bimtrack/bcf/2.1": {
            target: "https://bcfrestapi-bt02.bimtrackapp.co/",
            rewrite: (path) => path.replace(/^\/bimtrack/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
        "/ditio-file": {
            target: "https://ditio-api-v3.azurewebsites.net/api/file/",
            rewrite: (path) => path.replace(/^\/ditio-file/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
        "/ditio-machines": {
            target: "https://ditio-report-api.azurewebsites.net/api",
            rewrite: (path) => path.replace(/^\/ditio-machines/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
        "/ditio": {
            target: "https://ditio-api-v3.azurewebsites.net",
            rewrite: (path) => path.replace(/^\/ditio/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
        "/xsitemanage": {
            target: "https://api.prod.xsitemanage.com",
            rewrite: (path) => path.replace(/^\/xsitemanage/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
        "/omega365": {
            target: "https://nyeveier.pims365.no",
            rewrite: (path) => path.replace(/^\/omega365/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
        "/jira/token": {
            target: "https://auth.atlassian.com/oauth/token",
            rewrite: (path) => path.replace(/^\/jira\/token/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", (proxyReq, req, res) => {
                    appendClientSecretToBody(proxyReq, req, res, "REACT_APP_JIRA_CLIENT_SECRET");
                });
            },
            changeOrigin: true,
        },
        "/bimcollab/token": {
            // Vite doesn't support dynamic target, see https://github.com/vitejs/vite/pull/13968
            // so change target if you want to test against particular environment
            target: "https://multiconsult.bimcollab.com/identity/connect/token",
            rewrite: (path) => path.replace(/^\/bimcollab\/token/, ""),
            // At least validate that auth_url query param is the right one
            bypass: (req, _res, options) => {
                const url = new URL(req.url ?? "", options.target as string);
                const authUrl = url.searchParams.get("auth_url");
                if (authUrl !== options.target) {
                    const msg = `Invalid auth_url, expecting ${options.target}. If you need other target - change vite.config.ts`;
                    console.error(msg);
                    return msg;
                }
            },
            configure: (proxy) => {
                proxy.on("proxyReq", (proxyReq, req, res) => {
                    appendClientSecretToBody(proxyReq, req, res, "REACT_APP_BIMCOLLAB_CLIENT_SECRET");
                });
            },
            changeOrigin: true,
        },
        // use REACT_APP_DATA_V2_SERVER_URL=/data-v2 in .env.local to use local version
        "/data-v2": {
            target: process.env.DATA_V2_SERVER_URL_PROXY_TARGET ?? "http://127.0.0.1:5000",
            rewrite: (path) => path.replace(/^\/data-v2/, ""),
            configure: (proxy) => {
                proxy.on("proxyReq", fixRequestBody);
            },
            changeOrigin: true,
        },
    },
};

function appendClientSecretToBody(
    proxyReq: ClientRequest,
    req: IncomingMessage,
    res: ServerResponse<IncomingMessage>,
    envVarName: string,
) {
    const secret = process.env[envVarName];
    if (!secret) {
        res.writeHead(500, { "Content-Type": "application/json" });
        res.end(JSON.stringify({ error: `Missing ${envVarName}` }));
        proxyReq.destroy();
        return;
    }

    appendToBody(proxyReq, req, { client_secret: secret });
}

function appendToBody(proxyReq: ClientRequest, req: IncomingMessage, toAdd: { [key: string]: string }) {
    if (req.method !== "POST") {
        return;
    }

    const body = (req as unknown as { body: { [key: string]: string } }).body;
    if (!body) {
        return;
    }

    const newBody = { ...body, ...toAdd };
    let bodyStr = "";
    switch (req.headers["content-type"]) {
        case "application/json": {
            bodyStr = JSON.stringify(newBody);
            break;
        }
        case "application/x-www-form-urlencoded": {
            bodyStr = Object.entries({ ...body, ...toAdd })
                .map(([key, value]) => encodeURIComponent(key) + "=" + encodeURIComponent(value))
                .join("&");
            break;
        }
        default:
            break;
    }

    if (!bodyStr) {
        return;
    }

    proxyReq.setHeader("content-length", bodyStr.length);

    proxyReq.write(bodyStr);
}

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd());

    return {
        build: {
            sourcemap: true,
            rollupOptions: {
                onLog(level, log, handler) {
                    if (
                        log.cause &&
                        typeof log.cause === "object" &&
                        "message" in log.cause &&
                        log.cause.message === `Can't resolve original location of error.`
                    ) {
                        return;
                    }
                    handler(level, log);
                },
            },
        },
        optimizeDeps: {
            exclude: ["@novorender/webgl-api", "@novorender/api"],
        },
        envPrefix: "REACT_APP_",
        plugins: [
            react(),
            envCompatible(),
            svgr({ svgrOptions: { titleProp: true } }),
            ...(ownCerts ? [] : [basicSsl()]),
            VitePWA(pwaOptions),
            parseUrlencodedPlugin(),
            parseJsonPlugin(),
        ],
        define: { ...env },
        server: {
            port: Number(process.env.PORT) || 3000,
            ...serverOptions,
        },
        preview: {
            port: Number(process.env.PORT) || 5000,
            ...serverOptions,
        },
        resolve: {
            alias: [
                {
                    find: "features",
                    replacement: resolve(__dirname, "src/features"),
                },
                {
                    find: "app",
                    replacement: resolve(__dirname, "src/app"),
                },
                {
                    find: "slices",
                    replacement: resolve(__dirname, "src/slices"),
                },
                {
                    find: "components",
                    replacement: resolve(__dirname, "src/components"),
                },
                {
                    find: "pages",
                    replacement: resolve(__dirname, "src/pages"),
                },
                {
                    find: "config",
                    replacement: resolve(__dirname, "src/config"),
                },
                {
                    find: "types",
                    replacement: resolve(__dirname, "src/types"),
                },
                {
                    find: "utils",
                    replacement: resolve(__dirname, "src/utils"),
                },
                {
                    find: "contexts",
                    replacement: resolve(__dirname, "src/contexts"),
                },
                {
                    find: "media",
                    replacement: resolve(__dirname, "src/media"),
                },
                {
                    find: "hooks",
                    replacement: resolve(__dirname, "src/hooks"),
                },
                {
                    find: "apis",
                    replacement: resolve(__dirname, "src/apis"),
                },
            ],
        },
    };
});