open-index/open-npm huggingface dataset:
npm package: @mexl/plugin-envinfo
Description: Welcome to the envinfo plugin!
Latest version: 0.2.0

# envinfo

Welcome to the envinfo plugin!

_This plugin was created through the Backstage CLI_

## Getting started

Prerquisite : This requires https://www.npmjs.com/package/@mexl/plugin-envinfo-backend working before you implement envinfo

When you're working with multiple backstage environments, it can be challenging to differentiate between non-production environments, especially in the world of cloud deployment. However, there is a plugin that can help with this problem. This plugin constantly displays the current environment, so if real users are using a demo or sandbox environment, they have a clear understanding of the environment they are using. Additionally, it helps developers by displaying the current version deployed in each environment at all times. This can be incredibly useful for keeping track of changes and ensuring that everyone is on the same page when it comes to the environment they are working in.

Following is an example how it looks
![state](./asset/state.png)


Also if you click on the envinfo bar this comes up with more information which can be configured in app-config.yaml, refer to plugin-envinfo-backend

![dialog](./assets/dialog.png)

## Add dependency to App.tsx

```javascript
import { SystemInfo } from '@mexl/plugin-envinfo';
```


## Add app route in root for this to be visible on backstage page

```javascript
<AppRouter>
      <Root>
      <SystemInfo />
        {routes}
      </Root>
</AppRouter>
```