How use .env files in Quasar

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>