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 from npm
- Creating a .env file
- Creating an envParser.js file
- Configuring your quasar.config.js file
- Console.info(process.env)
Installing dotenv Package
Firstly: On your terminal, 'npm install dotenv' to install the package in your root
directory.
Creating a .env File
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.
Creating an envParser.js File
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.
Configuring your quasar.config.js File
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 .
Also, at the Build section of the quasar.config.js, include env: envParser(), to Inject
our own env file we created.
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..
Top comments (2)
Nice one dude, very detailed to grab for a beginner, what code font is that?
Lucida Calligraphy-Font Family
Thanks manny, I really appreciate you introducing me to this beautiful way of life @quasar :)