Merge pull request #8545 from backstage/rugvip/bundleconf

cli: make config available in index.html template

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>