[V1] A guide for @quasar/dotenv

mKomo

Hi all, this is my unofficial guide on how to use the quasar dotenv extension.

Install the quasar app extension:

   $ quasar ext add @quasar/dotenv

Follow the setup instructions, here you’ll specify the names for your production and development .env files ex: dev.env // prod.env
Create files in your root directory based on the names specified in step (2)

   // dev.env              

   FOO=bar

You’re all set, you can access these vars in any file via process.env.<var-name>

   // src/components/example.vue         
    
    ...
    mounted() {
      console.log(process.env.FOO)            
    },
    ...

For more information check out:

Github repo

Why I wrote the post:

This is very similar to the steps in the github repo but it wasn’t immediatley clear that I had to make new files and how the variables I specified would be accessible in my files.

If anythings missing feel free to correct me below / add to the knowledge of how to use this great framework

nothingismagick

@Hawkeye64 - check this out. Thanks @mKomo

nothingismagick

This post is deleted!

nothingismagick

I just created two issues that should hopefully resolve your concerns.

https://github.com/quasarframework/app-extension-dotenv/issues/3
https://github.com/quasarframework/app-extension-dotenv/issues/4

Hawkeye64

@mKomo This is great feedback, thanks!

mKomo

@Hawkeye64 happy to help! If you need a hand with docs / guides feel free to drop message

AndrewE

How do you get the prompts?
I’ve installed and unistalled and re-installed @quasar/dotenv, but I do not get the prompts to set the env files. I’ve added dev.env and prod.env files manually and put my firebase config in them. However, I get a build error that App Extension “@quasar/dotenv” has missing index script…
Is this script created via the prompts? Where would this script be found?
When I run “add” it just lists the extension and shows an empty prompts object:
$quasar ext add @quasar/dotenv

app:extension-manager Listing installed App Extensions +0ms

Extension name: @quasar/dotenv
Extension prompts: {}

update: I got no prompts when trying to run dotenv in a clone of https://github.com/kpapro/quasar-firebase-firestore

I did get prompts in my project folder which was init’ed with the recent quasar build (v1.0.0-beta.19).

s.molinari

@AndrewE - The way it looks in that firebase scaffold, the dotenv app extension is already installed. Theoretically, the author of that repo should be making an app extension themselves to install that scaffold.

Scott

AndrewE

@s-molinari
Thanks for pointing that out!

aeiosapp

Nice solution, by the way it works fine when I call process.env.MYVAR jn the <script> section of my *.vue file, but it doesn’t work when I call it in my src/app/local.js file where I’d like to put some functions that I’ll call in a <script> of *.vue file. Any ideas how to handle it??

aeiosapp

@aeiosapp said in [V1] A guide for @quasar/dotenv:

Nice solution, by the way it works fine when I call process.env.MYVAR jn the <script> section of my *.vue file, but it doesn’t work when I call it in my src/app/local.js file where I’d like to put some functions that I’ll call in a <script> of *.vue file. Any ideas how to handle it??

Found solution for my question. Just had to add this code in my src/app/local.js file:

const DotEnv = require('dotenv')

if(parsedEnv = DotEnv.config().parsed) {
  for (let key in parsedEnv) {
    process.env[key] = parsedEnv[key]
  }
}

Christal

How do you build a copy based on .env.staging

ArkIv

@aeiosapp
quasar.conf.json

build:{
   env: {...require("./config_env")}
  ... or
   env: {
        version: require("./package.json").version,
        ...require("./config_env")
      },
 ... or
  env: {...require("./config_env"), 
        ...require("./config_env-2"}

./config_env.js

module.exports={
 title: "no dotenv"
}

baramofme

@ArkIv That’s good.

dotenv not working my quasar. so I mixed your method + qenv.

.quasar.env.json

{
  "development": {
    "ENV_TYPE": "Running Development",
    "ENV_DEV": "Development",
    "API_URL": "https://dev.some.com"
  },
  "production": {
    "ENV_TYPE": "Running Production",
    "ENV_PROD": "Production",
    "API_URL": "https://some.com"
  },
  "test": {
    "ENV_TYPE": "Running Test",
    "ENV_Test": "Test"
  },
  "stage": {
    "ENV_TYPE": "Running Stage",
    "ENV_STAGE": "Stage",
    "API_URL": "https://stg.some.com"
  }
}

quasar.conf.json

const configEnv = require('./.quasar.env.json')

module.exports = configure(function (ctx) {
  return {
    ......
          env: {
             // for settting proxy address with ctx.dev, ctx.prod
             IS_STAGE: false,
          },
    },

    devServer: {
      proxy: {
        // proxy all requests starting with /api to specific url
        '/api': {
          target: ctx.prod ? configEnv["production"].API_URL
          : process.env.IS_STAGE ? configEnv["stage"].API_URL
              : configEnv["development"].API_URL,
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        },

No More Posting New Topics!

[V1] A guide for @quasar/dotenv