SSR: How to insert environment variables from the server into rendered HTML or Javascript

[mikael]

Hi,

I am deploying my SSR app on Azure AppService which uses environment variables to specify configuration settings.

I am deploying my Quasar SSR project to several stages and they all point to different API endpoints, these API endpoints I would like to configure at “runtime” rather than inserting them using quasar build.

However I cannot find a way to do it.

For example in boot/axios.ts I added $Vue.prototype.$test = process.env.MY_VAR || 'smurf'; and the value of process.env.MY_VAR is correctly available for a few milliseconds (and I can render it into my <template>) but very quickly the client side version of boot/axios.ts is run and process.env.MY_VAR is now empty and my template is rerendered with the fallback.

Also to clarify these values are not available so that I can check them into code, usually they are an output from an infrastructure deployment.

Kind regards,

Mikael

[mikael]

@mikael

Ok I have managed to do it by:

Step #1 add <script>document.API_BASE_URL = "{{{ API_BASE_URL }}}";</script> to index.template.html.

Step #2 In a boot file add:

  if (ssrContext) {
    ssrContext.API_BASE_URL = process.env.API_BASE_URL;
    Vue.prototype.$API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:7071/api';
  } else {
    Vue.prototype.$API_BASE_URL = document['API_BASE_URL'];
  }

That seems to work but also seems very complicated, is there no simpler way of doing it?