DEV Community

Cover image for How To Add env files To Quasar Easily
George Ikwegbu Chinedu
George Ikwegbu Chinedu

Posted on • Updated on

How To Add env files To Quasar Easily

Image By Singkham From Pexels

So, Today, I will talk about the easy steps to add and use environment variables to Quasar applications.
As usual, my post is written as Learn new things, so it won't be pretty and formatted. So I will explain with a screen shot, and Line-Numbers...Let's GOOOOO!!.

Table Of Contents

Installing dotenv Package

Alt Text

Firstly: On your terminal, 'npm install dotenv' to install the package in your root 
directory.
Enter fullscreen mode Exit fullscreen mode

Creating a .env File

Alt Text

Secondly: At the root directory of your project, create a .env file, then there you 
specify your key-value pairs of what you wish to hide when uploading your project on a 
version control system (Github etc...). Also, remember to add .env in your .gitignore 
file.
Enter fullscreen mode Exit fullscreen mode

Creating an envParser.js File

Alt Text

Thirdly: Create a file called envParser.js at the root directory too. This file will be 
used to call and configure you quasar.config.js file to see our own env file and inputs, 
then add it to the process.env . Type all you see there, as we require or installed 
package 'dotenv', the export the module.
Enter fullscreen mode Exit fullscreen mode

Configuring your quasar.config.js File

Alt Text

Fourthly: In your quasar.config.js file, at the beginning part, add the above lines of 
code.. Sorry, i duplicated the last requiring of the envParser..not necessary .
Enter fullscreen mode Exit fullscreen mode

Alt Text

Also, at the Build section of the quasar.config.js, include env: envParser(), to Inject 
our own env file we created.
Enter fullscreen mode Exit fullscreen mode




Console.info(process.env)

OK... That's a Wrap, just write 'console.info(process.env)', on any of your vue files to see what we have done...
Also, Remember to restart your server when you make changes to the .env file so the system catches it.
Thanks..

Discussion (2)

Collapse
navicsteinr profile image
Navicstein Rotciv

Nice one dude, very detailed to grab for a beginner, what code font is that?

Collapse
gikwegbu profile image
George Ikwegbu Chinedu Author

Lucida Calligraphy-Font Family

Thanks manny, I really appreciate you introducing me to this beautiful way of life @quasar :)