Feedback: How to Stop Hardcoding Service Endpoints in Vue.js

[ianwow]

[lukos]

If you are still accessing files from the local file system, how can you decide whether to load e.g. staging, production, loadtest settings etc. Wouldn't you still need to rebuild your app each time to select the correct one?

[iandow]

If you put your settings in public/runtimeConfig.json and load those settings with await fetch('/runtimeConfig.json');, then you won't have to rebuild the app. Your web client will fetch whatever settings you have in runtimeConfig.json even if you changed that file after running npm run build. Not sure if that answers your question...

[lukos]

@iandow Thanks for that. My confusion is that I thought public was copied from a source location when building the app. Are you saying that we would build the app, which creates the public folder, and then after deployment, copy in the relevant config file? We are using Vue as a library rather than as a full app so I'm not sure where the public folder would go but I'll see what I can find.

[ianwow]

I'm not familiar with what a library project using Vue would look like. I've always seen the public folder get created as part of the initial Vue project scaffolding.

In my blog, I'm talking about projects which contain a public folder that contains a resource config file. After you build and deploy your code, you can replace or modify that config file in order to make certain configurations take effect. This is useful when said configurations can only be determined after build time.

[lukos]

Actually, it was very easy. The code that you showed simply requests the resource from the root of the web application so very easy to adjust to suit where we have put the config file. Works great and much better than rebuilding it for each environment, which seems to be against the principle of testing production code in staging! Thanks.

[avxkim]

Have you tried this with nuxt? I just created a questions regards this: https://stackoverflow.com/questions/70228276/how-to-use-plugins-data-in-a-nuxt-config-js-file

[ianwow]

Have you tried this with nuxt? I just created a questions regards this: https://stackoverflow.com/questions/70228276/how-to-use-plugins-data-in-a-nuxt-config-js-file

I have not used nuxt.