- Displays a simple iframe from a url
- If you have standalone app (you didn't clone this repo), then in the packages/app directory of your backstage instance, add the plugin as a package.json dependency:
yarn add @kozmoai/backstage-plugin-iframe- Import the plugin to the entityPage.tsx source file:
// packages/app/src/components/catalog/EntityPage.tsx
import {
iframePlugin,
EntityIFrameCard,
EntityIFrameContent,
} from '@kozmoai/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>
);// packages/app/src/components/home/HomePage.tsx
import { HomePageIFrameCard } from '@kozmoai/backstage-plugin-iframe';
export const HomePage = () => {
return (
...
<Grid item xs={12} md={6}>
<HomePageIFrameCard
title="Super cool title"
src="https://example.com"
/>
</Grid>
...
);
};This particular plugin supports allowlisting. What this means is you can add a domain to the plugin's configuration that will be verified during the creation of the plugins components.
The config is like so:
// app-config.yaml
iframe:
allowList: ["some-domain.com"]
- Backstage
- Get hosted, managed Backstage for your company: https://glint.io