How use .env files in Quasar
Tags: quasar, vue
Published: 2020-08-24 13:03:55


Many developers especially beginers have problems with proper use of .env file during Quasar application development and build-up.

Quasar recent documentation (for ver.1.13) mentions three methods for using enviroment variables in the application:
-  CLI inline variables e.g.
`QENV=development quasar dev`

- @quasar/dotenv extension
  https://www.npmjs.com/package/@quasar/quasar-app-extension-dotenv

- @quasar/qenv extension
  https://www.npmjs.com/package/@quasar/quasar-app-extension-qenv

Unfortunatelly despite descriptions in official documentation
https://quasar.dev/quasar-cli/handling-process-env
https://quasar.dev/quasar-cli/quasar-conf-js#Example-setting-env-for-dev%2Fbuild

developers are confused in many cases when they try to use .env file due to missing important information in Quasar ducumentation. In this article I want to clarify how proper to use the enviromental variables.

## Two basic use cases ##
Because of different scope of operation we can split the described methods in two groups:

1. applicable in quasar.conf.js (main configuration file):
  - CLI inline variables
  - @quasar/dotenv extension
2. applicable ONLY in the application (boot files, components):
  - @quasar/qenv extension

Most important conclusion here is

**You cannot use @quasar/qenv extension for settings in quasar.conf.js**

## How to use @quasar/dotenv extension ##
Very good description is in article
https://medium.com/carbono/using-env-file-in-quasar-apps-72b56909302f

At first install Quasar App Extension dotenv:
https://www.npmjs.com/package/@quasar/quasar-app-extension-dotenv

`quasar ext add @quasar/dotenv`

then create new js file envparser.js in /src/config:
```
const DotEnv = require('dotenv')
const parsedEnv = DotEnv.config().parsed
module.exports = function () {
  // Let's stringify our variables
  for (key in parsedEnv) {
    if (typeof parsedEnv[key] === 'string') {
      parsedEnv[key] = JSON.stringify(parsedEnv[key])
    }
  }
  return parsedEnv
}
```
in quasar.conf.js then include on the most top of the file following code:

`const envparser = require('./src/config/envparser.js')`

and assign this function to (new) env variable to the build attribute in quasar.conf.js:
```
build: {
  env: envparser(),
  vueRouterMode: 'history',
...}
```
Create a file **.env** in the top (root) project directory. It can contain any number of custom env variables e.g.

`JOT_PUBLIC_PATH=http://dev.com/flexbox/dist/spa`

then you use the variable in quasar.config.js
```
build: {
     env: envparser(),
     vueRouterMode: 'history',
     publicPath: ctx.prod ? process.env.JOT_PUBLIC_PATH : '',
...}
```
**In object process.env are available all server/computer environment variables and all custom environment variables from .env file.**

## How to use @quasar/qenv extension ##
Install Quasar extension

`quasar ext add @quasar/qenv`

File .quasar.env.json is created during installation with demo template
```
{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "Development"
  },
  "production": {
    "ENV_TYPE": "Running Production",
    "ENV_PROD": "Production"
  },
  "test": {
    "ENV_TYPE": "Running Test",
    "ENV_Test": "Test"
  }
}
```

Variables from .quasar.env.json are available only after successfull application build (i.e. after processing quasar.config.js). These custom variables together with some other built-in variables are available in the application boot files, application and components files.

**In object process.env are available only variables from .quasar.env.json and Quasar built-in environment variables.**

Using above defined template the process.env object contains:
```
{
      "ENV_TYPE": "Running Development",
      "ENV_DEV": "Development",
      "NODE_ENV": "development",
      "CLIENT": true,
      "SERVER": false,
      "DEV": true,
      "PROD": false,
      "MODE": "spa",
      "VUE_ROUTER_MODE": "hash",
      "VUE_ROUTER_BASE": "",
      "APP_URL": "http://localhost:8080"
}
```
**After build processing the server/computer environment variables are NOT AVAILABLE in new created process.env object.**

Example use in boot file:
```
export default async (app /* { app, router, Vue ... } */) => {
 console.log('show router mode:', process.env.VUE_ROUTER_MODE);
 // something to do
}
```

Example use in *.vue file:
```
<script>
  console.log('inside', process.env.VUE_ROUTER_MODE);
  export default {
    name: 'App',
  }
</script>
```