diff --git a/.changeset/great-buttons-cross.md b/.changeset/great-buttons-cross.md
new file mode 100644
index 0000000000..02247b94bf
--- /dev/null
+++ b/.changeset/great-buttons-cross.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app-backend': patch
+---
+
+Fixed a bug where config would not be injected on the `/` and `/index.html` paths.
diff --git a/plugins/app-backend/src/service/appPlugin.test.ts b/plugins/app-backend/src/service/appPlugin.test.ts
index 901b97dd63..e1065e5b6a 100644
--- a/plugins/app-backend/src/service/appPlugin.test.ts
+++ b/plugins/app-backend/src/service/appPlugin.test.ts
@@ -75,6 +75,7 @@ describe('appPlugin', () => {
'package.json': '{}',
dist: {
static: {},
+ 'index.html': '',
'index.html.tmpl': '',
},
});
@@ -92,6 +93,26 @@ describe('appPlugin', () => {
],
});
+ const rootContent = await fetch(`http://localhost:${server.port()}`).then(
+ res => res.text(),
+ );
+
+ expect(rootContent).toBe(`
+
+`);
+
+ const indexContent = await fetch(
+ `http://localhost:${server.port()}/index.html`,
+ ).then(res => res.text());
+
+ expect(indexContent).toBe(`
+
+`);
+
const htmlContent = await fetch(
`http://localhost:${server.port()}/api/app/some/html5/route`,
).then(res => res.text());
diff --git a/plugins/app-backend/src/service/router.ts b/plugins/app-backend/src/service/router.ts
index 2c579d44e7..1616314a62 100644
--- a/plugins/app-backend/src/service/router.ts
+++ b/plugins/app-backend/src/service/router.ts
@@ -302,7 +302,17 @@ async function createEntryPointRouter({
staticRouter.use(notFoundHandler());
router.use('/static', staticRouter);
- router.use(
+
+ const rootRouter = Router();
+ rootRouter.use((req, _res, next) => {
+ // Make sure / and /index.html are handled by the HTML5 route below
+ if (req.url === '/' || req.url === '/index.html') {
+ next('router');
+ } else {
+ next();
+ }
+ });
+ rootRouter.use(
express.static(rootDir, {
setHeaders: (res, path) => {
// The Cache-Control header instructs the browser to not cache html files since it might
@@ -315,7 +325,9 @@ async function createEntryPointRouter({
},
}),
);
+ router.use(rootRouter);
+ // HTML5 routing
router.get('/*', (_req, res) => {
if (injectResult?.indexHtmlContent) {
res.setHeader('Content-Type', 'text/html; charset=utf-8');