How to connect Backstage with Angular or React

Question

What Does “Connecting Backstage with Angular or React” Mean?

Backstage is built entirely with React under the hood. So:

• ✅ If you want to extend Backstage, you will write custom React plugins.
• ⚠️ You can’t directly use Angular inside Backstage easily, because it's not designed for Angular apps.

---

Two Scenarios Explained

---

✅ Scenario 1: You're Building a Plugin for Backstage

If you want to add a new page, dashboard, or tool to Backstage, you’ll build it as a React plugin.

Example: Add a custom “Service Health Dashboard”

You'd write:

// MyCustomPluginPage.tsx
import React from 'react';
import { Content, Page } from '@backstage/core-components';

export const MyCustomPluginPage = () => (
  <Page themeId="tool">
    <Content>
      <h1>Service Health</h1>
      <p>This dashboard shows the current service health metrics.</p>
    </Content>
  </Page>
);

Then register it in the plugin system using:

export const plugin = createPlugin({
  id: 'my-custom-plugin',
  routes: {
    root: rootRouteRef,
  },
});

Official plugin tutorial here

---

⚠️ Scenario 2: You Have an Angular App You Want to Show in Backstage

Backstage doesn't natively support Angular components because it's built with React. But here’s how you can still "integrate" Angular apps:

Option A: Embed Angular via iframe

If you already have an Angular app, you can render it inside Backstage using an iframe.

import React from 'react';
import { Content, Page } from '@backstage/core-components';

export const AngularAppPage = () => (
  <Page themeId="tool">
    <Content>
      <iframe
        src="https://your-angular-app.internal"
        width="100%"
        height="800"
        frameBorder="0"
        title="Angular App"
      />
    </Content>
  </Page>
);

This keeps your Angular code separate but visible within Backstage.

Option B: Link out to Angular Apps

If embedding doesn't make sense, you can add a menu item or catalog entry in Backstage that links users to your Angular frontend.

---

Summary

Use Case	Best Approach
Build a new plugin/page for Backstage	Use React
Reuse an Angular app inside Backstage	Embed via iframe, or link to it externally
Build UI components for Backstage	Must be React (Backstage = React app)
Show documentation or tools from Angular project	Use TechDocs, and render the Angular URL inside if needed

---

Tip for Angular Teams

If your org is heavily using Angular, consider:

• Keeping Angular apps separate
• Using Backstage as the portal to link/organize them
• Writing small React wrapper plugins to bridge them where needed

---