From 0e1a817a26dba2cc7c0ba19bd64f433554c73edf Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 30 Aug 2024 13:42:19 +0200
Subject: [PATCH] packages/cli: output index.html.tmpl

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/great-zebras-hunt.md            |  5 +++++
 packages/cli/package.json                  |  1 +
 packages/cli/src/lib/bundler/config.ts     | 11 +++++++++++
 packages/cli/src/lib/bundler/transforms.ts |  4 ++--
 yarn.lock                                  | 17 +++++++++++++++--
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/great-zebras-hunt.md

diff --git a/.changeset/great-zebras-hunt.md b/.changeset/great-zebras-hunt.md
new file mode 100644
index 0000000000..cbb0beb1b6
--- /dev/null
+++ b/.changeset/great-zebras-hunt.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+The app build process now outputs an additional `index.html.tmpl` file. This is an non-templated version of the `index.html` file, which can be used to delay templating until runtime.
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 89230c13b2..947e79c87f 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -130,6 +130,7 @@
     "pirates": "^4.0.6",
     "postcss": "^8.1.0",
     "process": "^0.11.10",
+    "raw-loader": "^4.0.2",
     "react-dev-utils": "^12.0.0-next.60",
     "react-refresh": "^0.14.0",
     "recursive-readdir": "^2.2.2",
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index da7b378fbd..40ed82ef54 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -198,6 +198,17 @@ export async function createConfig(
         },
       }),
     );
+    plugins.push(
+      new HtmlWebpackPlugin({
+        meta: {
+          'backstage-app-mode': options?.appMode ?? 'public',
+        },
+        minify: false,
+        publicPath: '<%= publicPath %>',
+        filename: 'index.html.tmpl',
+        template: `raw-loader!${paths.targetHtml}`,
+      }),
+    );
   }
 
   if (options.moduleFederation) {
diff --git a/packages/cli/src/lib/bundler/transforms.ts b/packages/cli/src/lib/bundler/transforms.ts
index 302b2fbe68..17a6a0c191 100644
--- a/packages/cli/src/lib/bundler/transforms.ts
+++ b/packages/cli/src/lib/bundler/transforms.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { ModuleOptions, WebpackPluginInstance } from 'webpack';
+import { RuleSetRule, WebpackPluginInstance } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { svgrTemplate } from '../svgrTemplate';
 
 type Transforms = {
-  loaders: ModuleOptions['rules'];
+  loaders: RuleSetRule[];
   plugins: WebpackPluginInstance[];
 };
 
diff --git a/yarn.lock b/yarn.lock
index c36b6da828..04ebf90c5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3996,6 +3996,7 @@ __metadata:
     pirates: ^4.0.6
     postcss: ^8.1.0
     process: ^0.11.10
+    raw-loader: ^4.0.2
     react-dev-utils: ^12.0.0-next.60
     react-refresh: ^0.14.0
     recursive-readdir: ^2.2.2
@@ -32573,7 +32574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^2.0.4":
+"loader-utils@npm:^2.0.0, loader-utils@npm:^2.0.4":
   version: 2.0.4
   resolution: "loader-utils@npm:2.0.4"
   dependencies:
@@ -38143,6 +38144,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"raw-loader@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "raw-loader@npm:4.0.2"
+  dependencies:
+    loader-utils: ^2.0.0
+    schema-utils: ^3.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 51cc1b0d0e8c37c4336b5318f3b2c9c51d6998ad6f56ea09612afcfefc9c1f596341309e934a744ae907177f28efc9f1654eacd62151e82853fcc6d37450e795
+  languageName: node
+  linkType: hard
+
 "rc-progress@npm:3.5.1":
   version: 3.5.1
   resolution: "rc-progress@npm:3.5.1"
@@ -40166,7 +40179,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
+"schema-utils@npm:^3.0.0, schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
   dependencies: