Fix rest api access when using script/develop_and_serve

.devcontainer/devcontainer.json

@@ -2,7 +2,8 @@
   "name": "Home Assistant Frontend",
   "build": {
     "dockerfile": "Dockerfile",
-    "context": ".."
+    "context": "..",
+    "options": ["--add-host=host.docker.internal:host-gateway"]
   },
   "appPort": "8124:8123",
   "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",

script/develop_and_serve

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/usr/bin/env bash
 #
 # This script can be used to develop and test the frontend without having to
 # link the build in a running core instance through the frontend/development_repo setting.
@@ -49,22 +49,19 @@ do
     esac
 done
 
-# display used settings
-if [ -n "$DEVCONTAINER" ]; then
-    echo Frontend is available inside container as http://localhost:${frontendPort}
-    if [ 8123 -eq $frontendPort ]; then
-      echo Frontend is available on container host as http://localhost:8124
-    fi
-else
-    echo Frontend is hosted on http://localhost:${frontendPort}
+if [ ! -d "./hassio/build" ]; then
+  echo Building hassio
+  # the hassio rest app doesn't need the HASS_URL override,
+  # it will use the url from the current login session
+  hassio/script/build_hassio
 fi
-echo Core is used from ${coreUrl}
 
 # build the frontend so it connects to the passed core
 HASS_URL="$coreUrl" ./script/develop &
 
-# serve the frontend
-yarn dlx serve -l $frontendPort ./hass_frontend -s &
-
-# keep the script running while serving
-wait
+if [ -n "$DEVCONTAINER" ]; then
+    nodeCoreUrl="${coreUrl/localhost/host.docker.internal}"
+else
+    nodeCoreUrl="$coreUrl"
+fi
+yarn exec node ./script/serve.js "$nodeCoreUrl" $frontendPort

script/serve.js

@@ -0,0 +1,62 @@
+import express from "express";
+import https from "https";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const coreUrl = process.argv[2];
+const port = parseInt(process.argv[3] ?? "8123");
+
+const repoDir = path.join(fileURLToPath(import.meta.url), "../..");
+
+import { createProxyMiddleware } from "http-proxy-middleware";
+
+const coreProxy = createProxyMiddleware({
+  target: coreUrl,
+  changeOrigin: true,
+  ws: true,
+});
+
+const app = express();
+app.use("/", express.static(path.join(repoDir, "hass_frontend")));
+app.use("/api/hassio/app", express.static(path.join(repoDir, "hassio/build")));
+app.use("/api", coreProxy);
+app.get("*", (req, res) => {
+  res.sendFile(path.join(repoDir, "hass_frontend/index.html"));
+});
+
+// if the core uses https, also use https for serving to avoid problems
+// with headers like Strict-Transport-Security
+const useHttps = coreUrl.startsWith("https:");
+
+const appServer = useHttps
+  ? https.createServer(
+      {
+        pfx: fs.readFileSync(repoDir + "/script/serve.pfx"),
+        passphrase: "localhost",
+      },
+      app
+    )
+  : app;
+
+const frontendBase = `http${useHttps ? "s" : ""}://localhost`;
+appServer.listen(port, () => {
+  if (process.env.DEVCONTAINER !== undefined) {
+    console.log(
+      `Frontend is available inside container as ${frontendBase}:${port}`
+    );
+    if (port === 8123) {
+      console.log(
+        `Frontend is available on container host as ${frontendBase}://localhost:8124`
+      );
+    }
+  } else {
+    console.log(`Frontend is hosted on ${frontendBase}:${port}`);
+  }
+  console.log(`Core is used from ${coreUrl}`);
+});
+
+process.on("SIGINT", function () {
+  console.log("Shutting down file server");
+  process.exit(0);
+});