Where and how to store API endpoints in vue js?
I am using vue-cli for front-end and lumen for back-end and I am curious about what is a best practice to store API root-url and endpoints in vue ?
Now I have constants.js file in src directory where API root-url and endpoints are like that:
const BASE_URL = "http://localhost:8000"
export const AddLanguge = BASE_URL + "/api/languages"
and when I need for example to implement add language functionality in component I import required API endpoint from constants.js like that:
import AddLanguge from '@/constants'
and then use axios to make request
this.$http.post(AddLanguge, params).then(response =>
if (response.status == 200)
this.addLanguage(response.data.data)
else
this.setHttpResponseDialog(response)
).catch(er =>
this.setHttpResponseDialog("Error")
)
I searched this question, but there is no clear answer some say: it's ok.
Others say: it's bad you must store that kind of data in dev.env.js and prod.env.js, and most important fact here is I don't get why are they saying so, why is it important to save that data in .env files? Or maybe is there some other better way?
Can you guys provide a right answer with good explanation or if there is no right answer and it depends on situation how can I decide which way is suitable for my case?
http vue.js vuejs2 web-frontend
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
add a comment |
I am using vue-cli for front-end and lumen for back-end and I am curious about what is a best practice to store API root-url and endpoints in vue ?
Now I have constants.js file in src directory where API root-url and endpoints are like that:
const BASE_URL = "http://localhost:8000"
export const AddLanguge = BASE_URL + "/api/languages"
and when I need for example to implement add language functionality in component I import required API endpoint from constants.js like that:
import AddLanguge from '@/constants'
and then use axios to make request
this.$http.post(AddLanguge, params).then(response =>
if (response.status == 200)
this.addLanguage(response.data.data)
else
this.setHttpResponseDialog(response)
).catch(er =>
this.setHttpResponseDialog("Error")
)
I searched this question, but there is no clear answer some say: it's ok.
Others say: it's bad you must store that kind of data in dev.env.js and prod.env.js, and most important fact here is I don't get why are they saying so, why is it important to save that data in .env files? Or maybe is there some other better way?
Can you guys provide a right answer with good explanation or if there is no right answer and it depends on situation how can I decide which way is suitable for my case?
http vue.js vuejs2 web-frontend
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
2
If you mean "where to store them" for security reasons then it doesn't matter because your security will be in the backend and handling requests, not in hiding your api routes. Like, you should pretty much be able to announce your API routes to the world and what makes them secure is how you handle people poking at the API, not in hiding the API. If you mean from a practical standing point of where to put them then I'd put them in a Vuex store, probably in its own module. You don't useenvfiles for sensitive data, otherwise it's just a matter of what's practical for you.
– Simon Hyll
Nov 15 '18 at 17:41
add a comment |
I am using vue-cli for front-end and lumen for back-end and I am curious about what is a best practice to store API root-url and endpoints in vue ?
Now I have constants.js file in src directory where API root-url and endpoints are like that:
const BASE_URL = "http://localhost:8000"
export const AddLanguge = BASE_URL + "/api/languages"
and when I need for example to implement add language functionality in component I import required API endpoint from constants.js like that:
import AddLanguge from '@/constants'
and then use axios to make request
this.$http.post(AddLanguge, params).then(response =>
if (response.status == 200)
this.addLanguage(response.data.data)
else
this.setHttpResponseDialog(response)
).catch(er =>
this.setHttpResponseDialog("Error")
)
I searched this question, but there is no clear answer some say: it's ok.
Others say: it's bad you must store that kind of data in dev.env.js and prod.env.js, and most important fact here is I don't get why are they saying so, why is it important to save that data in .env files? Or maybe is there some other better way?
Can you guys provide a right answer with good explanation or if there is no right answer and it depends on situation how can I decide which way is suitable for my case?
http vue.js vuejs2 web-frontend
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
I am using vue-cli for front-end and lumen for back-end and I am curious about what is a best practice to store API root-url and endpoints in vue ?
Now I have constants.js file in src directory where API root-url and endpoints are like that:
const BASE_URL = "http://localhost:8000"
export const AddLanguge = BASE_URL + "/api/languages"
and when I need for example to implement add language functionality in component I import required API endpoint from constants.js like that:
import AddLanguge from '@/constants'
and then use axios to make request
this.$http.post(AddLanguge, params).then(response =>
if (response.status == 200)
this.addLanguage(response.data.data)
else
this.setHttpResponseDialog(response)
).catch(er =>
this.setHttpResponseDialog("Error")
)
I searched this question, but there is no clear answer some say: it's ok.
Others say: it's bad you must store that kind of data in dev.env.js and prod.env.js, and most important fact here is I don't get why are they saying so, why is it important to save that data in .env files? Or maybe is there some other better way?
Can you guys provide a right answer with good explanation or if there is no right answer and it depends on situation how can I decide which way is suitable for my case?
http vue.js vuejs2 web-frontend
http vue.js vuejs2 web-frontend
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
asked Nov 15 '18 at 17:27
Nika KhurashviliNika Khurashvili
82812
82812
2
If you mean "where to store them" for security reasons then it doesn't matter because your security will be in the backend and handling requests, not in hiding your api routes. Like, you should pretty much be able to announce your API routes to the world and what makes them secure is how you handle people poking at the API, not in hiding the API. If you mean from a practical standing point of where to put them then I'd put them in a Vuex store, probably in its own module. You don't useenvfiles for sensitive data, otherwise it's just a matter of what's practical for you.
– Simon Hyll
Nov 15 '18 at 17:41
add a comment |
2
If you mean "where to store them" for security reasons then it doesn't matter because your security will be in the backend and handling requests, not in hiding your api routes. Like, you should pretty much be able to announce your API routes to the world and what makes them secure is how you handle people poking at the API, not in hiding the API. If you mean from a practical standing point of where to put them then I'd put them in a Vuex store, probably in its own module. You don't useenvfiles for sensitive data, otherwise it's just a matter of what's practical for you.
– Simon Hyll
Nov 15 '18 at 17:41
2
2
If you mean "where to store them" for security reasons then it doesn't matter because your security will be in the backend and handling requests, not in hiding your api routes. Like, you should pretty much be able to announce your API routes to the world and what makes them secure is how you handle people poking at the API, not in hiding the API. If you mean from a practical standing point of where to put them then I'd put them in a Vuex store, probably in its own module. You don't use
env files for sensitive data, otherwise it's just a matter of what's practical for you.– Simon Hyll
Nov 15 '18 at 17:41
If you mean "where to store them" for security reasons then it doesn't matter because your security will be in the backend and handling requests, not in hiding your api routes. Like, you should pretty much be able to announce your API routes to the world and what makes them secure is how you handle people poking at the API, not in hiding the API. If you mean from a practical standing point of where to put them then I'd put them in a Vuex store, probably in its own module. You don't use
env files for sensitive data, otherwise it's just a matter of what's practical for you.– Simon Hyll
Nov 15 '18 at 17:41
add a comment |
1 Answer
1
active
oldest
votes
.env files are recommended because you may have different endpoints depending on environment, that is to say are you running dev server with "npm run serve" or building for production with "npm run build". With .env config files they become environment variables and you don't need to hard code them into your app, it's just the most practical thing to do. With Vue CLI 3 you would have
//.env.development
VUE_APP_BASEURL = "http://localhost:8000"
And in your app you could access it with.
process.env.VUE_APP_BASEURL
What I use to do is just have the base in a variable and then concatenate rest.
const BASE_URL = process.env.VUE_APP_BASEURL
this.$http.post(BASE_URL + '/api/languages/', params)
answered Nov 15 '18 at 18:09
artojuartoju
21624
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%2f53324918%2fwhere-and-how-to-store-api-endpoints-in-vue-js%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
.env files are recommended because you may have different endpoints depending on environment, that is to say are you running dev server with "npm run serve" or building for production with "npm run build". With .env config files they become environment variables and you don't need to hard code them into your app, it's just the most practical thing to do. With Vue CLI 3 you would have
//.env.development
VUE_APP_BASEURL = "http://localhost:8000"
And in your app you could access it with.
process.env.VUE_APP_BASEURL
What I use to do is just have the base in a variable and then concatenate rest.
const BASE_URL = process.env.VUE_APP_BASEURL
this.$http.post(BASE_URL + '/api/languages/', params)
answered Nov 15 '18 at 18:09
artojuartoju
21624
add a comment |
.env files are recommended because you may have different endpoints depending on environment, that is to say are you running dev server with "npm run serve" or building for production with "npm run build". With .env config files they become environment variables and you don't need to hard code them into your app, it's just the most practical thing to do. With Vue CLI 3 you would have
//.env.development
VUE_APP_BASEURL = "http://localhost:8000"
And in your app you could access it with.
process.env.VUE_APP_BASEURL
What I use to do is just have the base in a variable and then concatenate rest.
const BASE_URL = process.env.VUE_APP_BASEURL
this.$http.post(BASE_URL + '/api/languages/', params)
answered Nov 15 '18 at 18:09
artojuartoju
21624
add a comment |
.env files are recommended because you may have different endpoints depending on environment, that is to say are you running dev server with "npm run serve" or building for production with "npm run build". With .env config files they become environment variables and you don't need to hard code them into your app, it's just the most practical thing to do. With Vue CLI 3 you would have
//.env.development
VUE_APP_BASEURL = "http://localhost:8000"
And in your app you could access it with.
process.env.VUE_APP_BASEURL
What I use to do is just have the base in a variable and then concatenate rest.
const BASE_URL = process.env.VUE_APP_BASEURL
this.$http.post(BASE_URL + '/api/languages/', params)
answered Nov 15 '18 at 18:09
artojuartoju
21624
.env files are recommended because you may have different endpoints depending on environment, that is to say are you running dev server with "npm run serve" or building for production with "npm run build". With .env config files they become environment variables and you don't need to hard code them into your app, it's just the most practical thing to do. With Vue CLI 3 you would have
//.env.development
VUE_APP_BASEURL = "http://localhost:8000"
And in your app you could access it with.
process.env.VUE_APP_BASEURL
What I use to do is just have the base in a variable and then concatenate rest.
const BASE_URL = process.env.VUE_APP_BASEURL
this.$http.post(BASE_URL + '/api/languages/', params)
answered Nov 15 '18 at 18:09
artojuartoju
21624
answered Nov 15 '18 at 18:09
artojuartoju
21624
answered Nov 15 '18 at 18:09
artojuartoju
21624
answered Nov 15 '18 at 18:09
artojuartoju
21624
21624
add a comment |
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.
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%2f53324918%2fwhere-and-how-to-store-api-endpoints-in-vue-js%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
2
If you mean "where to store them" for security reasons then it doesn't matter because your security will be in the backend and handling requests, not in hiding your api routes. Like, you should pretty much be able to announce your API routes to the world and what makes them secure is how you handle people poking at the API, not in hiding the API. If you mean from a practical standing point of where to put them then I'd put them in a Vuex store, probably in its own module. You don't use
envfiles for sensitive data, otherwise it's just a matter of what's practical for you.– Simon Hyll
Nov 15 '18 at 17:41