set config using env vars

[c-u-l8er]

Hello, thank you for making vendure open source.

Lately I have been trying to get vendure to deploy on kubernetes and I feel so close to complete. My question has todo with the configuration of "storefront" and how we must do this with a environment.docker.ts file.

I am only familiar with old angular ... like 1.7 so I am a little rusty here. Does this file run on the server or does it get compiled to the browser and run there? I ask: because I am trying to get all of my settings to pass through ENV VARS.

export const environment = {
  production: true,
  apiHost: process.env.API_HOST || 'https://demo.vendure.io',
  apiPort: process.env.API_PORT || 443,
  shopApiPath: process.env.SHOP_API_PATH || 'shop-api',
  baseHref: process.env.BASE_HREF || '/storefront/',
  tokenMethod: 'bearer',
};

Dockerfile:

COPY environment.docker.ts ./src/environments

error: on the browser it says: "Uncaught ReferenceError: process is not defined at Object.62242 (main.a5b3c721c9edb633524b.js:1)"

This makes me believe every vendure app that I want to deploy needs to have a hard coded "environment.docker.ts" within the docker image build. So if I want to deploy 4 apps then I must build 4 separate docker images each with their own unique config file ... Please tell me this is not true.

[michaelbromley]

Hi,

yes, your understanding of the environment.ts file is correct - it is compiled at build-time and is typically executed in the browser, so the env vars will not work like that.

A pattern I have successfully used in this case is described in this blog post - with an APP_INITIALIZER provider which fetches the correct environment data before the app bootstraps in the browser.