Stateful Backstage Plugins

Plugins

• Stateful
• Stateful Backend

Getting Started

First install the frontend plugin into your app:

# From your Backstage root directory
yarn --cwd packages/app add @statefulhq/backstage-plugin-stateful

Modify your app routes in packages/app/src/App.tsx to include the Stateful component exported from the plugin, for example:

+  import { StatefulPage } from '@statefulhq/backstage-plugin-stateful';

const routes = (

  <FlatRoutes>
    ...
+   <Route path="/stateful" element={<StatefulPage />} />
    {/* other routes... */}

Add a Stateful icon to the Sidebar to easily access the Stateful. In packages/app/src/components/Root.tsx add:

+ import FolderSharedIcon from '@material-ui/icons/FolderShared';

  <SidebarDivider />
  <SidebarScrollWrapper>
+   <SidebarItem icon={FolderSharedIcon} to="/stateful" text="Stateful" />
    {/* ...other sidebar-items */}

Now you should install the backend plugin:

# From your Backstage root directory
yarn --cwd packages/backend add @statefulhq/backstage-plugin-stateful-backend

Modify your index fine in packages/backend/src/index.ts to import the Stateful backend plugin, for example:

+   backend.add(import('@statefulhq/backstage-plugin-stateful-backend'));
backend.start();

Now you should configure a proxy and the stateful param so the plugin can call correctly our platform API. inside your app-config.yaml you should add this.

proxy:
  endpoints:
    '/stateful':
      target: https://api.us-central1.stateful.com
      allowedHeaders:
        - "Authorization"
        - "Auth-Provider"
        - "Content-Type"

stateful:
  appUrl: https://us-central1.stateful.com

Publish plugins to NPM

Once you have determined the changes you want to apply to a new version of a plugin, you must run changeset to initiate the deployment process.

yarn changeset

Chagenset will ask you which plugins you want to update and if the change is a major, minor or patch change. Once you have answered the questions, changeset will create a .md file in the changesets folder with the changes you want to apply.

Merge these changes into the main branch. Afterward, a GitHub Action (GA) will invoke Changeset to create a new Pull Request that cleans up the changeset .md files and allows you to review the new version of the plugins before publishing.

Once this Pull Request is merged, another GA will take over, responsible for generating the GitHub Release and deploying the updated plugin version to NPM.