Update config to handle relative frontend/backend during webpack build.

Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>

packages/cli/src/commands/build/buildFrontend.ts

@@ -19,15 +19,17 @@ import { resolve as resolvePath } from 'path';
 import { buildBundle } from '../../lib/bundler';
 import { getEnvironmentParallelism } from '../../lib/parallel';
 import { loadCliConfig } from '../../lib/config';
+import { CliConfigOptions } from '@backstage/config-loader/src/lib/cli';
 
 interface BuildAppOptions {
   targetDir: string;
   writeStats: boolean;
+  cliOptions?: CliConfigOptions;
   configPaths: string[];
 }
 
 export async function buildFrontend(options: BuildAppOptions) {
-  const { targetDir, writeStats, configPaths } = options;
+  const { targetDir, writeStats, configPaths, cliOptions } = options;
   const { name } = await fs.readJson(resolvePath(targetDir, 'package.json'));
   await buildBundle({
     targetDir,
@@ -37,6 +39,7 @@ export async function buildFrontend(options: BuildAppOptions) {
     ...(await loadCliConfig({
       args: configPaths,
       fromPackage: name,
+      cliOptions,
     })),
   });
 }

packages/cli/src/commands/index.ts

@@ -39,6 +39,14 @@ export function registerRepoCommand(program: Command) {
       '--all',
       'Build all packages, including bundled app and backend packages.',
     )
+    .option(
+      '--public-path <path>',
+      'Public path for hosting the website on, can be relative.',
+    )
+    .option(
+      '--backend-url <url>',
+      'Backend url, expects just the origin or sub-route. Do not include /api. Can be relative.',
+    )
     .option(
       '--since <ref>',
       'Only build packages and their dev dependents that changed since the specified ref',

packages/cli/src/commands/repo/build.ts

@@ -153,6 +153,10 @@ export async function command(opts: OptionValues, cmd: Command): Promise<void> {
           return;
         }
         await buildFrontend({
+          cliOptions: {
+            publicPath: opts.publicPath,
+            backendUrl: opts.backendUrl,
+          },
           targetDir: pkg.dir,
           configPaths: (buildOptions.config as string[]) ?? [],
           writeStats: Boolean(buildOptions.stats),

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

@@ -36,10 +36,12 @@ import { runPlain } from '../run';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import pickBy from 'lodash/pickBy';
 
+const DUMMY_URL = 'http://dummyurl.org';
+
 export function resolveBaseUrl(config: Config): URL {
   const baseUrl = config.getString('app.baseUrl');
   try {
-    return new URL(baseUrl);
+    return new URL(baseUrl, DUMMY_URL);
   } catch (error) {
     throw new Error(`Invalid app.baseUrl, ${error}`);
   }
@@ -88,7 +90,7 @@ export async function createConfig(
   const externalPkgs = packages.filter(p => !isChildPath(paths.root, p.dir));
 
   const baseUrl = frontendConfig.getString('app.baseUrl');
-  const validBaseUrl = new URL(baseUrl);
+  const validBaseUrl = new URL(baseUrl, DUMMY_URL);
   const publicPath = validBaseUrl.pathname.replace(/\/$/, '');
   if (checksEnabled) {
     plugins.push(

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

@@ -60,6 +60,9 @@ export async function serveBundle(options: ServeOptions) {
         // Paths with dots should still use the history fallback.
         // See https://github.com/facebookincubator/create-react-app/issues/387.
         disableDotRule: true,
+
+        // The index needs to be rewritten relative to the new public path, including subroutes.
+        index: config.output?.publicPath ?? '/index.html',
       },
       https:
         url.protocol === 'https:'

packages/cli/src/lib/config.ts

@@ -32,6 +32,10 @@ type Options = {
   withFilteredKeys?: boolean;
   withDeprecatedKeys?: boolean;
   fullVisibility?: boolean;
+  cliOptions?: {
+    publicPath?: string;
+    backendUrl?: string;
+  };
 };
 
 export async function loadCliConfig(options: Options) {
@@ -76,6 +80,7 @@ export async function loadCliConfig(options: Options) {
     experimentalEnvFunc: options.mockEnv
       ? async name => process.env[name] || 'x'
       : undefined,
+    cliOptions: options.cliOptions,
     configRoot: paths.targetRoot,
     configTargets: configTargets,
   });