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

@@ -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"
   ),

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

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

@@ -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