feat: reworking html to work without messing about

Signed-off-by: blam <ben@blam.sh>
2023-10-03 12:12:40 +02:00
parent 605c0d171b
commit 107431b803
5 changed files with 177 additions and 41 deletions
@@ -41,6 +41,43 @@
      href="<%= publicPath %>/safari-pinned-tab.svg"
      color="#5bbad5"
    />
+    <title><%= config.getString('app.title') %></title>
+
+    <% if (config.has('app.datadogRum')) { %>
+    <script>
+      (function (h, o, u, n, d) {
+        h = h[d] = h[d] || {
+          q: [],
+          onReady: function (c) {
+            h.q.push(c);
+          },
+        };
+        d = o.createElement(u);
+        d.async = 1;
+        d.src = n;
+        n = o.getElementsByTagName(u)[0];
+        n.parentNode.insertBefore(d, n);
+      })(
+        window,
+        document,
+        'script',
+        'https://www.datadoghq-browser-agent.com/datadog-rum-v3.js',
+        'DD_RUM',
+      );
+      DD_RUM.onReady(function () {
+        DD_RUM.init({
+          clientToken: '<%= config.getString("app.datadogRum.clientToken") %>',
+          applicationId:
+            '<%= config.getString("app.datadogRum.applicationId") %>',
+          site: '<%= config.getOptionalString("app.datadogRum.site") || "datadoghq.com" %>',
+          service: 'backstage',
+          env: '<%= config.getString("app.datadogRum.env") %>',
+          sampleRate: 100,
+          trackInteractions: true,
+        });
+      });
+    </script>
+    <% } %>
  </head>

  <body>
@@ -56,12 +93,5 @@
      To begin the development, run `yarn start`.
      To create a production bundle, use `yarn build`.
    -->
-    <script type="module">
-      import process from 'process';
-      window.process = process;
-      window.process.env.APP_CONFIG = window.APP_CONFIG;
-    </script>
-
-    <script type="module" src="../src/index.tsx" />
  </body>
 </html>
@@ -83,6 +83,7 @@
    "css-loader": "^6.5.1",
    "ctrlc-windows": "^2.1.0",
    "diff": "^5.0.0",
+    "ejs": "^3.1.9",
    "esbuild": "^0.19.0",
    "esbuild-loader": "^2.18.0",
    "eslint": "^8.6.0",
@@ -136,6 +137,7 @@
    "terser-webpack-plugin": "^5.1.3",
    "util": "^0.12.3",
    "vite": "^4.4.9",
+    "vite-plugin-html": "^3.2.0",
    "vite-plugin-html-template": "^1.2.0",
    "vite-plugin-node-polyfills": "^0.14.1",
    "vite-plugin-svgr": "^4.0.0",
@@ -160,6 +162,7 @@
    "@backstage/theme": "workspace:^",
    "@types/cross-spawn": "^6.0.2",
    "@types/diff": "^5.0.0",
+    "@types/ejs": "^3.1.3",
    "@types/express": "^4.17.6",
    "@types/fs-extra": "^9.0.1",
    "@types/http-proxy": "^1.17.4",
