Skip to main content

How to load config file

Webpack config


Like most web applications, sensitive environment variables are stored in the .env file. Re:Earth only needs to worry about: REEARTH_WEB_AUTH0_DOMAIN, REEARTH_WEB_AUTH0_AUDIENCE and REEARTH_WEB_AUTH0_CLIENT_ID.

webpack will check for a .env file and if available will load all environment variables on application start.

let envfile = "";
try {
envfile = fs.readFileSync(`.env`);
} catch {
// ignore

Then, the .env file's variables and any variables whose key starts with REEARTH_WEB_ in process.env are parsed and set to a record called config.

const config = readEnv("REEARTH_WEB", {
source: {


With the above config set, we make an API request to the backend's /reearth_config.json route, and with that file returned to us, we inject the config into it at webpack.config.js.

This step will be omitted for a production build.

// ...inside the return of webpack config file
before(app) {
app.get("/reearth_config.json", (_req, res) => {
api: "http://localhost:8080/api",
published: "http://localhost:8080/p/{}",
...Object.fromEntries(Object.entries(config).filter(([, v]) => Boolean(v))),

Loading the config

Now that webpack has been run and has injected environment variables into the reearth_config.json file retrieved from the backend the app is able to load the configuration data through the src/config.ts file found in the src directory.

export default async function loadConfig() {
if (window.REEARTH_CONFIG) return;
window.REEARTH_CONFIG = defaultConfig;
...(await (await fetch("/reearth_config.json")).json()),