15

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?

Nika Kurashvili
  • 6,006
  • 8
  • 57
  • 123
  • 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
  • Possible duplicate of [How to set API path in vue.config.js for production?](https://stackoverflow.com/questions/51406770/how-to-set-api-path-in-vue-config-js-for-production) – YakovL Sep 16 '19 at 10:46

1 Answers1

23

.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)
artoju
  • 1,612
  • 12
  • 12
  • is the prefix `VUE_APP_` required? When I had a variable named `VUE_DEV_API_ENDPOINT` it didn't work (`process.env.VUE_DEV_API_ENDPOINT` was `undefined`), but when I substituted it with `VUE_APP_DEV_API_ENDPOINT`, it worked just like `VUE_APP_API_ENDPOINT` did) – YakovL Sep 16 '19 at 09:44
  • 1
    yeap, the prefix is required: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables – YakovL Sep 16 '19 at 09:54
  • 1
    @YakovL Yes, it is indeed required. Stated here https://cli.vuejs.org/guide/mode-and-env.html#environment-variables "Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin." – artoju Sep 16 '19 at 09:54