packages/cli,app: read config to template html and set up public path

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

@@ -17,6 +17,7 @@
 import webpack from 'webpack';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ModuleScopePlugin from 'react-dev-utils/ModuleScopePlugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { BundlingPaths } from './paths';
 import { transforms } from './transforms';
 import { optimization } from './optimization';
@@ -33,7 +34,13 @@ export function createConfig(
 ): webpack.Configuration {
   const { checksEnabled, isDev } = options;
 
-  const { plugins, loaders } = transforms(paths, options);
+  const { plugins, loaders } = transforms(options);
+
+  const baseUrl = options.config.getString('app.baseUrl');
+  if (!baseUrl) {
+    throw new Error('app.baseUrl must be set in config');
+  }
+  const validBaseUrl = new URL(baseUrl, 'https://backstage-app.dev');
 
   if (checksEnabled) {
     plugins.push(
@@ -53,7 +60,20 @@ export function createConfig(
 
   plugins.push(
     new webpack.EnvironmentPlugin({
-      APP_CONFIG: options.appConfig,
+      APP_CONFIG: options.appConfigs,
+    }),
+  );
+
+  plugins.push(
+    new HtmlWebpackPlugin({
+      template: paths.targetHtml,
+      templateParameters: {
+        publicPath: validBaseUrl.pathname.replace(/\/$/, ''),
+        app: {
+          title: options.config.getString('app.title'),
+          baseUrl: validBaseUrl.href,
+        },
+      },
     }),
   );
 
@@ -85,7 +105,7 @@ export function createConfig(
     },
     output: {
       path: paths.targetDist,
-      publicPath: '/',
+      publicPath: validBaseUrl.pathname,
       filename: isDev ? '[name].js' : '[name].[hash:8].js',
       chunkFilename: isDev
         ? '[name].chunk.js'

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { existsSync } from 'fs';
+import fs from 'fs-extra';
 import { paths } from '../paths';
 
 export type BundlingPathsOptions = {
@@ -28,20 +28,29 @@ export function resolveBundlingPaths(options: BundlingPathsOptions) {
   const resolveTargetModule = (path: string) => {
     for (const ext of ['mjs', 'js', 'ts', 'tsx', 'jsx']) {
       const filePath = paths.resolveTarget(`${path}.${ext}`);
-      if (existsSync(filePath)) {
+      if (fs.pathExistsSync(filePath)) {
         return filePath;
       }
     }
     return paths.resolveTarget(`${path}.js`);
   };
 
-  let targetHtml = paths.resolveTarget(`${entry}.html`);
-  if (!existsSync(targetHtml)) {
-    targetHtml = paths.resolveOwn('templates/serve_index.html');
+  let targetPublic = undefined;
+  let targetHtml = paths.resolveTarget('public/index.html');
+
+  // Prefer public folder
+  if (fs.pathExistsSync(targetHtml)) {
+    targetPublic = paths.resolveTarget('public');
+  } else {
+    targetHtml = paths.resolveTarget(`${entry}.html`);
+    if (!fs.pathExistsSync(targetHtml)) {
+      targetHtml = paths.resolveOwn('templates/serve_index.html');
+    }
   }
 
   return {
     targetHtml,
+    targetPublic,
     targetPath: paths.resolveTarget('.'),
     targetDist: paths.resolveTarget('dist'),
     targetAssets: paths.resolveTarget('assets'),

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

@@ -44,7 +44,9 @@ export async function serveBundle(options: ServeOptions) {
 
   const server = new WebpackDevServer(compiler, {
     hot: true,
-    publicPath: '/',
+    contentBase: paths.targetPublic,
+    contentBasePublicPath: config.output?.publicPath,
+    publicPath: config.output?.publicPath,
     historyApiFallback: true,
     clientLogLevel: 'warning',
     stats: 'errors-warnings',

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

@@ -15,20 +15,15 @@
  */
 
 import webpack, { Module, Plugin } from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BundlingOptions } from './types';
-import { BundlingPaths } from './paths';
 
 type Transforms = {
   loaders: Module['rules'];
   plugins: Plugin[];
 };
 
-export const transforms = (
-  paths: BundlingPaths,
-  options: BundlingOptions,
-): Transforms => {
+export const transforms = (options: BundlingOptions): Transforms => {
   const { isDev } = options;
 
   const loaders = [
@@ -80,12 +75,6 @@ export const transforms = (
 
   const plugins = new Array<Plugin>();
 
-  plugins.push(
-    new HtmlWebpackPlugin({
-      template: paths.targetHtml,
-    }),
-  );
-
   if (isDev) {
     plugins.push(new webpack.HotModuleReplacementPlugin());
   } else {

packages/cli/templates/default-app/app-config.yaml

@@ -1,5 +1,6 @@
 app:
   title: Scaffolded Backstage App
+  baseUrl: http://localhost:3000
 
 organization:
   name: Acme Corporation