Backstage Firebase Functions Plugin

This plugin is not actively maintained today. You can still install and use it. Just keep the status in mind.

Firebase Functions lets you run backend code without managing servers. You write small functions. They run on Google Cloud in response to HTTP calls, schedule triggers, or events from Firebase products. Teams use it for tasks like webhooks, data processing, and scheduled jobs. It keeps client apps light while moving sensitive work to a trusted runtime.

This plugin brings those functions into Backstage. It adds a view on your service page that shows key details from your Firebase projects. You can jump to the Google Cloud console for each function to check logs or an overview. That cuts context switching during debugging. It helps on call folks see what exists, what it is called, and where to investigate next.

Typical use cases include incident response, auditing, and day to day visibility. Platform teams get a quick map of which services own which functions. Service owners can spot missing functions or stale ones. New team members can discover how a service interacts with Firebase without hunting across repos.

The plugin is open source and built for self hosted Backstage. It relies on your catalog data to connect services to their functions. If your catalog is accurate, the view stays accurate. If you are standardizing on Firebase Functions, this plugin gives you a clear window into production.

A screenshot of the Firebase Functions plugin. It is showing a functions details for a sample service.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

Run this in your Backstage app package

Copy

cd packages/app
yarn add @roadiehq/backstage-plugin-firebase-functions

Add a Firebase Functions tab to the service entity page

Edit packages app src components catalog EntityPage.tsx

Import the components

Copy

import {
  EntityFirebaseFunctionsContent,
} from '@roadiehq/backstage-plugin-firebase-functions';
import { EntityLayout } from '@backstage/plugin-catalog';

Add a new route inside your service entity layout

Copy

const serviceEntityPage = (
  <EntityLayout>
    {/* other routes */}
    <EntityLayout.Route path="/firebase-functions" title="Firebase Functions">
      <EntityFirebaseFunctionsContent />
    </EntityLayout.Route>
  </EntityLayout>
);

If your file defines a different entity page variable name, add the route in that layout instead

Add the optional overview card

Edit packages app src components catalog EntityPage.tsx

Import the card and helpers

Copy

import {
  isFirebaseFunctionsAvailable,
  EntityFirebaseFunctionsCard,
} from '@roadiehq/backstage-plugin-firebase-functions';
import { EntitySwitch } from '@backstage/plugin-catalog';
import { Grid } from '@mui/material';

Add the card inside your overview content

Copy

const overviewContent = (
  <Grid container spacing={3}>
    {/* other overview cards */}
    <EntitySwitch>
      <EntitySwitch.Case if={isFirebaseFunctionsAvailable}>
        <Grid item md={6}>
          <EntityFirebaseFunctionsCard />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

Annotate your catalog entities

Add this to the entity yaml for each service that has Firebase Functions

Copy

metadata:
  annotations:
    cloud.google.com/function-ids: projects/<project-name>/locations/<region-name>/functions/<function-name>

Replace the placeholders with your project name region name and function name

Changelog

The Firebase Functions plugin has not seen any significant changes since a year ago.

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo