From 5c7d9b3fa3e4796c7f8cd966d46d1dd5b0915c98 Mon Sep 17 00:00:00 2001
From: martetassyns <78635303+martetassyns@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:27:36 +0100
Subject: [PATCH] Made it easier to test the frontend against an existing core
 instance. (#23062)

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

* Ensured that script works regardless of current working dir

* Use consistent quote style

* Also allow using variables in hassUrl override

* Improved the default behavior of the script

* more consistent variable naming

* don't install a global dependency

* documented caching wierdness where if you switch core endpoints the old one remains in use

* Simplified some code

* improved documentation

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
---
 build-scripts/bundle.cjs |  5 +++
 script/develop_and_serve | 70 ++++++++++++++++++++++++++++++++++++++++
 src/data/auth.ts         |  2 +-
 src/types.ts             |  3 +-
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100755 script/develop_and_serve

diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
index 58ba8ef98cdb..3a3c6929b8c6 100644
--- a/build-scripts/bundle.cjs
+++ b/build-scripts/bundle.cjs
@@ -53,6 +53,11 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
+  __HASS_URL__: `\`${
+    "HASS_URL" in process.env
+      ? process.env["HASS_URL"]
+      : "${location.protocol}//${location.host}"
+  }\``,
   "process.env.NODE_ENV": JSON.stringify(
     isProdBuild ? "production" : "development"
   ),
diff --git a/script/develop_and_serve b/script/develop_and_serve
new file mode 100755
index 000000000000..529fbc6b2578
--- /dev/null
+++ b/script/develop_and_serve
@@ -0,0 +1,70 @@
+#!/bin/sh
+#
+# 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.
+#
+# WARNING:
+# If you have an active login session in the frontend. The core that was used
+# as a backend during the time of the login remains used until you logout again.
+# So if you reuse the url hosting the frontend, you will need to logout before
+# it will actually start using the core backend configured by this script.
+#
+# If you run this script without parameters, the frontend will be accessible under http://localhost:8124.
+# And it will use the core instance running under http://localhost:8123 as a backend.
+# Note that from a devcontainer, the frontend will be accessible under port 8124 on the host container.
+# Inside the devcontainer it will be accessible under port 8123 instead.
+# The core instance endpoint remains the same in both cases, as this is resolved from the browser.
+#
+# You can change the core instance the frontend connects to by passing the -c option.
+# For example: script/develop_and_serve -c https://myhost.duckdns.org:8123
+# This will also work for existing production core instances.
+# It does not need to be a development version hosted locally.
+#
+# You can change the port the frontend is served on by passing the -p option.
+# For example: script/develop_and_serve -p 8654
+# Note that if you are running from a devcontainer, you will need to setup
+# port forwarding as well if you want to access it from the container host.
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+# parse input paramters
+if [ -n "$DEVCONTAINER" ]; then
+    frontendPort=8123
+else
+    frontendPort=8124
+fi
+
+coreUrl=http://localhost:8123
+
+while getopts p:c:h flag
+do
+    case "${flag}" in
+        p) frontendPort=${OPTARG};;
+        c) coreUrl="${OPTARG}";;
+        h) echo Documentation can be found inside "$0" && exit 0;;
+        *) echo Documentation can be found inside "$0" && exit 1;;
+    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}
+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
diff --git a/src/data/auth.ts b/src/data/auth.ts
index 45fd8db37d40..05de154548e9 100644
--- a/src/data/auth.ts
+++ b/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) => {
diff --git a/src/types.ts b/src/types.ts
index 3d8a78ac50c7..9cea363824d1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -31,7 +31,8 @@ declare global {
   var __STATIC_PATH__: string;
   var __BACKWARDS_COMPAT__: boolean;
   var __SUPERVISOR__: boolean;
-  /* eslint-enable no-var */
+  var __HASS_URL__: string;
+  /* eslint-enable no-var, no-redeclare */
 
   interface Window {
     // Custom panel entry point url