Backstage - How to consume environment variables?

Question

The Backstage documentation states that all environment variables must be "exposed" through the central configuration file, app-config.yaml.

However, the official documentation is not clear about the use of these variables, for example, in the .ts and .tsx files.

Could someone help, or exemplify with codes how this use is made?

Answer 1

Had the same question, ended up just using process.env.ENV_VAR in the typescript files and exporting environment variables before starting Backstage.

Answer 2

There's a standard configuration API for both frontend and backend plugins or codes. An API reference can be found here.

You can try something like:

import { Config } from '@backstage/config';

interface IBackendConfig {
  KEY_1: string;
  KEY_2: string;
  KEY_3: string;
}

const getBackendConfig = (config: Config): IBackendConfig => {
  return config.get<IBackendConfig>('backend.env');
}

In your app-config.yaml

backend:
env:
  KEY_1: "value1"
  KEY_2: "value2"
  KEY_3: "value3"

Note: Because of this syntax, configuration keys cannot contain dots.

Another option for accessing the env value is to create a sub-view of the configuration,

config.getConfig('backend').getString('env'). 

Answer 3

Now I can help those who are faced with the same difficulty I faced.

If you are developing a new front-end plugin, for example, you will need to create a configSchema.d.ts file in which you indicate the settings/variables it needs to access:

export interface Config {
    exampleConfig: {
      /**
       * Base URL Example Service
       * @visibility frontend
       */
      baseUrl?: string;
      /**
       * Params at url in Example Service
       * @visibility frontend
       */
      getParamsUrl?: string;
      /**
       * Number of results that must be obtained
       * @visibility frontend
       */
      resultLimit?: number;
      /**
       * URL for PUT method
       * @visibility frontend
       */
      putUrl?: string;
      /**
       * Params for PUT method
       * @visibility frontend
       */
      putParamsUrl?: string;
      /**
       * Token Example Service
       * @visibility frontend
       */
      token?: string;
    };

In the file responsible for creating the API, for example, you import ConfigApi from the @backstage/core-plugin-api package.

Below is an example of how variables/configurations could be accessed:

import { ConfigApi } from "@backstage/core-plugin-api";

[...]

export class ExampleClient implements ExampleApi {
    private readonly backendBaseUrl: string;
    private readonly baseUrl: string;
    private readonly getParamsUrl: string;
    private readonly queryResult: number;
    private readonly putUrl: string;
    private readonly putParamsUrl: string;
    private readonly token: string;
    private readonly managementAPi: ManagementRDMClient

    constructor(options: { configApi: ConfigApi; fetchApi: FetchApi }
    ) {
        this.backendBaseUrl = options.configApi.getString('backend.baseUrl');
        this.baseUrl = options.configApi.getString('exampleConfig.baseUrl');
        this.getParamsUrl = options.configApi.getString('exampleConfig.getParamsUrl');
        this.queryResult = options.configApi.getNumber('exampleConfig.resultLimit');
        this.putUrl = options.configApi.getString('exampleConfig.putUrl');
        this.putParamsUrl = options.configApi.getString('exampleConfig.putParamsUrl');
        this.token = options.configApi.getString('exampleConfig.token');
      }

[...]

}