Part 3: Original file

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginPug } from "@rsbuild/plugin-pug";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginStylus } from "@rsbuild/plugin-stylus";
import { pluginSvgr } from "@rsbuild/plugin-svgr";
import { pluginGoogleAnalytics } from "rsbuild-plugin-google-analytics";
import { pluginNodePolyfill } from "@rsbuild/plugin-node-polyfill";
import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
import { pluginOpenGraph } from "rsbuild-plugin-open-graph";

import getEnviron from "../../src/common/getEnviron";
import isLocal from "../../src/common/isLocal";
import isProd from "../../src/common/isProd";
import {
  getClientOptions,
  getClientPort,
  getClientTitle,
  getClientUrl,
  getDeveloperName,
  getDeveloperUrl,
  getDomain,
  getGoogleTagID,
  getMetaDescription,
  getMetaKeywords,
  getMetaSlogan,
} from "./../../src/server/util/settings";
import { getSSLOptions } from "./../../src/server/util/ssl";
import {
  clientJsEntry,
  clientPugEntry,
  faviconEntry,
  faviconName,
  wwwDir,
} from "./paths";
import isProductionMode from "../../src/common/isProductionMode";
import { NodeEnvType } from "../../src/common/types/env";

const clientOptions = getClientOptions();

const stringifiedClientOptions = {
  "process.env.ENVIRON": JSON.stringify(getEnviron()),
  "process.env.VIDEOMAIL_OPTIONS": Object.keys(clientOptions).reduce((env, key) => {
    env[key] = JSON.stringify(clientOptions[key]);
    return env;
  }, {}),
};

const THEME_COLOR = "#bbb";

const FULL_TITLE = [getClientTitle(), getMetaSlogan()].join(" => ");

export default defineConfig({
  mode: isProductionMode() ? NodeEnvType.PRODUCTION : NodeEnvType.DEVELOPMENT,
  dev: {
    writeToDisk: true,
  },
  environments: {
    client: {
      html: {
        favicon: faviconEntry,
        meta: {
          "apple-mobile-web-app-status-bar-style": THEME_COLOR,
          author: getDeveloperName(),
          "msapplication-navbutton-color": THEME_COLOR,
          "theme-color": THEME_COLOR,
          viewport: "width=device-width,initial-scale=1",
        },
        template: clientPugEntry,
        templateParameters: {
          clientUrl: getClientUrl(),
          description: getMetaDescription(),
          developerName: getDeveloperName(),
          developerUrl: getDeveloperUrl(),
          environ: getEnviron(),
          keywords: getMetaKeywords(),
          slogan: getMetaSlogan(),
          title: getClientTitle(),
        },
        title: getClientTitle(),
      },
      output: {
        distPath: {
          root: wwwDir,
        },
        target: "web",
      },
      // Do not add eslint and ts check plugins as they would only validate client side code, not the whole
      plugins: [
        // TODO Pass over video-width and video-height under `define` option once available
        pluginStylus({}),
        pluginReact(),
        pluginSvgr({
          svgrOptions: {
            exportType: "default",
          },
        }),
        pluginPug(),
        pluginOpenGraph({
          url: getClientUrl(),
          type: "video.other",
          title: FULL_TITLE,
          image: `/${faviconName}`,
          description: getMetaDescription(),
          twitter: {
            site: "@binarykitchen",
            creator: "@binarykitchen",
            card: "summary",
            title: FULL_TITLE,
            description: getMetaDescription(),
          },
        }),
        pluginGoogleAnalytics({ id: getGoogleTagID(), enable: isProd() }),
        // Needed for VC side until all is ported to React
        pluginNodePolyfill(),
      ],
      source: {
        define: stringifiedClientOptions,
        entry: {
          index: clientJsEntry,
        },
      },
    },
  },
  tools: {
    rspack: (_config, { appendPlugins }) => {
      // Only register the plugin when RSDOCTOR is true, as the plugin will increase the build time
      // Can be run with RSDOCTOR=true npm run build:prod
      if (process.env.RSDOCTOR) {
        appendPlugins(
          new RsdoctorRspackPlugin({
            // plugin options
          }),
        );
      }
    },
  },
  server: {
    compress: !isLocal(),
    host: getDomain(),
    https: getSSLOptions(),
    port: getClientPort(),
  },
});