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.
yarn --cwd packages/app add @roadiehq/backstage-plugin-iframe
Add allowlisting to your app-config.yaml as required (optional).
// app-config.yaml
iframe:
allowList: ["some-domain.com"]
Add to your home page.
// 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
// 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>
);
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
Set up Backstage in minutes with Roadie
Focus on using Backstage, rather than building and maintaining it.