refactor(cli): split out bundling config for BE

packages/backend-common/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@types/stoppable": "^1.1.0",
+    "@types/webpack-env": "^1.15.2",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
@@ -44,7 +45,6 @@
     "@types/http-errors": "^1.6.3",
     "@types/morgan": "^1.9.0",
     "@types/supertest": "^2.0.8",
-    "@types/webpack-env": "^1.15.2",
     "@types/yaml": "^1.9.7",
     "get-port": "^5.1.1",
     "http-errors": "^1.7.3",

packages/cli/config/tsconfig.json

@@ -32,6 +32,6 @@
     "strictPropertyInitialization": true,
     "stripInternal": true,
     "target": "ES2019",
-    "types": ["node", "jest"]
+    "types": ["node", "jest", "webpack-env"]
   }
 }

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

@@ -15,16 +15,15 @@
  */
 
 import webpack from 'webpack';
-import { createConfig } from './config';
+import { createBackendConfig } from './config';
 import { resolveBundlingPaths } from './paths';
 import { ServeOptions } from './types';
 
 export async function serveBackend(options: ServeOptions) {
   const paths = resolveBundlingPaths(options);
-  const config = createConfig(paths, {
+  const config = createBackendConfig(paths, {
     ...options,
     isDev: true,
-    isBackend: true,
   });
 
   const compiler = webpack(config);

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

@@ -40,7 +40,6 @@ export async function buildBundle(options: BuildOptions) {
     ...options,
     checksEnabled: false,
     isDev: false,
-    isBackend: false,
     baseUrl: resolveBaseUrl(options.config),
   });
   const compiler = webpack(config);

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

@@ -24,7 +24,7 @@ import { optimization } from './optimization';
 import { Config } from '@backstage/config';
 import { BundlingPaths } from './paths';
 import { transforms } from './transforms';
-import { BundlingOptions } from './types';
+import { BundlingOptions, BackendBundlingOptions } from './types';
 // import checkRequiredFiles from 'react-dev-utils/checkRequiredFiles';
 // import ModuleNotFoundPlugin from 'react-dev-utils/ModuleNotFoundPlugin';
 // import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';
@@ -47,7 +47,7 @@ export function createConfig(
   paths: BundlingPaths,
   options: BundlingOptions,
 ): webpack.Configuration {
-  const { checksEnabled, isDev, isBackend } = options;
+  const { checksEnabled, isDev } = options;
 
   const { plugins, loaders } = transforms(options);
 
@@ -92,7 +92,66 @@ export function createConfig(
     }),
   );
 
-  const backendRelatedConfig = {
+  return {
+    mode: isDev ? 'development' : 'production',
+    profile: false,
+    node: {
+      module: 'empty',
+      dgram: 'empty',
+      dns: 'mock',
+      fs: 'empty',
+      http2: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty',
+    },
+    optimization: optimization(options),
+    bail: false,
+    performance: {
+      hints: false, // we check the gzip size instead
+    },
+    devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
+    context: paths.targetPath,
+    entry: [require.resolve('react-hot-loader/patch'), paths.targetEntry],
+    resolve: {
+      extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+      mainFields: ['main:src', 'browser', 'module', 'main'],
+      plugins: [
+        new ModuleScopePlugin(
+          [paths.targetSrc, paths.targetDev],
+          [paths.targetPackageJson],
+        ),
+      ],
+      alias: {
+        'react-dom': '@hot-loader/react-dom',
+      },
+    },
+    module: {
+      rules: loaders,
+    },
+    output: {
+      path: paths.targetDist,
+      publicPath: validBaseUrl.pathname,
+      filename: isDev ? '[name].js' : '[name].[hash:8].js',
+      chunkFilename: isDev
+        ? '[name].chunk.js'
+        : '[name].[chunkhash:8].chunk.js',
+    },
+    plugins,
+  };
+}
+
+export function createBackendConfig(
+  paths: BundlingPaths,
+  options: BackendBundlingOptions,
+): webpack.Configuration {
+  const { checksEnabled, isDev } = options;
+
+  const { loaders } = transforms(options);
+
+  return {
+    mode: isDev ? 'development' : 'production',
+    profile: false,
     ...(isDev
       ? {
           watch: true,
@@ -117,44 +176,17 @@ export function createConfig(
       __filename: true,
       global: true,
     },
-  };
-
-  return {
-    mode: isDev ? 'development' : 'production',
-    profile: false,
-    ...(isBackend
-      ? backendRelatedConfig
-      : {
-          node: {
-            module: 'empty',
-            dgram: 'empty',
-            dns: 'mock',
-            fs: 'empty',
-            http2: 'empty',
-            net: 'empty',
-            tls: 'empty',
-            child_process: 'empty',
-          },
-          optimization: optimization(options),
-        }),
     bail: false,
     performance: {
       hints: false, // we check the gzip size instead
     },
     devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
     context: paths.targetPath,
-    entry: [
-      ...(isBackend
-        ? ['webpack/hot/poll?100']
-        : [require.resolve('react-hot-loader/patch')]),
-      paths.targetEntry,
-    ],
+    entry: ['webpack/hot/poll?100', paths.targetEntry],
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
       mainFields: ['main:src', 'browser', 'module', 'main'],
-      ...(isBackend
-        ? { modules: [paths.targetNodeModules, paths.rootNodeModules] }
-        : {}),
+      modules: [paths.targetNodeModules, paths.rootNodeModules],
       plugins: [
         new ModuleScopePlugin(
           [paths.targetSrc, paths.targetDev],
@@ -170,17 +202,29 @@ export function createConfig(
     },
     output: {
       path: paths.targetDist,
-      publicPath: validBaseUrl.pathname,
       filename: isDev ? '[name].js' : '[name].[hash:8].js',
       chunkFilename: isDev
         ? '[name].chunk.js'
         : '[name].[chunkhash:8].chunk.js',
     },
-    plugins: isBackend
-      ? [
-          new StartServerPlugin('main.js'),
-          new webpack.HotModuleReplacementPlugin(),
-        ]
-      : plugins,
+    plugins: [
+      new StartServerPlugin('main.js'),
+      new webpack.HotModuleReplacementPlugin(),
+      ...(checksEnabled
+        ? [
+            new ForkTsCheckerWebpackPlugin({
+              tsconfig: paths.targetTsConfig,
+              eslint: true,
+              eslintOptions: {
+                parserOptions: {
+                  project: paths.targetTsConfig,
+                  tsconfigRootDir: paths.targetPath,
+                },
+              },
+              reportFiles: ['**', '!**/__tests__/**', '!**/?(*.)(spec|test).*'],
+            }),
+          ]
+        : []),
+    ],
   };
 }

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

@@ -33,7 +33,6 @@ export async function serveBundle(options: ServeOptions) {
   const config = createConfig(paths, {
     ...options,
     isDev: true,
-    isBackend: false,
     baseUrl: url,
   });
   const compiler = webpack(config);

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

@@ -16,14 +16,16 @@
 
 import webpack, { Module, Plugin } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { BundlingOptions } from './types';
+import { BundlingOptions, BackendBundlingOptions } from './types';
 
 type Transforms = {
   loaders: Module['rules'];
   plugins: Plugin[];
 };
 
-export const transforms = (options: BundlingOptions): Transforms => {
+export const transforms = (
+  options: BundlingOptions | BackendBundlingOptions,
+): Transforms => {
   const { isDev } = options;
 
   const loaders = [

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

@@ -22,10 +22,11 @@ export type BundlingOptions = {
   isDev: boolean;
   config: Config;
   appConfigs: AppConfig[];
-  isBackend: boolean;
   baseUrl: URL;
 };
 
+export type BackendBundlingOptions = Omit<BundlingOptions, 'baseUrl'>;
+
 export type ServeOptions = BundlingPathsOptions & {
   checksEnabled: boolean;
   config: Config;