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>
This commit is contained in:
martetassyns 2024-12-02 14:27:36 +01:00 committed by GitHub
parent 55b6aa09d9
commit 5c7d9b3fa3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 78 additions and 2 deletions

View File

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

70
script/develop_and_serve Executable file
View File

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

View File

@ -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) => {

View File

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