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

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').