@mexl/plugin-envinfo-backend

This is a backend plugin for envinfo in the @mexl suite of plugins. It provides a feature to display the current environment information on the Development Portal for all non-production environments.

Purpose

The purpose of this plugin is to distinguish between development, test, and validation environments to avoid confusion for users accessing the portal. The solution clearly indicates which environment the portal is currently operating in, ensuring that users are aware and can easily distinguish non-production environments from the production environment.

Why

• Clarity for Users: By clearly indicating the current environment, users can easily understand where they are working, reducing confusion and improving usability.
• Preventing Mistakes: By distinguishing non-production environments from the production environment, we can reduce the chances of users making mistakes such as modifying production data or settings by accident.

Usage

To use this plugin, include it in your Backstage app's plugins directory and register it in your apis.ts file.

// In packages/app/src/apis.ts
import { createEnvInfoBackend } from '@mexl/plugin-envinfo-backend';

// ...

builder.add(createEnvInfoBackend());

To add this file to backend/plugins/envinfo.ts, you can follow these steps:

1. Navigate to the backend/plugins directory in your project.
2. Create a new file named envinfo.ts.

import { createRouter } from '@mexl/plugin-envinfo-backend';
import { Router } from 'express';
import { Config } from '@backstage/config';
import { PluginEnvironment } from '../types';

export default async function createPlugin(_env: PluginEnvironment,config: Config): Promise<Router> {
  return await createRouter(config);
}

Copy and paste the provided code into the envinfo.ts file.

Changes to backend/index.ts for @mexl/plugin-envinfo-backend

The backend/index.ts file has been updated to include the @mexl/plugin-envinfo-backend plugin. This plugin provides a feature to display the current environment information on the Development Portal for all non-production environments.

Changes Made

• Import the plugin: The sysInfo import statement has been added to import the envinfo plugin.

  import sysInfo from './plugins/envinfo';

• Create the plugin environment: The systemInfoEnv constant has been added to create the environment for the envinfo plugin.

  const systemInfoEnv = useHotMemoize(module, () => createEnv('sysInfo'));

• Add the plugin to the API router: The apiRouter.use('/envinfo', await sysInfo(systemInfoEnv, config)); line has been added to add the envinfo plugin to the API router.

  apiRouter.use('/envinfo', await sysInfo(systemInfoEnv, config));

How to Use

With these changes, the @mexl/plugin-envinfo-backend plugin is now part of your Backstage backend. It will provide an API endpoint at /api/envinfo/envconfig that returns the current environment information.

You can use this endpoint in your frontend to display the current environment information on the Development Portal. This can help users distinguish between development, test, and validation environments, reducing confusion and preventing mistakes.

Finally app config changes

To add this information to the app-config.yaml file and dynamically fetch data from different environments, follow these steps:

Open the app-config.yaml file in your project. Copy and paste the provided YAML code into the app-config.yaml file.

# envinfo non prod environments configuration. ** Supports html tags in information.
environments:
  env:
    - id: dev
      title: Development
      contains: -dev
      information: This is development environment, this will be unstable with limited availability when developers may continuously deploy code to this environment.  <br><br><b>No guarantee of data on this environment.</b> <br> If You expect data to be retained use production env.
    - id: test
      title: Test
      contains: -tst
      information: This is test environment, this will be unstable with limited availability during deployment of code to this environment.  <br><br><b>No guarantee of data on this environment.</b> <br> If You expect data to be retained use production env.
    - id: val
      title: Validation
      contains: -val
      information: This is validation environment, this environment will have production like code most of time.  <br><br><b>No guarantee of data on this environment.</b> <br> If You expect data to be retained use production env.
    - id: local
      title: Local
      contains: localhost
      information: This is local development, you can only have this environment accessible if you are running backstage locally