How to specify different API urls in vue.js for my computer, coworker's computer, and production?
I'd like to have the URL to my api / backend server automatically be loaded and used in all the requests that my vue.js application makes.
For my own laptop, I'm usually running the backend at localhost, so I'd like the url to be localhost.
But on production, and on my coworker's computer, I'd like the production URL to be used (or a staging URL for coworker's computer).
This is because coworker isn't running the backend locally.
Can this be achieved with vue.js?
vue.js
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
add a comment |
I'd like to have the URL to my api / backend server automatically be loaded and used in all the requests that my vue.js application makes.
For my own laptop, I'm usually running the backend at localhost, so I'd like the url to be localhost.
But on production, and on my coworker's computer, I'd like the production URL to be used (or a staging URL for coworker's computer).
This is because coworker isn't running the backend locally.
Can this be achieved with vue.js?
vue.js
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
"I'd like to have the URL to my api / backend server automatically be loaded" What do you mean loaded?
– Mav
Nov 23 '18 at 18:09
add a comment |
I'd like to have the URL to my api / backend server automatically be loaded and used in all the requests that my vue.js application makes.
For my own laptop, I'm usually running the backend at localhost, so I'd like the url to be localhost.
But on production, and on my coworker's computer, I'd like the production URL to be used (or a staging URL for coworker's computer).
This is because coworker isn't running the backend locally.
Can this be achieved with vue.js?
vue.js
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
I'd like to have the URL to my api / backend server automatically be loaded and used in all the requests that my vue.js application makes.
For my own laptop, I'm usually running the backend at localhost, so I'd like the url to be localhost.
But on production, and on my coworker's computer, I'd like the production URL to be used (or a staging URL for coworker's computer).
This is because coworker isn't running the backend locally.
Can this be achieved with vue.js?
vue.js
vue.js
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
asked Nov 23 '18 at 18:05
Click Upvote
96.8k227510688
96.8k227510688
"I'd like to have the URL to my api / backend server automatically be loaded" What do you mean loaded?
– Mav
Nov 23 '18 at 18:09
add a comment |
"I'd like to have the URL to my api / backend server automatically be loaded" What do you mean loaded?
– Mav
Nov 23 '18 at 18:09
"I'd like to have the URL to my api / backend server automatically be loaded" What do you mean loaded?
– Mav
Nov 23 '18 at 18:09
"I'd like to have the URL to my api / backend server automatically be loaded" What do you mean loaded?
– Mav
Nov 23 '18 at 18:09
add a comment |
1 Answer
1
active
oldest
votes
Check environment variables and modes for vue cli 3; Essentially set up two .env files for development and production separately (.env.development and .env.production):
In .env.development, where each developer can set up the base url differently:
VUE_APP_BASE_URI=localhost:8000 or a staging uri for your coworker
In .env.production:
VUE_APP_BASE_URI=YourProductionURL
And in your app, configure the http request to use process.env.VUE_APP_BASE_URI as the base URL.
And now when you and your coworker are in the development mode (i.e. running npm run serve), it will pick the VUE_APP_BASE_URI from .env.development; And when it's deployed to production via npm run build, your app will use VUE_APP_BASE_URI from .env.production file.
answered Nov 23 '18 at 18:18
Psidom
122k1282126
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
I believe so if both of you want to develop withnpm run servebut want to use different base URL. And in this case, a.env.development.localfile could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.
– Psidom
Nov 23 '18 at 18:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451227%2fhow-to-specify-different-api-urls-in-vue-js-for-my-computer-coworkers-computer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Check environment variables and modes for vue cli 3; Essentially set up two .env files for development and production separately (.env.development and .env.production):
In .env.development, where each developer can set up the base url differently:
VUE_APP_BASE_URI=localhost:8000 or a staging uri for your coworker
In .env.production:
VUE_APP_BASE_URI=YourProductionURL
And in your app, configure the http request to use process.env.VUE_APP_BASE_URI as the base URL.
And now when you and your coworker are in the development mode (i.e. running npm run serve), it will pick the VUE_APP_BASE_URI from .env.development; And when it's deployed to production via npm run build, your app will use VUE_APP_BASE_URI from .env.production file.
answered Nov 23 '18 at 18:18
Psidom
122k1282126
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
I believe so if both of you want to develop withnpm run servebut want to use different base URL. And in this case, a.env.development.localfile could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.
– Psidom
Nov 23 '18 at 18:25
add a comment |
Check environment variables and modes for vue cli 3; Essentially set up two .env files for development and production separately (.env.development and .env.production):
In .env.development, where each developer can set up the base url differently:
VUE_APP_BASE_URI=localhost:8000 or a staging uri for your coworker
In .env.production:
VUE_APP_BASE_URI=YourProductionURL
And in your app, configure the http request to use process.env.VUE_APP_BASE_URI as the base URL.
And now when you and your coworker are in the development mode (i.e. running npm run serve), it will pick the VUE_APP_BASE_URI from .env.development; And when it's deployed to production via npm run build, your app will use VUE_APP_BASE_URI from .env.production file.
answered Nov 23 '18 at 18:18
Psidom
122k1282126
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
I believe so if both of you want to develop withnpm run servebut want to use different base URL. And in this case, a.env.development.localfile could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.
– Psidom
Nov 23 '18 at 18:25
add a comment |
Check environment variables and modes for vue cli 3; Essentially set up two .env files for development and production separately (.env.development and .env.production):
In .env.development, where each developer can set up the base url differently:
VUE_APP_BASE_URI=localhost:8000 or a staging uri for your coworker
In .env.production:
VUE_APP_BASE_URI=YourProductionURL
And in your app, configure the http request to use process.env.VUE_APP_BASE_URI as the base URL.
And now when you and your coworker are in the development mode (i.e. running npm run serve), it will pick the VUE_APP_BASE_URI from .env.development; And when it's deployed to production via npm run build, your app will use VUE_APP_BASE_URI from .env.production file.
answered Nov 23 '18 at 18:18
Psidom
122k1282126
Check environment variables and modes for vue cli 3; Essentially set up two .env files for development and production separately (.env.development and .env.production):
In .env.development, where each developer can set up the base url differently:
VUE_APP_BASE_URI=localhost:8000 or a staging uri for your coworker
In .env.production:
VUE_APP_BASE_URI=YourProductionURL
And in your app, configure the http request to use process.env.VUE_APP_BASE_URI as the base URL.
And now when you and your coworker are in the development mode (i.e. running npm run serve), it will pick the VUE_APP_BASE_URI from .env.development; And when it's deployed to production via npm run build, your app will use VUE_APP_BASE_URI from .env.production file.
answered Nov 23 '18 at 18:18
Psidom
122k1282126
answered Nov 23 '18 at 18:18
Psidom
122k1282126
answered Nov 23 '18 at 18:18
Psidom
122k1282126
answered Nov 23 '18 at 18:18
Psidom
122k1282126
122k1282126
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
I believe so if both of you want to develop withnpm run servebut want to use different base URL. And in this case, a.env.development.localfile could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.
– Psidom
Nov 23 '18 at 18:25
add a comment |
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
I believe so if both of you want to develop withnpm run servebut want to use different base URL. And in this case, a.env.development.localfile could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.
– Psidom
Nov 23 '18 at 18:25
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
So we both need different env.development files? Thanks.
– Click Upvote
Nov 23 '18 at 18:19
I believe so if both of you want to develop with
npm run serve but want to use different base URL. And in this case, a .env.development.local file could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.– Psidom
Nov 23 '18 at 18:25
I believe so if both of you want to develop with
npm run serve but want to use different base URL. And in this case, a .env.development.local file could be more appropriate since it's ignored by git, and you don't have to switch the url back and forth.– Psidom
Nov 23 '18 at 18:25
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451227%2fhow-to-specify-different-api-urls-in-vue-js-for-my-computer-coworkers-computer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"I'd like to have the URL to my api / backend server automatically be loaded" What do you mean loaded?
– Mav
Nov 23 '18 at 18:09