Request env variables on application startup from backend

[sullen idol]

Hi, I want to request environment variables once my frontend loads. I have a java backend where all the configuration is located. Is there any specific hook available which I could use to load the env variables or is the best option to just send a request in my app.vue entry point?

[dreamy hedge]

this depends highly on your application, typically you would supply env variables when building your app and/or launching the process

but it may make sense to feed your configuration in another way if you have a lot of config (i.e. if it doesn't make sense to put the config in the actual env)

[sullen idol]

Yeah currently I have the env variables in the frontend which are required. But some are duplicated because they are also needed in the backend. Therefore I now want to request them from the backend. And now I'm basically asking what's the best way to request them. Is there any specific listener/hook I can use or do I just request them once in my app.vue Would be nice if it even is possible no load them once in a while with the nuxt/vue server so I don't even have to make a dedicated request from the frontend

[dreamy hedge]

when utilizing runtime config, you can access public and private config on the backend, but ONLY public on the frontend:
https://nuxt.com/docs/api/composables/use-runtime-config

[hallow iris]

In Vidur, I wrote a plugin to fetch env from API call and setup as state to be accessible throughout the application.

https://github.com/profilecity/vidur/blob/main/app/plugins/setup-state.ts

[dreamy hedge]

yeah it really depends on your implementation, there's a lot of ways to do it

[hallow iris]

but setting in plugin is the recommended way

since plugins run before any of the UI logic runs

so you can get consistent state

[dreamy hedge]

setting with env variables and using runtimeconfig is recommended

but, that's not always possible

sounds like you're doing some special stuff

[hallow iris]

Yes ofcource, when you can't do that

[dreamy hedge]

there's also this but it is exposed in the client bundle:
https://nuxt.com/docs/guide/directory-structure/app-config

[sullen idol]

Could you show me a code example real quick where you read an env variable you fetch via the plugin?

[dreamy hedge]

you cannot/should not try to modify runtime config or env variables from the application

[hallow iris]

this is one example: https://github.com/profilecity/vidur/blob/main/app/composables/remote-asset.ts

[sullen idol]

And you do not use the runtime config at all right? Like you don't set it dynamically?

[hallow iris]

I use runtime config too, for some things, see https://github.com/profilecity/vidur/blob/main/app/components/admin/Sidebar.vue

[sullen idol]

Well, that's kind of what I am trying to do. I don't care whether it is actually dynamic set or when the frontend starts. But I want to fetch the config from the Java backend. So my frontend only uses public variables

[hallow iris]

in that case, it is best to use my approach

[sullen idol]

Ah, but you don't can't overwrite the runtimeconfig in your plugin?

[hallow iris]

never do that, it will lead to weird states

do one thing, inside the plugin, read from runtime config, and set to state

then modify the state

this happens in my case as well

[hallow iris]

then read from that state everywhere