iFrame logo

Backstage iFrame Plugin

Created by Roadie

Installation Instructions

These instructions apply to self-hosted Backstage only. To use this plugin on Roadie, visit the docs.

Install the plugin into your Backstage instance.

Copy
yarn --cwd packages/app add @roadiehq/backstage-plugin-iframe

Add allowlisting to your app-config.yaml as required (optional).

Copy
// app-config.yaml
iframe:
  allowList: ["some-domain.com"]

Add to your home page.

Copy
// packages/app/src/components/home/HomePage.tsx
import { HomePageIFrameCard } from '@roadiehq/backstage-plugin-iframe';

export const HomePage = () => {
  return (
    ...
    <Grid item xs={12} md={6}>
        <HomePageIFrameCard
          title="Super cool title"
          src="https://example.com"
        />
      </Grid>
    ...
  );
};

Add to your entity page

Copy
// packages/app/src/components/catalog/EntityPage.tsx
import {
  iframePlugin,
  EntityIFrameCard,
  EntityIFrameContent,
} from '@roadiehq/backstage-plugin-iframe';
...

const contentProps = {
  frames: [
    {
      src: "https://example.com"
    }
  ],
  title: "super cool title"
}

const serviceEntityPage = (
  <EntityLayoutWrapper>
    ...
    <EntityLayout.Route
      path="/mycustom-iframes"
      title="Iframes">
        <EntityIFrameContent {...iframeProps} />
    </EntityLayout.Route>
    ...
  </EntityLayoutWrapper>
);

const iframeProps = {
  src: "https://example.com"
}

const overviewContent = (
  <Grid container spacing={3}>
    ...
    <Grid item md={8}>
      <EntityIFrameCard {...iframeProps}/>
    </Grid>
    ...
  </Grid>
);

Things to Know

Changelog

This changelog is produced from commits made to the iFrame plugin since a year ago. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Breaking changes

  • Upgrade to Backstage 1.40. Apps on older Backstage may fail to build. #1952 merged 3 months ago

Maintenance

  • Remove unused dependencies in the iFrame plugin. Smaller install size. #1847 merged 7 months ago
  • Update Backstage packages to keep current. #1728 merged 11 months ago
  • Routine dependency updates. #1684 merged 12 months ago

Reverts

  • Revert the dependency bump from #1821. #1825 merged 8 months ago

Set up Backstage in minutes with Roadie