Backstage xkcd comic Plugin

xkcd is a long running webcomic by Randall Munroe. It blends stick figures with sharp jokes about math, code, space, and everyday tech life. Many engineers keep a few favorite strips saved. Many teams drop an xkcd link into chats to lighten a thread.

The xkcd comic plugin brings those moments into Backstage. It adds a simple card or page that shows the latest strip from xkcd. You can browse older comics with built in controls. You can choose a specific strip for a theme or event. There is an optional link to explanations when a comic needs extra context. It is a small feature with a clear job. Show a comic. Get a smile. Keep people in the portal.

It gives your home page a human touch. It breaks up dense panels of metrics with a quick visual pause. It can serve as a friendly icebreaker during demos or onboarding. It is safe to show in many contexts, since it does not expose your internal data. Teams use it to mark Fridays, ship days, or milestones with a chosen strip. It is a tiny boost to culture that costs very little to run.

Install the frontend package

Run this from the repo root. It adds the plugin to the app package.

Copy

yarn add --cwd packages/app backstage-plugin-xkcd

If you plan to use the customizable home grid, add the home react package.

Copy

yarn add --cwd packages/app @backstage/plugin-home-react

Add the XKCD card to the Home page

Add the card so people see it on the first page.

Edit the Home page component in packages/app src components HomePage HomePage.tsx. If you do not have this file, use the Home page file that your app already uses.

Simple grid example

Copy

import React from 'react';
import { Grid } from '@material-ui/core';
import { Content, Page } from '@backstage/core-components';
import { XkcdComicCard } from 'backstage-plugin-xkcd';

export const HomePage = () => {
  return (
    <Page themeId="home">
      <Content>
        <Grid container spacing={3}>
          <Grid item md={3} xs={6} style={{ height: '500px' }}>
            <XkcdComicCard />
          </Grid>
        </Grid>
      </Content>
    </Page>
  );
};

Option for customizable home grid

If your app uses the customizable home grid, allow the XKCD widget there.

Copy

import React from 'react';
import { Page, Content } from '@backstage/core-components';
import { CustomHomepageGrid } from '@backstage/plugin-home-react';
import { HomePageXkcdComic } from 'backstage-plugin-xkcd';

export const HomePage = () => {
  return (
    <Page themeId="home">
      <Content>
        <CustomHomepageGrid>
          <HomePageXkcdComic />
        </CustomHomepageGrid>
      </Content>
    </Page>
  );
};

Add the XKCD page route

Add a standalone page. People can open it at path /xkcd.

Edit packages/app src App.tsx.

Copy

import React from 'react';
import { FlatRoutes } from '@backstage/core-app-api';
import { Route } from 'react-router';
import { XkcdPage } from 'backstage-plugin-xkcd';
// other imports you already have

export const routes = (
  <FlatRoutes>
    {/* your existing routes */}
    <Route path="/xkcd" element={<XkcdPage />} />
  </FlatRoutes>
);

You can also add a link to this route in your sidebar if you want. Use your app pattern for sidebar items.

Configure the proxy to xkcd

The plugin calls the XKCD API through the Backstage proxy. Add this config to app config yaml. Put it under the top level.

Copy

proxy:
  '/xkcd-proxy':
    target: https://xkcd.com/

Classic backend

Most classic backends already include the proxy backend plugin. If yours does, the config above is enough.

If your classic backend does not have the proxy plugin, add it.

Install the backend proxy package.

Copy

yarn add --cwd packages/backend @backstage/plugin-proxy-backend

Wire it in packages backend src plugins proxy.ts.

Copy

import { createRouter } from '@backstage/plugin-proxy-backend';
import { PluginEnvironment } from '../types';

export default async function createPlugin(env: PluginEnvironment) {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    tokenManager: env.tokenManager,
    urlReader: env.reader,
  });
}

Mount it in packages backend src index.ts.

Copy

import proxy from './plugins/proxy';

// inside the function that builds the service
const proxyEnv = useHotMemoize(module, () => createEnv('proxy'));
apiRouter.use('/proxy', await proxy(proxyEnv));

New backend system

If your backend already uses backend defaults with the proxy module, the config above is enough.

If not, add the proxy backend module.

Install the backend proxy package.

Copy

yarn add --cwd packages/backend @backstage/plugin-proxy-backend

Copy

import { createBackend } from '@backstage/backend-defaults';
import { proxyPlugin } from '@backstage/plugin-proxy-backend';

const backend = createBackend();

backend.add(proxyPlugin());

backend.start();

The proxy reads the proxy section from app config yaml. No extra code is needed for the xkcd routes.

Optional props for the card

You can control what the card shows.

Pick a specific comic number

Copy

<XkcdComicCard comicNumber={1234} />

Hide the navigation bar

Copy

<XkcdComicCard showNav={false} />

Hide the explain link

Copy

<XkcdComicCard showExplain={false} />

Backstage xkcd comic Plugin

Installation Instructions

Install the frontend package

Add the XKCD card to the Home page

Option for customizable home grid

Add the XKCD page route

Configure the proxy to xkcd

Classic backend

New backend system

Optional props for the card

Changelog

Set up Backstage in minutes with Roadie