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:
CLI inline variables e.g.
QENV=development quasar dev
@quasar/dotenv extension
https://www.npmjs.com/package/@quasar/quasar-app-extension-dotenv@quasar/qenv extension
https://www.npmjs.com/package/@quasar/quasar-app-extension-qenv
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:
- applicable in quasar.conf.js (main configuration file):
- CLI inline variables
- @quasar/dotenv extension
- 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>
Top comments (0)