allow setting configs for the frontend through env vars w/ burnettk

This commit is contained in:
jasquat 2023-02-07 17:21:54 -05:00
parent 4bf191af31
commit fb94d5c77a
3 changed files with 61 additions and 3 deletions

View File

@ -7,4 +7,29 @@ function error_handler() {
trap 'error_handler ${LINENO} $?' ERR
set -o errtrace -o errexit -o nounset -o pipefail
# sort of like https://lithic.tech/blog/2020-05/react-dynamic-config, but without golang
react_configs=$(env | grep -E "^SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_")
if [[ -n "$react_configs" ]]; then
index_html_file="./build/index.html"
if [[ ! -f "$index_html_file" ]]; then
>&2 echo "ERROR: Could not find '${index_html_file}'. Cannot use SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG values without it."
exit 1
fi
if ! command -v sed >/dev/null ; then
>&2 echo "ERROR: sed command not found. Cannot use SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG values without it."
exit 1
fi
if ! command -v perl >/dev/null ; then
>&2 echo "ERROR: perl command not found. Cannot use SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG values without it."
exit 1
fi
for react_config in $react_configs; do
react_config_without_prefix=$(sed -E 's/^SPIFFWORKFLOW_FRONTEND_RUNTIME_CONFIG_([^=]*)=(.*)/\1=\\"\2\\"/' <<<"${react_config}")
perl -pi -e "s/(window._jsenv=\{\})/\1;window._jsenv.${react_config_without_prefix}/" "$index_html_file"
done
fi
exec ./node_modules/.bin/serve -s build -l "$PORT0"

View File

@ -25,6 +25,10 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>SpiffWorkflow</title>
<script>
window.spiffworkflowFrontendJsenv = {};
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -1,17 +1,46 @@
const { port, hostname } = window.location;
let hostAndPort = hostname;
let protocol = 'https';
declare global {
interface SpiffworkflowFrontendJsenvObject {
[key: string]: string;
}
interface Window {
spiffworkflowFrontendJsenv: SpiffworkflowFrontendJsenvObject;
}
}
let appRoutingStrategy = 'subdomain_based';
if (
'spiffworkflowFrontendJsenv' in window &&
'APP_ROUTING_STRATEGY' in window.spiffworkflowFrontendJsenv
) {
appRoutingStrategy = window.spiffworkflowFrontendJsenv.APP_ROUTING_STRATEGY;
}
let hostAndPortAndPathPrefix;
if (appRoutingStrategy === 'subdomain_based') {
hostAndPortAndPathPrefix = `api.${hostname}`;
} else if (appRoutingStrategy === 'path_based') {
hostAndPortAndPathPrefix = `${hostname}/api`;
} else {
throw new Error(`Invalid app routing strategy: ${appRoutingStrategy}`);
}
if (/^\d+\./.test(hostname) || hostname === 'localhost') {
let serverPort = 7000;
if (!Number.isNaN(Number(port))) {
serverPort = Number(port) - 1;
}
hostAndPort = `${hostname}:${serverPort}`;
hostAndPortAndPathPrefix = `${hostname}:${serverPort}`;
protocol = 'http';
}
let url = `${protocol}://${hostAndPort}/api/v1.0`;
let url = `${protocol}://${hostAndPortAndPathPrefix}/v1.0`;
// this can only ever work locally since this is a static site.
// use spiffworkflowFrontendJsenv if you want to inject env vars
// that can be read by the static site.
if (process.env.REACT_APP_BACKEND_BASE_URL) {
url = process.env.REACT_APP_BACKEND_BASE_URL;
}