Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ianwow opened this issue Jan 14, 2020 · 7 comments
Open

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

ianwow opened this issue Jan 14, 2020 · 7 comments
Labels

Comments

@ianwow
Copy link

@ianwow ianwow commented Jan 14, 2020

No description provided.

@lukos
Copy link

@lukos lukos commented Jun 8, 2020

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 iandow changed the title Feedback: How to define dynamic configurations for Vue.js Feedback: How to Stop Hardcoding Service Endpoints in Vue.js Jun 9, 2020
@iandow
Copy link
Owner

@iandow iandow commented Jun 9, 2020

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
Copy link

@lukos lukos commented Jun 10, 2020

@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
Copy link
Author

@ianwow ianwow commented Jun 11, 2020

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
Copy link

@lukos lukos commented Jun 12, 2020

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.

@iandow iandow added the feedback label Feb 8, 2021
@avxkim
Copy link

@avxkim avxkim commented Dec 4, 2021

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
Copy link
Author

@ianwow ianwow commented Dec 4, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants