chore: some more vite work

Signed-off-by: blam <ben@blam.sh>

packages/cli/package.json

@@ -42,11 +42,13 @@
     "@backstage/types": "workspace:^",
     "@esbuild-kit/cjs-loader": "^2.4.1",
     "@esbuild-kit/esm-loader": "^2.5.5",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@manypkg/get-packages": "^1.1.3",
     "@octokit/graphql": "^5.0.0",
     "@octokit/graphql-schema": "^13.7.0",
     "@octokit/oauth-app": "^4.2.0",
     "@octokit/request": "^6.0.0",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@rollup/plugin-commonjs": "^23.0.0",
     "@rollup/plugin-json": "^5.0.0",
@@ -134,6 +136,8 @@
     "terser-webpack-plugin": "^5.1.3",
     "util": "^0.12.3",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.14.1",
+    "vite-plugin-svgr": "^4.0.0",
     "webpack": "^5.70.0",
     "webpack-dev-server": "^4.7.3",
     "webpack-node-externals": "^3.0.0",

packages/cli/src/lib/bundler/server.ts

@@ -36,6 +36,10 @@ import { createConfig, resolveBaseUrl } from './config';
 import { createDetectedModulesEntryPoint } from './packageDetection';
 import { resolveBundlingPaths } from './paths';
 import { ServeOptions } from './types';
+import { nodePolyfills as viteNodePolyfills } from 'vite-plugin-node-polyfills';
+import { esbuildCommonjs, viteCommonjs } from '@originjs/vite-plugin-commonjs';
+import pluginSvgr from 'vite-plugin-svgr';
+import vitePluginSvgr from 'vite-plugin-svgr';
 
 export async function serveBundle(options: ServeOptions) {
   const paths = resolveBundlingPaths(options);
@@ -159,11 +163,47 @@ export async function serveBundle(options: ServeOptions) {
 
   if (process.env.EXPERIMENTAL_VITE) {
     server = await vite.createServer({
-      plugins: [react()],
+      define: {
+        global: 'globalThis',
+        APP_CONFIG: JSON.stringify(cliConfig.frontendAppConfigs),
+      },
+      resolve: {
+        alias: {
+          'node-fetch': 'cross-fetch',
+        },
+      },
+      plugins: [
+        react(),
+        vitePluginSvgr(),
+        viteCommonjs(),
+        viteNodePolyfills(),
+        {
+          name: 'transform-index-html',
+          configureServer(s) {
+            s.middlewares.use(async (req, res, next) => {
+              if (req.url === '/') {
+                res.end(
+                  await s.transformIndexHtml(
+                    req.url,
+                    await fs.readFile(paths.targetHtml, 'utf-8'),
+                  ),
+                );
+              } else {
+                next();
+              }
+            });
+          },
+        },
+      ],
       server: {
         host,
         port,
       },
+      optimizeDeps: {
+        esbuildOptions: {
+          plugins: [esbuildCommonjs(['!nano-css'])],
+        },
+      },
       build: {
         commonjsOptions: {
           include: ['*'],
@@ -171,6 +211,7 @@ export async function serveBundle(options: ServeOptions) {
         },
       },
       publicDir: paths.targetPublic,
+      root: paths.targetPath,
     });
   } else {
     const compiler = webpack(config);