create-app: add app-backend plugin to template

2020-11-18 19:45:32 +01:00
parent c7d6fefe9c
commit 7d7abd50c8
9 changed files with 137 additions and 3 deletions
@@ -0,0 +1,104 @@
+---
+'@backstage/create-app': patch
+---
+
+Add `app-backend` as a backend plugin, and make a single docker build of the backend the default way to deploy backstage.
+
+Note that the `app-backend` currently only is a solution for deployments of the app, it's not a dev server and is not intended for local development.
+
+## Template changes
+
+As a part of installing the `app-backend` plugin, the below changes where made. The changes are grouped into two steps, installing the plugin, and updating the Docker build and configuration.
+
+### Installing the `app-backend` plugin in the backend
+
+First, install the `@backstage/plugin-app-backend` plugin package in your backend. These changes where made for `v0.3.0` of the plugin, and the installation process might change in the future. Run the following from the root of the repo:
+
+```bash
+cd packages/backend
+yarn add @backstage/plugin-app-backend
+```
+
+For the `app-backend` to get access to the static content in the frontend we also need to add the local `app` package as a dependency. Add the following to your `"dependencies"` in `packages/backend/package.json`, assuming your app package is still named `app` and on version `0.0.0`:
+
+```json
+"app": "0.0.0",
+```
+
+Don't worry, this will not cause your entire frontend dependency tree to be added to the app, just double check that `packages/app/package.json` has a `"bundled": true` field at top-level. This signals to the backend build process that the package is bundled and that no transitive dependencies should be included.
+
+Next, create `packages/backend/src/plugins/app.ts` with the following:
+
+```ts
+import { createRouter } from '@backstage/plugin-app-backend';
+import { PluginEnvironment } from '../types';
+
+export default async function createPlugin({
+  logger,
+  config,
+}: PluginEnvironment) {
+  return await createRouter({
+    logger,
+    config,
+    appPackageName: 'app',
+  });
+}
+```
+
+In `packages/backend/src/index.ts`, make the following changes:
+
+Add an import for the newly created plugin setup file:
+
+```ts
+import app from './plugins/app';
+```
+
+Setup the following plugin env.
+
+```ts
+const appEnv = useHotMemoize(module, () => createEnv('app'));
+```
+
+Change service builder setup to include the `app` plugin as follows. Note that the `app` plugin is not installed on the `/api` route with most other plugins.
+
+```ts
+const service = createServiceBuilder(module)
+  .loadConfig(config)
+  .addRouter('/api', apiRouter)
+  .addRouter('', await app(appEnv));
+```
+
+You should now have the `app-backend` plugin installed in your backend, ready to serve the frontend bundle!
+
+### Docker build setup
+
+Since the backend image is now the only one needed for a simple Backstage deployment, the image tag name in the `build-image` script inside `packages/backend/package.json` was changed to the following:
+
+```json
+"build-image": "backstage-cli backend:build-image --build --tag backstage",
+```
+
+For convenience, a `build-image` script was also added to the root `package.json` with the following:
+
+```json
+"build-image": "yarn workspace backend build-image",
+```
+
+In the root of the repo, a new `app-config.production.yaml` file was added. This is used to set the appropriate `app.baseUrl` now that the frontend is served directly by the backend in the production deployment. It has the following contents:
+
+```yaml
+app:
+  # Should be the same as backend.baseUrl when using the `app-backend` plugin
+  baseUrl: http://localhost:7000
+
+backend:
+  baseUrl: http://localhost:7000
+  listen:
+    port: 7000
+```
+
+In order to load in the new configuration at runtime, the command in the `Dockerfile` at the repo root was changed to the following:
+
+```dockerfile
+CMD ["node", "packages/backend", "--config", "app-config.yaml", "--config", "app-config.production.yaml"]
+```