Using .env file in Quasar Apps

Published in

carbono

5 min readMar 15, 2018

In every Quasar App We need to use at least an external API, therefore, some client_id and client_secrets will be given to us to be able to consume their data, for example: Push Notifications, OAuth, Realtime Services, etc.

In some projects I used to create a file where all the information of our APIs was stored. Unfortunately, these variables were sent to Version Control, which is a bad idea, in spite of being stored in a client app, someone may say it’s not a problem, but for example, in my case I work with different environments: Master, Develop and Beta(Sometimes).

https://app.com
https://dev.app.com
https://beta.app.com

This means that I need to have different values for this variables for every environment.

For example, days ago I was running some tests, during the tests some push notifications were sent to production, some minutes later our client call us saying who’s uploading information? I have received a couple of notifications.

It was because I was using the client_id of the production environment while being in local!!! Precisely because I did not had an easy way to set different values for each environment.

That’s why of this post, adding your own variables in process.env.

Let’s get started!

Requirements

Vue CLI (2.9.3)
Quasar CLI (0.15.4)
Nodejs (9.4)
Quasar 0.15.3 (this version will be installed using Quasar cli)

Installation

Before We start, and if you didn’t read the requirements, we gotta install quasar-cli globally, it’s very important to get the latest version.

npm install -g quasar-cli

As well as vue-cli

npm install -g vue-cli

Quasar needs the latest version of NodeJS(9.4), if You don’t have the latest version, You must update it, please check this thread to update it.

Having all the requirements We will continue to generate the project for our app. But first, let’s make sure We have quasar installed, by typing in Terminal:

$ quasar

We should see something like this:

If you see the something like the previous view, everything is okay, so let’s continue writing: quasar init myApp . Then, just follow the instructions to finally start the installation. It may take some minutes (or seconds) meanwhile you may go to get some beer.

Once it has finished, let’s open the project using your favorite code editor(or IDE).

You should see:

Ok, now, Let’s pay attention in the next file quasar.conf.js, this file will help us to configure our apps depending its type: PWA, SPA, Cordova app or Electron app. As well as to extend features for Webpack, from creating aliases to adding new loaders.

OK, don’t forget what we are looking for. We want to access our variables stored in the .env file, for more information about quasar.conf.js you can check Quasar Documentation.

Creating .env and .env.example files

Let’s create the .env file in the root of the project, adding some variables:

Since this file will be ignored by Git, we should duplicate it renaming to .env.example (without values of course haha)

Installing dotenv

The package dotenv parses the variables contained in our .env file to JSON and store them in process.env, quasar is already storing some variables there, for this reason we will create a new plugin to create our own. Let’s install it by typing the following:

npm install — save-dev dotenv

Creating envparser.js

This file will help us to get the values from .env and encode them, according to Quasar documentation:

“Add properties to process.env that you can use in your website/app JS code. Each property needs to be JSON encoded. Example: { SOMETHING: JSON.stringify(‘someValue’) }.”

Let’s create a file in config/envparser.js, with the following:

Updating quasar.conf.js

Something that we need to know before go ahead is, quasar.conf.js and envparser.js are Nodejs files, therefore they don’t have any relation with our project, . Once said that we can start opening the file and write this at the top:

const DotEnv = require(‘dotenv’)

const webpack = require(‘webpack’)

const envparsers = require(‘./config/envparser’)

Then, let’s find build property, there you assign envparser() to env property. (Line 32)

Printing values in application

run the application quasar dev, and just print a console.info(process.env) in any file of your application. You should see:

We see additonal variables because quasar created them

OK, that’s all guys, We have done the hardest part.

It was easy isn’t it? 👀

Creating function helper

In my short career as Frontend I have worked with some backend frameworks like Laravel and most of the ideas I have done in frontend has been inspired in this framework, that’s why we will do an Env helper method which work:

env(VARIABLE, ‘defaultValue’ )

I think this notation is more elegant and prettier, what do you think?

To do that, let’s create a new folder inside ‘config’ folder, called helpers.

config/helpers

In this folder we are creating env.js, with the following code:

We are planning to expose this function to be used in any place of our app. Adding a new alias (line 47) and creating a new plugin with this helper (line 50)