Config variables

[sylvaincaillot]

Hello,

I don't know if it is related to the use of vue-cli with the integration of webpack but I used to have config or build folders in the paperdashboard template in the past where I used to define a serie of constants (API, URl, etc..) for my dev and prod platforms. What would be an easy manner to do so now?

Thank you

S.

[sylvaincaillot]

Ok after following explanations here. I was able to set up a .env.development and a .env.production files. it should be enough for the time being.

Let me know if there are better practices

[cristijora]

Hi @sylvaincaillot

This changed a bit with Vue CLI 3. Indeed, you have to use .env files. I will share a structure from one of my projects so you get an idea of what you can do based on your needs.

So in my case, I have 3 production environments (dev, staging and production) as well as 2 local environments (one uses a local server and one uses the dev api). The env files for that are: .env (default local environment used along with the dev server) .env.localserver (local environment used along with a local server. Note here that it's not named .env.local since that is a special configuration that will basically override anything)

.env.dev (production environment for dev) .env.staging (production environment for staging) .env.production (production environment for production website)

You can pretty much have env.anything. There is no real restriction there. Just make sure you don't have the same names twice.

Now each of these files is pretty much the same but with slightly different config variables. The local ones have something like this

NODE_ENV=development
VUE_APP_API_PORT=443
VUE_APP_API_PROTOCOL=https
VUE_APP_API_HOST=my-api.com

while the production ones have

NODE_ENV=production
VUE_APP_API_PORT=443
VUE_APP_API_PROTOCOL=https
VUE_APP_API_HOST=my-api.com

NODE_ENV=production will be the key thing that will determine whether your output files should be minified and optimized for production.

Now for building, you just need to specify --mode flag. So for example in this case, if we want to build for dev environment we will have something like this: "build:dev": "vue-cli-service build --mode=dev and for staging it will be with --mode=staging

You could do the same with --serve if you want for example to run the local server with different configs. For example vue-cli-service serve --open --mode=localserver will take the configs from a .env.localserver file if it exists.

Another small note here is that all config variables inside these .env files should start with VUE_APP. This is a "standard" enforced by the new vue cli. You can access these variables in any part of your app then with proccess.env.VUE_APP_MY_VAR

A last tip I have here, is to create a config.js file where you declare these variables so you can easily reference in different parts of your app. Example:

export const config = {
  API_PROTOCOL: process.env.VUE_APP_API_PROTOCOL,
  API_HOST: process.env.VUE_APP_API_HOST,
  API_PORT: process.env.VUE_APP_API_PORT,
  ENV: process.env.VUE_APP_NODE_ENV || 'development'
};

Then you could set your axios default url for example based on those.

import {config} from 'path-to-config-file'
axios.defaults.baseURL = `${config.API_PROTOCOL}://${config.API_HOST}:${config.API_PORT}/`;

Depending on your needs this stuff can be simpler if you have less environments. Hope this helps :)

[sylvaincaillot]

This is perfect, extremely clear. The examples are useful as I was struggling with the syntax (single quote, double quotes, semicolon). This is the first post I found with real life examples. Thank you again