Made it easier to test the frontend against an existing core instance.

build-scripts/bundle.cjs

@@ -53,6 +53,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
+  __HASS_URL__: env.hassUrl(),
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
   ),

build-scripts/env.cjs

@@ -31,6 +31,11 @@ module.exports = {
     }
     return version[1];
   },
+  hassUrl() {
+    return "HASS_URL_OVERRIDE" in process.env
+      ? `\"${process.env["HASS_URL_OVERRIDE"]}\"`
+      : "`${location.protocol}//${location.host}`";
+  },
   isDevContainer() {
     return isTrue(process.env.DEV_CONTAINER);
   },

script/develop_and_serve

@@ -0,0 +1,33 @@
+#!/bin/sh
+#
+# Run the develop script to build the frontend and serve it under http://localhost:8123.
+# Note that if you are running in the default devcontainer this port is forwarded to 8124.
+# So in that case it will be accessible on the container host as http:/localhost:8124.
+#
+# The frontend will connect to the core running under the endpoint passed as parameter to this script.
+# This endpoint must be accessible from the browser you are using to access the frontend.
+# But it does not have to be accessible from the devcontainer if you are using that flow.
+# No configuration settings are required on the core you are connecting to.
+#
+# Example usage: script/develop_and_serve https://myhost.duckdns.org:8123
+
+# Stop on errors
+set -e
+
+if [ -z "$1" ]
+  then
+    echo "Missing core endpoint, see comments in the script for more help."
+    exit 1
+fi
+
+# ensure that serve is available
+yarn exec "serve -v 2>&1" > /dev/null || (echo "Installing serve" && npm install -g serve > /dev/null)
+
+# build the frontend so it connects to the passed core
+HASS_URL_OVERRIDE="$1" "$(dirname "$0")/develop" &
+
+# serve the frontend
+yarn exec serve -l 8123 "$(dirname "$0")/../hass_frontend" -s &
+
+# keep the script running while serving
+wait

src/data/auth.ts

@@ -23,7 +23,7 @@ export interface SignedPath {
   path: string;
 }
 
-export const hassUrl = `${location.protocol}//${location.host}`;
+export const hassUrl = __HASS_URL__;
 
 export const autocompleteLoginFields = (schema: HaFormSchema[]) =>
   schema.map((field) => {

src/types.ts

@@ -30,6 +30,7 @@ declare global {
   var __STATIC_PATH__: string;
   var __BACKWARDS_COMPAT__: boolean;
   var __SUPERVISOR__: boolean;
+  var __HASS_URL__: string;
   /* eslint-enable no-var, no-redeclare */
 
   interface Window {