Chore: Add capability for overriding local development behaviour using env vars (#85603)

scripts/webpack/env-util.js

@@ -0,0 +1,29 @@
+const { parse } = require('ini');
+const { readFileSync, existsSync } = require('node:fs');
+
+const getEnvConfig = () => {
+  const defaultSettings = readFileSync(`./conf/defaults.ini`, {
+    encoding: 'utf-8',
+  });
+
+  const customSettings = existsSync(`./conf/custom.ini`)
+    ? readFileSync(`./conf/custom.ini`, {
+        encoding: 'utf-8',
+      })
+    : '';
+
+  const defaults = parse(defaultSettings);
+  const custom = parse(customSettings);
+
+  const merged = { ...defaults.frontend_dev, ...custom.frontend_dev };
+  // Take all frontend keys from the ini file and prefix with `frontend_dev_`,
+  // so they can be added to `process.env` elsewhere
+  return Object.entries(merged).reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [`frontend_dev_${key}`]: value,
+    };
+  }, {});
+};
+
+module.exports = getEnvConfig;

scripts/webpack/webpack.dev.js

@@ -6,11 +6,12 @@ const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
-const { DefinePlugin } = require('webpack');
+const { DefinePlugin, EnvironmentPlugin } = require('webpack');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 const { merge } = require('webpack-merge');
 const WebpackBar = require('webpackbar');
 
+const getEnvConfig = require('./env-util.js');
 const common = require('./webpack.common.js');
 const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 // esbuild-loader 3.0.0+ requires format to be set to prevent it
@@ -27,6 +28,8 @@ function getDecoupledPlugins() {
   return packages.filter((pkg) => pkg.dir.includes('plugins/datasource')).map((pkg) => `${pkg.dir}/**`);
 }
 
+const envConfig = getEnvConfig();
+
 module.exports = (env = {}) => {
   return merge(common, {
     devtool: 'source-map',
@@ -139,6 +142,7 @@ module.exports = (env = {}) => {
         color: '#eb7b18',
         name: 'Grafana',
       }),
+      new EnvironmentPlugin(envConfig),
     ],
 
     stats: 'minimal',

scripts/webpack/webpack.prod.js

@@ -6,10 +6,12 @@ const { EsbuildPlugin } = require('esbuild-loader');
 const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
+const { EnvironmentPlugin } = require('webpack');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const { merge } = require('webpack-merge');
 
+const getEnvConfig = require('./env-util.js');
 const common = require('./webpack.common.js');
 const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 
@@ -21,6 +23,8 @@ const esbuildOptions = {
   jsx: 'automatic',
 };
 
+const envConfig = getEnvConfig();
+
 module.exports = (env = {}) =>
   merge(common, {
     mode: 'production',
@@ -87,5 +91,6 @@ module.exports = (env = {}) =>
           }
         });
       },
+      new EnvironmentPlugin(envConfig),
     ],
   });