Build for more environments such as staging

[hamidhosseini]

I want to build for different environments other than production, for example, staging. How is this done? I did some looking around but I'm confused more than ever. With NPM it's easy, all you do is create a separate env file and add a new script in the package.json but with Quasar, I have no clue how it's done.
Any help would be appreciated.

[MilosPaunovic]

What I doing for my projects is that I have separate scripts for all of needed environments, and separated env files for 'em. You could utilize this:

https://quasar.dev/quasar-cli-webpack/handling-process-env

Or, if you need more env liberty, I could get you the custom parser I'm using.

[hamidhosseini]

That's the type of setup I want. How do you add those different files to Quasar? I'm using Vite by the way.

[MilosPaunovic]

What I do in my projects when I need different environments is the following:

I firstly like to create a variables folder in the project root, after which I create a parser.js file with this content:

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;
};

As you see, it requires dotenv, so you need to run npm i dotenv for it to work.

In the same, variables folder, I'm having multiple environment files, like .env.development, .env.testing, .env.staging, .env.production or whatever I need for that particular project.

I'll give you a default content of the .env.development file I use to start almost all of the projects with:

# Variable which separates environments
ENVIRONMENT = development

# Sentry DSN tells the SDK where to send the events to
SENTRY_DSN =

# Base URL to which all API endpoints will be forwarded
BASE_URL =

In my quasar.config.js file I import that parser and set env property of thebuild attribute to it:

const PARSER = require('./variables/parser')();

// ...
build: {
   env: PARSER
}

That completes those steps, what is left is to create custom scripts for all of the environments, so in my package.json file, under scripts, I add something like this:

    "dev:local": "cross-env ENVIRONMENT=local quasar dev -m pwa",
    "prebuild:local": "npm run lint",
    "build:local": "cross-env ENVIRONMENT=local npm quasar build -m pwa --debug",
    "dev:staging": "cross-env ENVIRONMENT=staging quasar dev -m pwa",
    "prebuild:staging": "npm run lint",
    "build:staging": "cross-env ENVIRONMENT=staging npm quasar build -m pwa --debug",

I use cross-env package because I often switch workstations and OS types, so it saves me time. If you decide on using it, you need to run npm i cross-env as well.

That should be it.