codenamezjames/app-extension-qenv

QEnv (@quasar/qenv)

This project is an official Quasar v1 CLI App Extension.

@quasar/qenv is a CLI App Extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.

This work is currently in beta and there are expected changes while things get worked out. Your help with testing is greatly appreciated.

Installation

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add @quasar/qenv

Quasar CLI will retrieve it from NPM and install the extension.

You will be asked a couple of questions. Type in your answers:

? What name would you like to use for your Common Root Object ('none' means to not
 use one)? none
? For security, would you like your .quasar.env.json file automatically added to .
gitignore? Yes

Selecting [enter] on your keyboard will give you the defaults. There will be no common root object and the .quasar.env.json will be added to your .gitignore.

Also, it is highly recommended to add your .quasar.env.json file to your .gitignore. It really does not belong in your repository as it may contain sensitive data.

Accessing the data

Any specified data in .quasar.env.json will be placed in process.env at the browser level.

If you specified a common root object, say MyData, then the data will be placed at process.env.MyData.

Tips

Be aware, if you have something like this in your .quasar.env.json:

"APP_PORT": "4000"

Then you will need to use the parseInt() function as it will be propogated to the browser code as a string. You should really do it this way:

"APP_PORT": 4000

Now, the variable will be accessible in the browser as a number.

Format

The format of the .quasar.env.json is as follows:

{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "Development"
  },
  "production": {
    "ENV_TYPE": "Running Production",
    "ENV_PROD": "Production"
  },
  "test": {
    "ENV_TYPE": "Running Test",
    "ENV_Test": "Test"
  }
}

This is the default that is installed and you will need to modify it to fit your needs.

You can add as many environments as needed (top-level keys). You are not restricted to the development, production and test that come by default. And, you can add as many variables under those environment types as you like.

Specifying environment

So, how is this accessed?

You will need to modify your package.json in the scripts area. Let's take a look at an example:

  "scripts": {
    "dev": "QENV=development quasar dev",
    "test-dev": "QENV=test quasar dev",
    "combined": "QENV=development+test quasar dev",
    "build": "QENV=production quasar build"
  },

Basically, you need to set the QENV environment variable for Node. You specifiy the key that you want for the propgated data.

Chaining environments

Look at the combined script. Absolutely, you can chain two or more together. When doing this, if there is any conflicting variables, the last one in wins.

In other words:

"combined": "QENV=development+test quasar dev",

will give different results than:

"combined": "QENV=test+development quasar dev",

And to be clear, you would do the following to run it:

# npm
npm run combined

# or

# yarn
yarn combined

Uninstall

To uninstall:

quasar ext remove @quasar/qenv

Patreon

If you like (and use) this App Extension, please consider becoming a Quasar Patreon.