chore: add code for isolated plugin development

plugins/backstage-plugin-coder/dev/DevPage.tsx

@@ -0,0 +1,69 @@
+/**
+ * @file Defines a simple routable component for wrapping around non-page
+ * Backstage components.
+ */
+import React from 'react';
+import { CoderWorkspacesCard } from '../src/components/CoderWorkspacesCard';
+import {
+  type CoderAppConfig,
+  CoderProvider,
+} from '../src/components/CoderProvider';
+
+import {
+  Content,
+  ContentHeader,
+  Header,
+  Page,
+  SupportButton,
+} from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
+
+const appConfig: CoderAppConfig = {
+  deployment: {
+    accessUrl: 'https://dev.coder.com',
+  },
+
+  workspaces: {
+    templateName: 'devcontainers',
+    mode: 'manual',
+    repoUrlParamKeys: ['custom_repo', 'repo_url'],
+    params: {
+      repo: 'custom',
+      region: 'eu-helsinki',
+    },
+  },
+};
+
+const pluginTitle = 'Coder Plugin - dev mode';
+
+export const DevPage = () => {
+  return (
+    <CoderProvider appConfig={appConfig}>
+      <Page themeId="tool">
+        <Header
+          title={pluginTitle}
+          subtitle="Place non-routable components in this wrapper for development"
+        />
+
+        <Content>
+          <ContentHeader title={pluginTitle}>
+            <SupportButton />
+          </ContentHeader>
+
+          <Grid container spacing={3} direction="column">
+            <Grid
+              item
+              style={{
+                width: '600px',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+              }}
+            >
+              <CoderWorkspacesCard />
+            </Grid>
+          </Grid>
+        </Content>
+      </Page>
+    </CoderProvider>
+  );
+};

plugins/backstage-plugin-coder/dev/index.tsx

@@ -1,12 +1,34 @@
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { coderPlugin, CoderPage } from '../src/plugin';
+
+import { coderPlugin } from '../src/plugin';
+import { createRoutableExtension } from '@backstage/core-plugin-api';
+import { rootRouteRef } from '../src/routes';
+
+/**
+ * This extension should only be made available in dev mode, which is why it is
+ * not being exported with the other extensions.
+ *
+ * 2024-02-14 - This does not work just yet – the plugin is able to launch in
+ * isolated dev mode, but it needs a running backend process so that it has a
+ * proxy to go through. With no backend, all network requests will time out.
+ *
+ * @todo Figure out how to make proxying available to isolated plugin instances;
+ * until then, development will have to be done with a full Backstage app.
+ */
+const DevEnvironmentPage = coderPlugin.provide(
+  createRoutableExtension({
+    name: 'CoderDevPage',
+    mountPoint: rootRouteRef,
+    component: () => import('./DevPage').then(m => m.DevPage),
+  }),
+);
 
 createDevApp()
   .registerPlugin(coderPlugin)
   .addPage({
-    element: <CoderPage />,
-    title: 'Root Page',
-    path: '/backstage-plugin-coder',
+    element: <DevEnvironmentPage />,
+    title: 'CoderDevPage',
+    path: '/dev',
   })
   .render();