reactjs - Backstage - ¿Cómo consumir variables de entorno?

La documentación de Backstage indica que todas las variables de entorno deben ser "expuestas" a través del archivo de configuración central, app-config.yaml.

Sin embargo, la documentación oficial no es clara sobre el uso de estas variables, por ejemplo, en los archivos .ts y .tsx.

¿Alguien podría ayudar o ejemplificar con códigos cómo se hace este uso?

Respuesta #1

Hay una API de configuración estándar tanto para complementos o códigos del frontend como del backend. Se puede encontrar una referencia de la API aquí.

Puedes probar algo como:

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');
}

En tu app-config.yaml

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

Nota: Debido a esta sintaxis, las claves de configuración no pueden contener puntos.

Otra opción para acceder al valor de env es crear una subvista de la configuración,

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

Respuesta #2

Ahora puedo ayudar a aquellos que se enfrentan a la misma dificultad que yo enfrenté.

Si estás desarrollando un nuevo complemento de front-end, por ejemplo, necesitarás crear un archivo configSchema.d.ts en el que indiques las configuraciones/variables a las que necesita acceder:

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;
    };

En el archivo responsable de crear la API, por ejemplo, importas ConfigApi del paquete @backstage/core-plugin-api.

A continuación se muestra un ejemplo de cómo se podrían acceder a las variables/configuraciones:

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');
      }

[...]

}