@twoday/public.config
v1.1.0
Published
Public build, deploy & runtime configs in globalThis.ENV, dynamic by hostname.
Downloads
35
Readme
@twoday/public.config
Public build, deploy & runtime configs in globalThis.ENV, dynamic by hostname.
Example
// import once, before accessing the values
import '@twoday/public.config';
// ...
console.log(globalThis.ENV.HELLO);Build time config
.env:
# (Depending on the tool use VITE_ or REACT_APP_ prefix)
VITE_HELLO=world
REACT_APP_HELLO=worldDeploy time & runtime configs
Write values in window.ENV in a <script> tag before the any other script tags. These values will override any build time values set in .env. Example:
html.replace(
'<!-- overrides placeholder -->',
`<script>
window.ENV = ${JSON.stringify(data)};
</script>`
);The browser should receive something like this from the server:
...
<head>
...
<script>
window.ENV = {
HELLO: 'world',
};
</script>
...
</head>
...Alternatively, load config at runtime before importing other modules:
import loadRuntimeConfig from '@twoday/public.config/lib/loadRuntimeConfig.js';
const url = process.env.PUBLIC_URL + '/path/to/config.json';
await loadRuntimeConfig(url);
const App = (await import(/* webpackMode: "eager" */ './App')).default;ℹ To use dynamic paths,
locationobject values are available in theurlwhen wrapped in${}. Example:const url = process.env.PUBLIC_URL + '/config/${hostname}.json';
Unflat keys
VITE_HELLO.WORLD=123globalThis.ENV:
{
"HELLO": {
"WORLD": 123
}
}JSON values
Valid JSON values are parsed. Escape value using '"something"' to avoid incorrect type conversion. Example:
VITE_BOOLEAN=true
VITE_BOOLEAN_STRING='"true"'
VITE_NUMBER=123
VITE_NUMBER_STRING='"123"'
VITE_OBJ={"hello":"world"}
VITE_STRING=fooglobalThis.ENV:
{
"BOOLEAN": true,
"BOOLEAN_STRING": "true",
"NUMBER": 123,
"NUMBER_STRING": "123",
"OBJ": {
"hello": "world"
},
"STRING": "foo"
}Dynamic config by hostname
A special HOSTNAME_OVERRIDES variable can be used to override values at runtime. If the current hostname matches or is a subdomain of the one in the config, the config is merged. Later config is merged to an earlier. Without the hostname the config is always merged.
VITE_HOSTNAME_OVERRIDES=[
{
"BACKEND": { "baseURL": "http://localhost:8080" }
},
[
"example.com",
{
"BACKEND": { "baseURL": "https://api.example.com" }
}
],
[
"test.example.com",
{
"BACKEND": { "baseURL": "https://api.test.example.com" }
}
]
]| Hostname | globalThis.ENV.BACKEND.baseURL |
| -------------------- | -------------------------------- |
| "example.com" | "https://api.example.com" |
| "test.example.com" | "https://api.test.example.com" |
| other | "http://localhost:8080" |