Env Variables and Modes

[gnidustotalus]

Hello,
I am trying to use env variables based on vite documentation. I need multiple envs and there is example how to use that:

By default, the dev server (dev command) runs in development mode and the build command runs in production mode.

vite build --mode staging

But when I use --mode=staging flag in quasar build command i have an error App • ⚠️ Unknown mode "staging". I know quasar has same option so there is a conflict. How to use different mode only for Vite? Or should I handle process envs differently?

EDIT:
I found this solution with cross-env, but this one with Vite is working good, and I think this should work in Quasar too.

[MilosPaunovic]

I've recently written this, seems like it is exactly what you need, so give it a look:
https://gist.github.com/MilosPaunovic/1da784b83466197196b4b0fd6448c0b1

[gnidustotalus]

@MilosPaunovic This is great solution, but I'm curious if that vite mode can work properly in Quasar. Vite env mode works out of the box and we don't need to install additional packages to handle it. So if there is any chance we can change mode in vite it should work without any problem.

[MilosPaunovic]

Yes, you can use those variables out-of-the box.

[gnidustotalus]

Yes but I can't change mode (To be precise I don't know how to do it). So I can use only .env.development and .env.production when Vite handle processing envs. Are you understand now what is a problem?

[MilosPaunovic]

That mode you're referring to is the mode of the application itself, and it could be one of the values form the circled list. Development and production are values of the NODE_ENV variable. And, if you want your own environments, you're gonna have to create them yourself.

[gnidustotalus]

@MilosPaunovic Did you read vite docs? I provided link here. As I said previously there is mode option in vite bundler. So if we use this bundler in Quasar we should have access to define mode option for vite. I don't know how to say it more clearly

[rotu]

This is confusing because Vite defines e.g. process.env.MODE: "electron" whereas vite defines import.meta.MODE: "development" and these are both different from process.env["MODE"], which is the runtime variable of the environment variable $MODE

[BenJackGill]

Did you ever get this working out of the box with Vite?

The custom solution from @MilosPaunovic looks cool but I'd rather stick with a native Vite solution if possible.

[gnidustotalus]

Did you ever get this working out of the box with Vite?

I think it's impossible in Quasar right now

[rstoenescu]

Yarn/Npm install dotenv and in your quasar.config.js just import it then supply process.env to build > env.

[gnidustotalus]

@rstoenescu thank you for your response but this is not a solution to this problem. As you can see in previous comments we are trying to achieve something else. We want to use env variables based on Vite bulit-in .env.

When we want use different .env file we need to call this command:

vite build --mode staging

Problem is with --mode flag, Quasar is using it in different way so there some conflict.

[rstoenescu]

Implemented out of the box support for .env files, as follows:

Order matters!

# quasarMode can be: spa | pwa | electron | capacitor | cordova | bex | ssr

.env                                                       # loaded in all cases
.env.local                                              # loaded in all cases, ignored by git
.env.[dev|prod]                                    # loaded for dev or prod only
.env.local.[dev|prod]                           # loaded for dev or prod only, ignored by git
.env.[quasarMode]                              # loaded for specific Quasar CLI mode only
.env.local.[quasarMode]                     # loaded for specific Quasar CLI mode only, ignored by git
.env.[dev|prod].[quasarMode]           # loaded for specific Quasar CLI mode and dev|prod only
.env.local.[dev|prod].[quasarMode]  # loaded for specific Quasar CLI mode and dev|prod only, ignored by git

Also, new quasar.config file props:

  /**
   * Folder where Quasar CLI should look for .env* files.
   * Can be an absolute path or a relative path to project root directory.
   *
   * @default project root directory
   */
  build > envFolder?: string;
  /**
   * Additional .env* files to be loaded.
   * Each entry can be an absolute path or a relative path to quasar.config > build > envFolder.
   *
   * @example ['.env.somefile', '../.env.someotherfile']
   */
  build > envFiles?: string[];

Will be available in next q/app-vite and q/app-webpack (version to be decided).

There is no "staging" support (at least not yet) in Quasar CLI.

[rstoenescu]

It's now available. Released q/app-vite v2.0.0-beta.1 and q/app-webpack v4.0.0-beta.1

[ricar2ce]

don't work for me 🤷‍♂️🤷‍♂️

[nicobao]

@rstoenescu Do we have to setup build > envFolder?: string; for it to work, and download dotenv (yarn add dotenv)?
I was not able to get it to work as well, with or without the above.
Is it possible to add the .env setup in the yarn create quasar template?
Also, I noticed that this page does not mention this change at all: https://quasar.dev/quasar-cli-vite/handling-process-env/ so it's a little confusing

[rstoenescu]

Just add one (or multiple) of those dotfiles in your root project. You will get this banner when files are detected:

Should you want to place the dotfiles in some other place, only then use the quasar.config > build > envFolder setting.

Also, please note that there is no watcher for these files. If you add/remove/change these files, you will need to kill restart your devserver (kill then call "quasar dev" again).

[rstoenescu]

Also, you don't need to install anything else (like dotenv yourself).