@@ -38,7 +38,7 @@ 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 htmlTemplate from 'vite-plugin-html-template';
+import { viteTransformHtml } from './viteTransformHtml';
 import vitePluginSvgr from 'vite-plugin-svgr';

 export async function serveBundle(options: ServeOptions) {
@@ -163,10 +163,10 @@ export async function serveBundle(options: ServeOptions) {

  if (process.env.EXPERIMENTAL_VITE) {
    server = await vite.createServer({
-      mode: 'development',
      define: {
        global: 'globalThis',
-        APP_CONFIG: JSON.stringify(cliConfig.frontendAppConfigs),
+        'process.argv': JSON.stringify(process.argv),
+        'process.env.APP_CONFIG': JSON.stringify(cliConfig.frontendAppConfigs),
      },
      resolve: {
        alias: {
@@ -178,10 +178,12 @@ export async function serveBundle(options: ServeOptions) {
        vitePluginSvgr(),
        viteCommonjs(),
        viteNodePolyfills(),
-        htmlTemplate({
+        viteTransformHtml({
+          entryPath: paths.targetEntry,
+          targetHtml: paths.targetHtml,
          data: {
-            publicPath: config.output?.publicPath,
            config: frontendConfig,
+            publicPath: config.output?.publicPath,
          },
        }),
      ],
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { JsonObject } from '@backstage/types';
+import { PluginOption } from 'vite';
+import fs from 'fs/promises';
+import { render } from 'ejs';
+import { relative } from 'path';
+
+export const viteTransformHtml = ({
+  targetHtml,
+  entryPath,
+  data,
+}: {
+  targetHtml: string;
+  entryPath: string;
+  data: JsonObject;
+}): PluginOption => ({
+  name: 'backstage:transform:html',
+  configureServer(s) {
+    s.middlewares.use(async (req, res, next) => {
+      const html = await fs.readFile(targetHtml, 'utf-8');
+      const rendered = `${render(html, data)}
+      <script type="module" src="${relative(targetHtml, entryPath)}"></script>`;
+
+      if (req.url === '/') {
+        res.end(await s.transformIndexHtml(req.url, rendered));
+      } else {
+        next();
+      }
+    });
+  },
+});
@@ -3833,6 +3833,7 @@ __metadata:
    "@swc/jest": ^0.2.22
    "@types/cross-spawn": ^6.0.2
    "@types/diff": ^5.0.0
+    "@types/ejs": ^3.1.3
    "@types/express": ^4.17.6
    "@types/fs-extra": ^9.0.1
    "@types/http-proxy": ^1.17.4
@@ -3865,6 +3866,7 @@ __metadata:
    ctrlc-windows: ^2.1.0
    del: ^7.0.0
    diff: ^5.0.0
+    ejs: ^3.1.9
    esbuild: ^0.19.0
    esbuild-loader: ^2.18.0
    eslint: ^8.6.0
@@ -3922,6 +3924,7 @@ __metadata:
    type-fest: ^2.19.0
    util: ^0.12.3
    vite: ^4.4.9
+    vite-plugin-html: ^3.2.0
    vite-plugin-html-template: ^1.2.0
    vite-plugin-node-polyfills: ^0.14.1
    vite-plugin-svgr: ^4.0.0
@@ -15035,7 +15038,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.1":
+"@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1":
  version: 4.2.1
  resolution: "@rollup/pluginutils@npm:4.2.1"
  dependencies:
@@ -17617,6 +17620,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/ejs@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "@types/ejs@npm:3.1.3"
+  checksum: b1b1c6c9d331d237523ebc410789f42edcdbb1d4cdd4a7a37ac61d2ce9c3fbcfbfe7d7f1a7f61c9334812347a0036afd52258ad2198f85545ebfb26d63475a75
+  languageName: node
+  linkType: hard
+
 "@types/es-aggregate-error@npm:^1.0.2":
  version: 1.0.2
  resolution: "@types/es-aggregate-error@npm:1.0.2"
@@ -22617,6 +22627,13 @@ __metadata:
  languageName: node
  linkType: hard

+"connect-history-api-fallback@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "connect-history-api-fallback@npm:1.6.0"
+  checksum: 804ca2be28c999032ecd37a9f71405e5d7b7a4b3defcebbe41077bb8c5a0a150d7b59f51dcc33b2de30bc7e217a31d10f8cfad27e8e74c2fc7655eeba82d6e7e
+  languageName: node
+  linkType: hard
+
 "connect-history-api-fallback@npm:^2.0.0":
  version: 2.0.0
  resolution: "connect-history-api-fallback@npm:2.0.0"
@@ -22634,7 +22651,7 @@ __metadata:
  languageName: node
  linkType: hard

-"consola@npm:^2.15.0":
+"consola@npm:^2.15.0, consola@npm:^2.15.3":
  version: 2.15.3
  resolution: "consola@npm:2.15.3"
  checksum: 8ef7a09b703ec67ac5c389a372a33b6dc97eda6c9876443a60d76a3076eea0259e7f67a4e54fd5a52f97df73690822d090cf8b7e102b5761348afef7c6d03e28
@@ -23123,16 +23140,16 @@ __metadata:
  languageName: node
  linkType: hard

-"css-select@npm:^4.1.3":
-  version: 4.1.3
-  resolution: "css-select@npm:4.1.3"
+"css-select@npm:^4.1.3, css-select@npm:^4.2.1":
+  version: 4.3.0
+  resolution: "css-select@npm:4.3.0"
  dependencies:
    boolbase: ^1.0.0
-    css-what: ^5.0.0
-    domhandler: ^4.2.0
-    domutils: ^2.6.0
-    nth-check: ^2.0.0
-  checksum: 40928f1aa6c71faf36430e7f26bcbb8ab51d07b98b754caacb71906400a195df5e6c7020a94f2982f02e52027b9bd57c99419220cf7020968c3415f14e4be5f8
+    css-what: ^6.0.1
+    domhandler: ^4.3.1
+    domutils: ^2.8.0
+    nth-check: ^2.0.1
+  checksum: d6202736839194dd7f910320032e7cfc40372f025e4bf21ca5bf6eb0a33264f322f50ba9c0adc35dadd342d3d6fae5ca244779a4873afbfa76561e343f2058e0
  languageName: node
  linkType: hard

@@ -23196,14 +23213,7 @@ __metadata:
  languageName: node
  linkType: hard

-"css-what@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "css-what@npm:5.1.0"
-  checksum: 0b75d1bac95c885c168573c85744a6c6843d8c33345f54f717218b37ea6296b0e99bb12105930ea170fd4a921990392a7c790c16c585c1d8960c49e2b7ec39f7
-  languageName: node
-  linkType: hard
-
-"css-what@npm:^6.1.0":
+"css-what@npm:^6.0.1, css-what@npm:^6.1.0":
  version: 6.1.0
  resolution: "css-what@npm:6.1.0"
  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
@@ -24218,12 +24228,12 @@ __metadata:
  languageName: node
  linkType: hard

-"domhandler@npm:^4.0.0, domhandler@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "domhandler@npm:4.3.0"
+"domhandler@npm:^4.0.0, domhandler@npm:^4.2.0, domhandler@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "domhandler@npm:4.3.1"
  dependencies:
    domelementtype: ^2.2.0
-  checksum: d2a2dbf40dd99abf936b65ad83c6b530afdb3605a87cad37a11b5d9220e68423ebef1b86c89e0f6d93ffaf315cc327cf1a988652e7a9a95cce539e3984f4c64d
+  checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa
  languageName: node
  linkType: hard

@@ -24250,7 +24260,7 @@ __metadata:
  languageName: node
  linkType: hard

-"domutils@npm:^2.5.2, domutils@npm:^2.6.0":
+"domutils@npm:^2.5.2, domutils@npm:^2.8.0":
  version: 2.8.0
  resolution: "domutils@npm:2.8.0"
  dependencies:
@@ -24291,6 +24301,13 @@ __metadata:
  languageName: node
  linkType: hard

+"dotenv-expand@npm:^8.0.2":
+  version: 8.0.3
+  resolution: "dotenv-expand@npm:8.0.3"
+  checksum: 128ce90ac825b543de3ece0154a51b056ab0dc36bb26d97a68cd0b8707327ecd3c182fb6ac63b26a0fcdfa85064419906a1065cb634f1f9dc08ad311375f1fc0
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^16.0.0":
  version: 16.0.0
  resolution: "dotenv@npm:16.0.0"
@@ -24411,14 +24428,14 @@ __metadata:
  languageName: node
  linkType: hard

-"ejs@npm:^3.1.6":
-  version: 3.1.7
-  resolution: "ejs@npm:3.1.7"
+"ejs@npm:^3.1.6, ejs@npm:^3.1.9":
+  version: 3.1.9
+  resolution: "ejs@npm:3.1.9"
  dependencies:
    jake: ^10.8.5
  bin:
    ejs: bin/cli.js
-  checksum: fe40764af39955ce8f8b116716fc8b911959946698edb49ecab85df597746c07aa65d5b74ead28a1e2ffa75b0f92d9bedd752f1c29437da6137b3518271e988c
+  checksum: af6f10eb815885ff8a8cfacc42c6b6cf87daf97a4884f87a30e0c3271fedd85d76a3a297d9c33a70e735b97ee632887f85e32854b9cdd3a2d97edf931519a35f
  languageName: node
  linkType: hard

@@ -28473,7 +28490,7 @@ __metadata:
  languageName: node
  linkType: hard

-"html-minifier-terser@npm:^6.0.2":
+"html-minifier-terser@npm:^6.0.2, html-minifier-terser@npm:^6.1.0":
  version: 6.1.0
  resolution: "html-minifier-terser@npm:6.1.0"
  dependencies:
@@ -34214,6 +34231,16 @@ __metadata:
  languageName: node
  linkType: hard

+"node-html-parser@npm:^5.3.3":
+  version: 5.4.2
+  resolution: "node-html-parser@npm:5.4.2"
+  dependencies:
+    css-select: ^4.2.1
+    he: 1.2.0
+  checksum: 2d2391147c83b402786eeab95d23ea4e24ca8608e0e70a2823bfd4f2a248be13a8cc31acfd55a0109e051131e4f0c17d7ada8d999ce70ff2e342ab0110f5da59
+  languageName: node
+  linkType: hard
+
 "node-html-parser@npm:^6.1.1":
  version: 6.1.5
  resolution: "node-html-parser@npm:6.1.5"
@@ -34557,7 +34584,7 @@ __metadata:
  languageName: node
  linkType: hard

-"nth-check@npm:^2.0.0, nth-check@npm:^2.0.1":
+"nth-check@npm:^2.0.1":
  version: 2.1.1
  resolution: "nth-check@npm:2.1.1"
  dependencies:
@@ -35670,6 +35697,13 @@ __metadata:
  languageName: node
  linkType: hard

+"pathe@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "pathe@npm:0.2.0"
+  checksum: 9a8149ce152088f30d15b0b03a7c128ba21f16b4dc1f3f90fe38eee9f6d0f1d6da8e4e47bd2a4f9e14aaac7c30ed01cfc86216479011de2bdc598b65e6f19f41
+  languageName: node
+  linkType: hard
+
 "pause@npm:0.0.1":
  version: 0.0.1
  resolution: "pause@npm:0.0.1"
@@ -42799,6 +42833,28 @@ __metadata:
  languageName: node
  linkType: hard

+"vite-plugin-html@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "vite-plugin-html@npm:3.2.0"
+  dependencies:
+    "@rollup/pluginutils": ^4.2.0
+    colorette: ^2.0.16
+    connect-history-api-fallback: ^1.6.0
+    consola: ^2.15.3
+    dotenv: ^16.0.0
+    dotenv-expand: ^8.0.2
+    ejs: ^3.1.6
+    fast-glob: ^3.2.11
+    fs-extra: ^10.0.1
+    html-minifier-terser: ^6.1.0
+    node-html-parser: ^5.3.3
+    pathe: ^0.2.0
+  peerDependencies:
+    vite: ">=2.0.0"
+  checksum: f5222247b65da1c36215f0b2f509fd3975a7426b8d44546beb49f3ba51ee87b3a6b6e6afc9e7567a0d8bd1016631f2db3f934808f62a7c8f7f83fa83d8561d2d
+  languageName: node
+  linkType: hard
+
 "vite-plugin-node-polyfills@npm:^0.14.1":
  version: 0.14.1
  resolution: "vite-plugin-node-polyfills@npm:0.14.1"