example-of-loading-config-in-script.ts

import { findPaths } from '@backstage/cli-common';
import { Command } from 'commander';
import { loadConfig, loadConfigSchema } from '@backstage/config-loader';
import { getPackages } from '@manypkg/get-packages';
import { ConfigReader, Config } from '@backstage/config';

export async function readConfig(argv: NodeJS.Process['argv']) {
  const program = new Command();
  program.option('--config <path>', 'Config files to load instead of app-config.yaml', []);

  program.parse(argv);

  const opts = program.opts();

  const paths = findPaths(__dirname);

  const { packages } = await getPackages(paths.targetDir);

  const schema = await loadConfigSchema({
    dependencies: packages.map(p => p.packageJson.name),
    // Include the package.json in the project root if it exists
    packagePaths: [paths.resolveTargetRoot('package.json')],
  });

  const configTargets = opts.config.map(arg => ({ path: paths.resolveTarget(arg) }));

  const { appConfigs } = await loadConfig({
    configRoot: paths.targetRoot,
    configTargets: configTargets,
  });

  const frontendAppConfigs = schema.process(appConfigs, {
    visibility: ['frontend'],
    withFilteredKeys: true,
    withDeprecatedKeys: true,
  });

  const frontendConfig = ConfigReader.fromConfigs(frontendAppConfigs);

  const url = resolveBaseUrl(frontendConfig);

  const host = frontendConfig.getOptionalString('app.listen.host') || url.hostname;
  const port =
    frontendConfig.getOptionalNumber('app.listen.port') || Number(url.port) || (url.protocol === 'https:' ? 443 : 80);

  return {
    host,
    port,
    base: url.pathname,
    frontendConfig,
    frontendAppConfigs,
  };
}

export function resolveBaseUrl(config: Config): URL {
  const baseUrl = config.getString('app.baseUrl');
  try {
    return new URL(baseUrl);
  } catch (error) {
    throw new Error(`Invalid app.baseUrl, ${error}`);
  }
}

inject.ts

export async function injectConfig(options: InjectOptions) {
  const { staticDir, logger, appConfigs } = options;

  const files = await fs.readdir(staticDir);
  const jsFiles = files.filter(file => file.endsWith('.js'));

  const escapedData = JSON.stringify(appConfigs).replace(/("|'|\\)/g, '\\$1');
  const injected = `/*__APP_INJECTED_CONFIG_MARKER__*/"${escapedData}"/*__INJECTED_END__*/`;

  for (const jsFile of jsFiles) {
    const path = resolvePath(staticDir, jsFile);

    const content = await fs.readFile(path, 'utf8');
    if (content.includes('__APP_INJECTED_RUNTIME_CONFIG__')) {
      logger.info(`Injecting env config into ${jsFile}`);

      const newContent = content.replace(
        '"__APP_INJECTED_RUNTIME_CONFIG__"',
        injected,
      );
      await fs.writeFile(path, newContent, 'utf8');
      return;
    } else if (content.includes('__APP_INJECTED_CONFIG_MARKER__')) {
      logger.info(`Replacing injected env config in ${jsFile}`);

      const newContent = content.replace(
        /\/\*__APP_INJECTED_CONFIG_MARKER__\*\/.*\/\*__INJECTED_END__\*\//,
        injected,
      );
      await fs.writeFile(path, newContent, 'utf8');
      return;
    }
  }
  logger.info('Env config not injected');
}