How to Load Azure App Service Application Settings into VUE?

Question

We have a Vue app hosted as an Azure App Service. Under Settings\Configuration in Azure Portal We have added application settings like VUE_APP_API_ENDPOINT_URL. These become environment variables like the documentation explains, and can be verified by opening a console from the portal and type 'env'.

I Had hoped that These env variables would now be accessible inside Vue by use of

process.env.VUE_APP_API_ENDPOINT_URL

My guess is that its only becomes available in VUE when aplication is build with WebPack or similar. At least it doesn't work.

Are there any nice way to read those env variables created from Azure App Settings into the vue app? Some people mentions dotenv npm package, but we need to read the env variables not add them from a config file.

Answer 1

You would be correct that the Environment Variables only become available when you build the application. And to elaborate on that, only the Environment Variables that you specify/supply at build time are the ones that become available in the application from the build process as per the documentation here: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Specifically look at this:

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.

I was struggling to accomplish essentially the same thing that you're trying to accomplish. I was trying to get a value from Azure's Application Settings so that I could setup multiple environments for my application and not have to constantly change values depending on the environment I published the app to.

After realizing that you might be onto something and reading the confirmation of such in the documentation, I decided to try putting the Environment Variable that I was trying to get from Azure's Application Settings in a .env file with a default so that it would be specified at build time. I then published my app to Azure and tested it and it worked!

Try creating a .env file with all of the Azure Application Settings that you're trying to set with default values or something, like:

VUE_APP_API_ENDPOINT_URL=default_value

And then set those same variables into your Azure Application Settings with the proper values and it should work.