Build using environment variables in staging

[AdagioB]

I'm trying to learn, what is the correct way to use environment variables, that changes based on the mode of the app
Unfortunately I'm having a hard time finding a lot of useful information, that can help me with my case. This is a bit weird, as I believe this is a very common scenario

The way I see it, I should have three different modes: development, staging and production

At first I thought I would need to edit quasar.config.js to something like this

build: { env: { API: ctx.dev ? 'https://dev.api.com' : ctx.staging ? 'https://test.api.com' : 'https://prod.api.com' }

But as far as I can tell, there's only ctx.dev and ctx.production

Then I tried to add the files .env.production, .env.staging and .env where I added VITE_API= with their respective addresses, hoping for some magic here. Unfortunately I have no idea how to build it for staging

"scripts": { "lint": "eslint --ext .js,.ts,.vue ./", "format": "prettier --write \"**/*.{js,ts,vue,,html,md,json}\" --ignore-path .gitignore", "test": "quasar build", "dev": "quasar dev", "build": "quasar build" },

Here I run into the same problem. I can only find commands to build in production or development
This leaves me thinking that apparently nobody sets up some test servers anymore to test their stuff... real men test in production... or am I missing something here?

[AdagioB]

I finally managed to find a workaround to get it working

I created this file: \variables\parser.js

`const dotenv = require('dotenv');

const files = {
...dotenv.config({ path: 'variables/.env' }).parsed,
...dotenv.config({ path: variables/.env.${process.env.ENVIRONMENT} }).parsed,
...dotenv.config({ path: variables/.env.${process.env.ENVIRONMENT}.local }).parsed,
};

module.exports = () =>
{
Object.keys(files, (key) =>
{
if (typeof files[key] !== 'string')
{
files[key] = JSON.stringify(files[key]);
}
});
return files;
};
`

In the same folder I created different .env files (e.g. .env.staging) where I added the variables they needed

Inside quasar.config.js I added this line to the top:
const PARSER = require('./variables/parser')();

And further down I did this:
build: { env: PARSER }

In package.json I added this line unders scripts:

"staging": "cross-env ENVIRONMENT=staging quasar build -m spa",

I found the information in this discussion: #15065

[rstoenescu]

You could use the q/app-vite v2.0.0-beta or q/app-webpack v4.0.0-beta. Both have native support for dotenv files

[true-vue]

@rstoenescu thanks!

Using vite build-in way for handling .env files is great feature. Separate one that (still) seems to be missing is ability to pass vite mode into quasar cli command.

So something like: quasar build --vite-mode staging

Is it considered to be done soon?