{ "componentChunkName": "component---src-templates-blog-post-tsx", "path": "/blog/2022-02-14-component-library-backstage/", "result": {"data":{"blogPost":{"title":"Tutorial: How to use your company’s component library with Backstage","slug":"/blog/2022-02-14-component-library-backstage/","authorNodes":[{"name":"Taras Mankovski","slug":"/people/taras-mankovski/"}],"markdown":{"html":"

One of the first questions that a developer starting a Backstage project has to answer is how to make their developer portal match their company’s corporate style. There are several ways of doing this, but I recommend using an approach that will allow developers to use as much of the Backstage UI as possible so that everyone gets the most value from Backstage. The further the developer portal is from the beaten path, the fewer Backstage elements the development team will have access to.

\n

The approach that retains the most value from Backstage is using a custom Material UI theme which allows developers to use all of the existing Backstage plugins. If specific components need to be modified, there is the option of overriding Backstage and Material UI styles. Admittedly, this approach can take a fair bit of tweaking and can be somewhat tedious, but will likely result in being able to use all of the existing and future Backstage plugins.

\n

If using the UI components provided by Backstage plugins is less important than using your internal component library, there are still good reasons to maintain access to their data. In addition to Material UI components, the Backstage frontend framework provides a data fetching API for retrieving data from the backend. Even if you’re not using the UI components of Backstage plugins, you can continue to benefit from them by leveraging their data API.

\n

In this tutorial, I will illustrate how to replace Material UI with the Fluent UI component library, then use the Catalog Client API and FluentUI’s DetailList to display a list of catalog entities from Backstage's backend. Let’s get started!

\n

Create a Backstage App

\n

If you don’t already have an instance of a Backstage app, create one by running:

\n
npx @backstage/create-app
\n

For this tutorial, you can select SQLite as your backend database as it will save you the hassle of having to run a local instance of Postgres.

\n

Clean up your app

\n

Before we start adding our theme, we need to do a bit of clean up. Since we’re not going to be using Material UI, there is no need to keep its dependencies. We’ll start by removing those packages:

\n
yarn workspace app remove @backstage/theme @material-ui/core @material-ui/icons
\n

You can also go ahead and delete everything in the packages/app/src/components/ directory and create a simple Home component that will be our new Home page (without all the Backstage frontend elements):

\n
// packages/app/src/components/Home.tsx\n\nimport React from 'react';\n\nexport const Home = () => {\n  return <p>Home</p>;\n}
\n

Next, you need to remove all the routes and plugins and add the new Home component to your app. There is a lot to remove so I’ll show you what your App.tsx in ./packages/app/src/ should look like:

\n
import React from 'react';\nimport { Route } from 'react-router';\n\nimport { apis } from './apis';\nimport { createApp } from '@backstage/app-defaults';\nimport { FlatRoutes } from '@backstage/core-app-api';\n\nimport { Home } from './components/Home';\n\nconst app = createApp({\n  apis,\n});\n\nconst AppProvider = app.getProvider();\nconst AppRouter = app.getRouter();\n\nconst routes = (\n  <FlatRoutes>\n    <Route path=\"/\" element={<Home />} />\n  </FlatRoutes>\n);\n\nconst App = () => (\n  <AppProvider>\n    <AppRouter>\n      {routes}\n    </AppRouter>\n  </AppProvider>\n);\n\nexport default App;
\n

Install your component library

\n

Next, install the @fluentui/react component library to your frontend by running:

\n
yarn workspace app add @fluentui/react
\n

This will allow you to use components from the library in the frontend application. We can now modify Home.tsx to display a component from @fluentui/react:

\n
import React from 'react';\n+ import { PrimaryButton } from '@fluentui/react';\n\nexport const Home = () => {\n-  return <p>Home</p>;\n+  return <PrimaryButton>Press me!</PrimaryButton>;\n}
\n

If you run yarn start, you should be able to see a button with the default Fluent UI style that says “Press me!”.

\n

Change the theme provider

\n

By default, Backstage’s createApp uses a Material UI theme provider that adds Backstage’s specific styles. We want to replace this default theme provider with the one from your component library. To do this, you need to modify App.tsx:

\n
- import React from 'react';\n+ import React, { ComponentType } from 'react';\n+ import { ThemeProvider, PartialTheme } from '@fluentui/react';\n...\n+ const myTheme: PartialTheme = {\n+   semanticColors: {\n+     primaryButtonBackground: 'red',\n+     primaryButtonText: 'white',\n+   },\n+ }\n+ \n+ const MyThemeProvider: ComponentType<{}> = ({ children }) => {\n+   return (<ThemeProvider theme={myTheme}>{children}</ThemeProvider>);\n+ }\n+\nconst app = createApp({\n  apis,\n+  components: {\n+    ThemeProvider: MyThemeProvider,\n+  }\n})
\n

Once you make these changes, your UI is now using your component library. Be aware that if you render any components that come with Backstage, they will not work because the default Backstage theme provider will be missing.

\n

Use Backstage Catalog API to fetch data and display it in a table

\n

The work that you did so far was to add a new theme to the Backstage component. You did this by modifying the frontend app. Other teams sometimes take a different approach where they create an entirely new Create React App project and import that to their Backstage app. Starting a new project may seem appealing, but in practice you’d be giving up more features than you realize. One of the most important lost features is the ability to call data APIs provided by the Backstage framework.

\n

If your connection to the backend is intact, you can still use the data fetching API provided by Backstage. The Backstage UI components you deleted earlier already had data fetching implemented, which means the Home component you created is missing that functionality. I will now show how to use the data API to fetch data from the Backstage backend and display it in a DetailList component.

\n

Make catalog API available in your application

\n

First, install @backstage/catalog-client:

\n
yarn workspace app add @backstage/catalog-client
\n

You can make the Catalog API available in your application by adding an API factory to the apis.ts file in your package/app/src/ directory:

\n
  createApiFactory,\n+   discoveryApiRef\n} from '@backstage/core-plugin-api';\n+ import { catalogApiRef } from '@backstage/plugin-catalog-react';\n+ import { CatalogClient } from '@backstage/catalog-client';\n\nexport const apis: AnyApiFactory[] = [\n+   createApiFactory({\n+     api: catalogApiRef,\n+     deps: { discoveryApi: discoveryApiRef },\n+     factory: ({ discoveryApi }) => new CatalogClient({ discoveryApi })\n+   }),\n  createApiFactory({
\n

Let’s unpack what you see above. You will use the Catalog API reference (which comes from @backstage/plugin-catalog-react) to look up the API in your components when using the useApi hook. The AnyApiFactory factory controls how the Catalog Client is created. CatalogClient needs DiscoveryApiRef, which provides the factory access to the DiscoveryApi. The DiscoveryApi is used to find the URL where the Backstage Catalog API can be found. This piping will make it easy to call the API in future steps.

\n

Use useApi hook to get the CatalogApi

\n

Let’s get rid of the PrimaryButton from earlier and make the following additional changes in your Home component:

\n
- import { PrimaryButton } from '@fluentui/react';\n+ import { catalogApiRef } from '@backstage/plugin-catalog-react';\n+ import { useApi } from '@backstage/core-plugin-api';\n\nexport const Home = () => {\n-   return <PrimaryButton>Press me!</PrimaryButton>\n+   const catalogApi = useApi(catalogApiRef);\n}
\n

This provides your component with access to reference to the Catalog API. As a result, we can call this API to retrieve data from the Catalog API.

\n

Use useAsync hook to call the CatalogApi

\n

To call the CatalogApi, we need to call catalogApi.getEntities function. This function needs to be called with our component renders. We can use the useAsync hook to call catalogApi.getEntities:

\n
+ import useAsync from 'react-use/lib/useAsync';\n\nexport const Home = () => {\n  const catalogApi = useApi(catalogApiRef);\n+   const {\n+     value = { items: [] },\n+     // loading,\n+     // error,\n+   } = useAsync(() =>\n+     catalogApi.getEntities({\n+       filter: {\n+         kind: 'Component',\n+       },\n+     }),\n+   );\n}
\n

We could implement the same thing with useEffect and useState but it’s a lot more work. useAsync automatically gives us loading and error values so we don’t need to handle those situations manually.

\n

Use useMemo hook to convert result from CatalogApi into items for DetailsList

\n

FluentUI’s DetailList needs to convert results from the CatalogApi. The data needs to be in a specific format so that we can display it in the table:

\n
- import React from 'react';\n+ import React, { useMemo } from 'react';\n\nexport const Home = () => {\n  ...\n+   const items = useMemo(\n+     () =>\n+       value.items.map(item => ({\n+         key: item.metadata.uid,\n+         name: item.metadata.name,\n+         description: item.metadata.description,\n+       })),\n+     [value],\n+   );\n}
\n

useMemo allows us to covert the response from a CatalogApi response format to DetailList format and cache the result. The caching part is important because without it the list will re-render every time anything in that component changes.

\n

Render DetailList with items

\n

The final step is to import DetailList from @fluentui/react and render it. Making this last change should generate a list of items from the catalog using the Catalog API and rendered in the components from FluentUI library:

\n
+ import { DetailsList } from '@fluentui/react';\n\nexport const Home = () => {\n  ...\n+   return <DetailsList items={items} />;\n}
\n

To check to make sure these new changes are working properly, run yarn dev (you’ll need the backend to be running too).

\n

This whole process is a bit involved but doing it this way saves you a lot of trouble in the long run by allowing you to use the data fetching APIs that come with Backstage plugins.

\n

Conclusion

\n

In this tutorial, I showed you how to clean up the frontend application in preparation for using your own component library, install a component library other than Material UI, override the theme provider to use your component library’s theme provider, and use Backstage’s data fetching API provided by the Catalog API plugin.

\n

This is the “right” way to use your company’s component library because it allows you to use it without completely eliminating all of the benefits that the Backstage framework provides in the frontend application. You might not be able to use the components that Backstage plugins provide because they are tied to Material UI, but you can still use the data fetching APIs that idiomatic Backstage plugins include.

\n

I hope you enjoyed this tutorial and learned something about Backstage. You can find me on Twitter, GitHub, or via email - tarasm@frontside.com. All of the code from this tutorial can be found in https://github.com/taras/backstage-custom-frontend

","frontmatter":{"date":"February 14, 2022","description":"In this tutorial, Taras will show you how to replace Material UI for your component library in Backstage without losing access to its API.","tags":["backstage"],"img":{"childImageSharp":{"fixed":{"src":"/static/20b208f9f906897d36d20a0ea7065e58/31987/2022-backstage-components.png"}}}}}}},"pageContext":{"id":"8ed19c50-26ed-5f23-9fec-37841ef77523"}}, "staticQueryHashes": ["1241260443"]}