Environment variables are a gold mine for quickly and securely accessing environment variables, such as passwords, URLs, authentication keys, etc.
Dotenv is a straightforward module that imports process.env with environment variables from a .env file. It is secure and practical to store essential configurations in the environment apart from code.
Dotenv is a very simple and lightweight npm package, and its usage is just as straightforward as its name suggests. Let’s look at how we can use dotenv in the quasar app.
Using dotenv in Quasar Apps
Requirements
[Note – packages should be updated]
Dotenv Installation
Since quasar already stores certain variables, we will create a new plugin to add our own. The package dotenv converts the variables found in our .env file to JSON and stores them in process.env. Type the following to install dotenv:
If you are using NPM hit:
npm install –save-dev dotenv
If you are using YARN hit
yarn add –dev dotenvCreating a .env file and adding variables
Let’s add some variables to the.env file and create it in the project’s root directory:
HOME_PAGE=https://www.40bears.com
API_URL=http://localhost:3001Updating quasar.config.js
The next step is to update the quasar config file and define the env property inside the build property, just like this
build: {
env: {}
}How to Access the Environment Variables
Now, if env is configured and variables are created in the .env file, your variables are quite easy to access.
They are attached to the process.env object, so you can access them using the pattern process.env.KEY_NAME.
Example –
process.env.API_URL
Okay, guys, that’s all. The challenging portion is complete.
It was simple, isn’t it?
Wrapping up
In this article, we have discussed a frequently used module for setting up environment variables.
Your code will be more secure and easier to maintain thanks to environment variables. With Dotenv, they are simple to add and use.
Now you can make your own environment variables for your quasar application. Enjoy!
Thanks a lot. Please share it if you find it useful. Happy Coding.
