How to pre-load configuration before the app?

[moltar]

I prefer to build assets once and use them many times, regardless of the environment. This way I can ensure that the same exact code has been tested, QA'ed and deployed across the environments.

Thus, I do not bundle any environment-specific variables into the bundled handler code (e.g. API endpoints, config options).

The pattern I've arrived at over the years is to hard-code one, well-known path, which serves as configuration for the application.

This configuration is environment-specific and contains everything the FE app needs to run, e.g. API endpoints, feature flags, etc.

Think of it as a 12-factor approach but for the front end.

Now, with traditional SPAs this was easy, as everything was just running in the browser, and the well-known URL was always relative (/.well-known/...).

But with the SSR, on the server side, this must be an absolute URL.

Plus, I am not sure what is the best way to pre-load this configuration before the loaders and be able to access this configuration inside the loaders (as they need to know the API URL to call).

Any suggestions for patterns in this regard?

Thanks!

[sergiodxa]

Why not use env variables? They will work server side and if you need them in the client you can return them from a loader.

[moltar]

Hm, yes, a total paradigm shift! Thanks for pointing in the right direction!