cli: make config available in index.html template

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/nice-feet-hope.md

@@ -0,0 +1,30 @@
+---
+'@backstage/create-app': patch
+---
+
+The `index.html` template of the app has been updated to use the new `config` global provided by the Backstage CLI.
+
+To apply this change to an existing app, make the following changes to `packages/app/public/index.html`:
+
+```diff
+-    <title><%= app.title %></title>
++    <title><%= config.getString('app.title') %></title>
+```
+
+```diff
+-    <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId === 'string') { %>
++    <% if (config.has('app.googleAnalyticsTrackingId')) { %>
+     <script
+       async
+-      src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"
++      src="https://www.googletagmanager.com/gtag/js?id=<%= config.getString('app.googleAnalyticsTrackingId') %>"
+     ></script>
+```
+
+```diff
+-      gtag('config', '<%= app.googleAnalyticsTrackingId %>');
++      gtag(
++        'config',
++        '<%= config.getString("app.googleAnalyticsTrackingId") %>',
++      );
+```

.changeset/purple-grapes-kick.md

@@ -0,0 +1,15 @@
+---
+'@backstage/cli': patch
+---
+
+The frontend configuration is now available as a `config` global during templating of the `index.html` file. This allows for much more flexibility as the values available during templating is not longer hardcoded to a fixed set of values.
+
+For example, to access the app title, you would now do the following:
+
+```html
+<title><%= config.getString('app.title') %></title>
+```
+
+Along with this change, usage of the existing `app.<key>` values has been deprecated and will be removed in a future release. The general pattern for migrating existing usage is to replace `<%= app.<key> %>` with `<%= config.getString('app.<key>') %>`, although in some cases you may need to use for example `config.has('app.<key>')` or `config.getOptionalString('app.<key>')` instead.
+
+The [`@backstage/create-app` changelog](https://github.com/backstage/backstage/blob/master/packages/create-app/CHANGELOG.md#049) also contains more details how to migrate existing usage.

.changeset/soft-scissors-own.md

@@ -0,0 +1,5 @@
+---
+'embedded-techdocs-app': patch
+---
+
+The `index.html` template was updated to use the new `config` global.

packages/app/public/index.html

@@ -47,13 +47,12 @@
         min-height: 100%;
       }
     </style>
-    <title><%= app.title %></title>
+    <title><%= config.getString('app.title') %></title>
 
-    <% if (app.googleAnalyticsTrackingId && typeof
-    app.googleAnalyticsTrackingId==='string' ) { %>
+    <% if (config.has('app.googleAnalyticsTrackingId')) { %>
     <script
       async
-      src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"
+      src="https://www.googletagmanager.com/gtag/js?id=<%= config.getString('app.googleAnalyticsTrackingId') %>"
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
@@ -62,10 +61,12 @@
       }
       gtag('js', new Date());
 
-      gtag('config', '<%= app.googleAnalyticsTrackingId %>');
+      gtag(
+        'config',
+        '<%= config.getString("app.googleAnalyticsTrackingId") %>',
+      );
     </script>
-    <% } %> <% if (app.datadogRum.clientToken && app.datadogRum.applicationId )
-    { %>
+    <% } %> <% if (config.has('app.datadogRum')) { %>
     <script>
       (function (h, o, u, n, d) {
         h = h[d] = h[d] || {
@@ -88,11 +89,12 @@
       );
       DD_RUM.onReady(function () {
         DD_RUM.init({
-          clientToken: '<%= app.datadogRum.clientToken %>',
-          applicationId: '<%= app.datadogRum.applicationId %>',
-          site: '<%= app.datadogRum.site %>' || 'datadoghq.com',
+          clientToken: '<%= config.getString("app.datadogRum.clientToken") %>',
+          applicationId:
+            '<%= config.getString("app.datadogRum.applicationId") %>',
+          site: '<%= config.getOptionalString("app.datadogRum.site") || "datadoghq.com" %>',
           service: 'backstage',
-          env: '<%= app.datadogRum.env %>',
+          env: '<%= config.getString("app.datadogRum.env") %>',
           sampleRate: 100,
           trackInteractions: true,
         });

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

@@ -15,6 +15,7 @@
  */
 
 import fs from 'fs-extra';
+import chalk from 'chalk';
 import { resolve as resolvePath } from 'path';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -130,28 +131,38 @@ export async function createConfig(
     }),
   );
 
+  const deprecatedAppConfig = {
+    title: frontendConfig.getString('app.title'),
+    baseUrl: validBaseUrl.href,
+    googleAnalyticsTrackingId: frontendConfig.getOptionalString(
+      'app.googleAnalyticsTrackingId',
+    ),
+    datadogRum: {
+      env: frontendConfig.getOptionalString('app.datadogRum.env'),
+      clientToken: frontendConfig.getOptionalString(
+        'app.datadogRum.clientToken',
+      ),
+      applicationId: frontendConfig.getOptionalString(
+        'app.datadogRum.applicationId',
+      ),
+      site: frontendConfig.getOptionalString('app.datadogRum.site'),
+    },
+  };
+
   plugins.push(
     new HtmlWebpackPlugin({
       template: paths.targetHtml,
       templateParameters: {
         publicPath: validBaseUrl.pathname.replace(/\/$/, ''),
-        app: {
-          title: frontendConfig.getString('app.title'),
-          baseUrl: validBaseUrl.href,
-          googleAnalyticsTrackingId: frontendConfig.getOptionalString(
-            'app.googleAnalyticsTrackingId',
-          ),
-          datadogRum: {
-            env: frontendConfig.getOptionalString('app.datadogRum.env'),
-            clientToken: frontendConfig.getOptionalString(
-              'app.datadogRum.clientToken',
+        get app() {
+          console.warn(
+            chalk.red(
+              'DEPRECATION WARNING: using `app.<key>` in the index.html template is deprecated, use `config.getString("app.<key>")` instead.',
             ),
-            applicationId: frontendConfig.getOptionalString(
-              'app.datadogRum.applicationId',
-            ),
-            site: frontendConfig.getOptionalString('app.datadogRum.site'),
-          },
+          );
+          return deprecatedAppConfig;
         },
+        config: frontendConfig,
       },
     }),
   );

packages/create-app/templates/default-app/packages/app/public/index.html

@@ -47,12 +47,11 @@
         min-height: 100%;
       }
     </style>
-    <title><%= app.title %></title>
-    <% if (app.googleAnalyticsTrackingId && typeof app.googleAnalyticsTrackingId
-    === 'string') { %>
+    <title><%= config.getString('app.title') %></title>
+    <% if (config.has('app.googleAnalyticsTrackingId')) { %>
     <script
       async
-      src="https://www.googletagmanager.com/gtag/js?id=<%= app.googleAnalyticsTrackingId %>"
+      src="https://www.googletagmanager.com/gtag/js?id=<%= config.getString('app.googleAnalyticsTrackingId') %>"
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
@@ -61,7 +60,10 @@
       }
       gtag('js', new Date());
 
-      gtag('config', '<%= app.googleAnalyticsTrackingId %>');
+      gtag(
+        'config',
+        '<%= config.getString("app.googleAnalyticsTrackingId") %>',
+      );
     </script>
     <% } %>
   </head>

packages/embedded-techdocs-app/public/index.html

@@ -47,7 +47,7 @@
         min-height: 100%;
       }
     </style>
-    <title><%= app.title %></title>
+    <title><%= config.getString('app.title') %></title>
   </head>
   <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>