How to Load Azure App Service Application Settings into VUE?

user_2100688 0
Viewed 1347

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.

azure-web-app-service vue.js azure
2 Answers

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.

user_72143420

Zoull's comment, while somewhat factual, is not possible. His comment implies that setting VUE_APP_API_ENDPOINT in Azure's Static App Settings blade will seamlessly include that var, and perhaps other VUE_APP_* vars into the vue app.

This is wrong.

Webpack is responsible for inclusion of VUE_APP_* vars into the build, and this is only possible at build-time.

This can be verified by following his logic, and then dumping to console "env" at runtime. Values will be set to, permanently, whatever they were at build-time.

tl;dr: Vue will never read, post-build, vars from Application Settings.

I use Github actions to build and deploy. By adding an env: setting after the with: stanza, and including VUE_APP_* vars there, I can do what OP is trying to do.

I believe I can also set some github "secrets" in githubs settings for my repo, and also include them dynamically in the YAML.

Ex. If I have a github secret key/val of: "VUE_APP_FOO: true", in my github action yml, I can do:

env:
    VUE_APP_FOO: ${{secrets.VUE_APP_FOO}}

Then, in my final vue build, I should have a value of "true" when I read the process.env.VUE_APP_FOO var.

Savvy?

user_31693980
Related