diff --git a/packages/cli/package.json b/packages/cli/package.json index 1a1909a87c..ae181bceef 100644 --- a/packages/cli/package.json +++ b/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", diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 7cf089607c..455c18d3c2 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/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);