bodyshop/client/vite.config.js

import react from "@vitejs/plugin-react";
import { promises as fsPromises } from "fs";
import { createRequire } from "module";
import * as path from "path";
import * as url from "url";
import { createLogger, defineConfig } from "vite";
import { ViteEjsPlugin } from "vite-plugin-ejs";
import eslint from "vite-plugin-eslint";
import { VitePWA } from "vite-plugin-pwa";
import InstanceRenderManager from "./src/utils/instanceRenderMgr";
import chalk from "chalk";
//import { visualizer } from "rollup-plugin-visualizer";

process.env.VITE_APP_GIT_SHA_DATE = new Date().toLocaleString("en-US", {
  timeZone: "America/Los_Angeles"
});

const getFormattedTimestamp = () =>
  new Date().toLocaleTimeString("en-US", { hour12: true }).replace("AM", "a.m.").replace("PM", "p.m.");

/** This is a hack around react-virtualized, should be removed when switching to react-virtuoso */
const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;

function reactVirtualizedFix() {
  return {
    name: "flat:react-virtualized",
    configResolved: async () => {
      const require = createRequire(import.meta.url);
      const reactVirtualizedPath = require.resolve("react-virtualized");
      const { pathname: reactVirtualizedFilePath } = new url.URL(reactVirtualizedPath, import.meta.url);
      const file = reactVirtualizedFilePath.replace(
        path.join("dist", "commonjs", "index.js"),
        path.join("dist", "es", "WindowScroller", "utils", "onScroll.js")
      );
      const code = await fsPromises.readFile(file, "utf-8");
      const modified = code.replace(WRONG_CODE, "");
      await fsPromises.writeFile(file, modified);
    }
  };
}
/** End of hack */

export const logger = createLogger("info", {
  allowClearScreen: false
});

export default defineConfig({
  base: "/",
  plugins: [
    //visualizer(),
    ViteEjsPlugin((viteConfig) => ({ env: viteConfig.env })),
    VitePWA({
      injectRegister: "auto",
      registerType: "prompt",
      manifest: {
        short_name: InstanceRenderManager({
          instance: process.env.VITE_APP_INSTANCE,
          imex: "ImEX Online",
          rome: "Rome Online",
          
        }),
        name: InstanceRenderManager({
          instance: process.env.VITE_APP_INSTANCE,
          imex: "ImEX Online",
          rome: "Rome Online",
          
        }),
        description: "The ultimate bodyshop management system.",
        icons: [
          {
            src: InstanceRenderManager({
              instance: process.env.VITE_APP_INSTANCE,
              imex: "favicon.png",
              rome: "ro-favicon.png",
            }),
            sizes: "64x64 32x32 24x24 16x16",
            type: "image/x-icon"
          },
          {
            src: InstanceRenderManager({
              instance: process.env.VITE_APP_INSTANCE,
              imex: "logo192.png",
              rome: "logo192.png",
            }),
            type: "image/png",
            sizes: "192x192"
          },
          {
            src: InstanceRenderManager({
              instance: process.env.VITE_APP_INSTANCE,
              imex: "logo512.png",
              rome: "ro-favicon.png",
            }),
            type: "image/png",
            sizes: "512x512"
          }
        ],
        theme_color: InstanceRenderManager({
          instance: process.env.VITE_APP_INSTANCE,
          imex: "#1890ff",
          rome: "#fff",
        }),
        background_color: "#fff",
        gcm_sender_id: "103953800507"
      }
    }),
    reactVirtualizedFix(),
    react(),
    eslint()
  ],
  define: {
    APP_VERSION: JSON.stringify(process.env.npm_package_version)
  },
  server: {
    host: true,
    port: 3000,
    open: true,
    proxy: {
      "/ws": {
        target: "ws://localhost:4000",
        rewriteWsOrigin: true,
        secure: false,
        ws: true
      },
      "/wss": {
        target: "ws://localhost:4000",
        rewriteWsOrigin: true,
        secure: false,
        ws: true
      },
      "/api": {
        target: "http://localhost:4000",
        changeOrigin: true,
        secure: false,
        ws: false,
        rewrite: (path) => {
          const replacedValue = path.replace(/^\/api/, "");
          logger.info(
            `${chalk.grey.bold(getFormattedTimestamp())} ${chalk.cyan.bold("[vite]")} ${chalk.green.bold("[API]")} ${chalk.blue(replacedValue)}`
          );
          return replacedValue;
        }
      }
    },
    https: {
      key: await fsPromises.readFile("../certs/key.pem"),
      cert: await fsPromises.readFile("../certs/cert.pem"),
      allowHTTP1: false // Force HTTP/2
    }
  },
  preview: {
    port: 6000,
    host: true,
    open: true,
    https: {
      key: await fsPromises.readFile("../certs/key.pem"),
      cert: await fsPromises.readFile("../certs/cert.pem"),
      allowHTTP1: false // Force HTTP/2
    },
    proxy: {
      "/ws": {
        target: "ws://localhost:4000",
        rewriteWsOrigin: true,
        secure: false,
        ws: true
      },
      "/wss": {
        target: "ws://localhost:4000",
        rewriteWsOrigin: true,
        secure: false,
        ws: true
      },
      "/api": {
        target: "http://localhost:4000",
        changeOrigin: true,
        secure: false,
        ws: false
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          antd: ["antd"],
          "react-redux": ["react-redux"],
          redux: ["redux"],
          lodash: ["lodash"],
          "@sentry/react": ["@sentry/react"],
          "@splitsoftware/splitio-react": ["@splitsoftware/splitio-react"],
          logrocket: ["logrocket"],
          "firebase/app": ["firebase/app"],
          "firebase/firestore": ["firebase/firestore"],
          "firebase/firestore/lite": ["firebase/firestore/lite"],
          "firebase/auth": ["firebase/auth"],
          "firebase/functions": ["firebase/functions"],
          "firebase/storage": ["firebase/storage"],
          "firebase/database": ["firebase/database"],
          "firebase/remote-config": ["firebase/remote-config"],
          "firebase/performance": ["firebase/performance"],
          "@firebase/app": ["@firebase/app"],
          "@firebase/firestore": ["@firebase/firestore"],
          "@firebase/firestore/lite": ["@firebase/firestore/lite"],
          "@firebase/auth": ["@firebase/auth"],
          "@firebase/functions": ["@firebase/functions"],
          "@firebase/storage": ["@firebase/storage"],
          "@firebase/database": ["@firebase/database"],
          "@firebase/remote-config": ["@firebase/remote-config"],
          "@firebase/performance": ["@firebase/performance"],
          markerjs2: ["markerjs2"],
          "@apollo/client": ["@apollo/client"],
          "libphonenumber-js": ["libphonenumber-js"]
        }
      }
    }
  },
  optimizeDeps: {
    include: [
      "react",
      "react-dom",
      "antd",
      "lodash",
      "@sentry/react",
      "@apollo/client",
      "@reduxjs/toolkit",
      "axios",
      "react-router-dom",
      "dayjs",
      "redux",
      "react-redux"
    ],
    esbuildOptions: {
      loader: {
        ".js": "jsx"
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
        quietDeps: true // Quite Deprecation Warnings, should be disabled occasionally before major upgrades
      }
    }
  }
});