DEV Community

loading...

How use .env files in Quasar

Jotcomponents
・3 min read

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:

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>

Discussion (0)