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.
@@ -60,11 +60,19 @@ else
 fi
 echo Core is used from ${coreUrl}
 
+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
+
 # 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,34 @@
+import express from "express";
+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,
+});
+
+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"));
+});
+
+var server = app.listen(port, () => {
+  console.log(
+    `Running at http://localhost:${port}, connected to core on ${coreUrl}`
+  );
+});
+
+process.on("SIGINT", function () {
+  console.log("Shutting down file server");
+  server.close();
+});