Environment variables



  • Hi folks, I have a question that’s bugging me.
    Since the 0.15 release everything revolves around the cli.
    For example the template files in the cli’s templates folder and namely the entry.js.
    But I noticed that in the lib folder and quasar-config.js file the process.env gets overwritten as such:

        cfg.build.env = {
          'process.env': cfg.build.env
        }
    

    webpack-config.js reads:

          new webpack.DefinePlugin(cfg.build.env),
    

    The result is very quasar-tailored env.

    APP_URL:"http://localhost:8080/"
    DEV:true
    MODE:"spa"
    NODE_ENV:"development"
    PROD:false
    THEME:"mat"
    VUE_ROUTER_BASE:"/"
    VUE_ROUTER_MODE:"history"
    

    I tried fiddling with it, but I messed it up. 🙂 I’m missing some knowledge on the subject, I know.
    Is there any way to access the real node environment variables since webpack config is now out of the question?
    Thanks in advance!



  • You define your env in quasar.conf.js like this:
    BASE_URL: JSON.stringify(process.env.BASE_URL')
    in your code you access them like this:
    process.env.BASE_URL

    Then for example your run BASE_URL=api.example.com quasar build to build your app with the desired value



  • I just couldn’t figure out why my cli environment variables where being ignored. I see now some info in the guide http://quasar-framework.org/guide/app-quasar.conf.js.html#Example-setting-env-for-dev-build.

    I’m still confused about the ctx.dev ? part. Don’t I just need props as a hash of env:?
    Can you show the above in dev and build sections of quasar.config.js?
    env: ctx.dev ? { API: JSON.stringify('https://dev.'+ process.env.MY_API) } ???

    is this ok?

    env: {
    ENV1: JSON.stringify(process.env.ENV1),
    ENV2: JSON.stringify(process.env.ENV2),
    ENV3: JSON.stringify(process.env.ENV3)
    }
    

    Do you have to do this in both the dev and build sections if you want access to the same env variable doing either?



  • ok I think I get it. ctx.dev is true for quasar dev so this was my build:env

          env: ctx.dev
            ? { // so on dev we'll have
              WSS: JSON.stringify(process.env.WSS)
            }
            : { // and on build (production):
              WSS: JSON.stringify(process.env.WSS)
            },
    


  • So guys, how good do you think is the env object in quasar.conf.js for storing secrets for example?
    For Node I’m using dotenv, but it’s no use here because of webpack, plus the dotenv-webpack plugin is also useless in such setup because of the define plugin.

    Should I resort to environment variables from the machine and pass them in env?
    Or use extendWebpack option in quasar.conf.js maybe?



  • Whatever you do, don’t store secrets in quasar.conf.js!

    Does this help? https://medium.com/carbono/using-env-file-in-quasar-apps-72b56909302f

    Scott



  • Hi Scott,

    I won’t store them there of course, I was using .env for other projects and I just wanted to have some consistency. ☺

    Thanks for the article, that really helps with the extendWebpack approach!
    Dan