Reading environment variables from server (not .env file) when using @quasar/quasar-app-extension-dotenv

Question

I’m using @quasar/quasar-app-extension-dotenv for loading environment variables during the development from .env file on my localhost.

In the production I’m hosting the project on Netlify and when I set the environment variables in the Netlify dashboard it is undefined during the program run.

My quasar.extensions.json looks like this:

{
  "@quasar/dotenv": {
    "env_development": ".env",
    "env_production": ".env",
    "common_root_object": "none",
    "create_env_files": false,
    "add_env_to_gitignore": false       
  }
}

Any ideas how to load variables from server variables?

Thanks

Answer 1

I had the same issue. I found a solution to this, it's not the best but working.

I also used the @quasar/quasar-app-extension-dotenv extension to read the local environment variables from a file. I added this file to gitignore.

After this I wrote a little script which creates a text file with the same name as my local file. It looks like this (I used create-file package to do this):

var createFile = require('create-file')
let contentToWrite = process.argv[2]

createFile('NameOfLocalFile', contentToWrite, function (err) {
    if (err) console.log(err)
    else console.log('succesfully wrote file')
})

With this script you can pass the environment variable as a parameter. On netlify I added a build command like this:

(npm run-script writeEnvFile API_KEY=******) && (quasar build || { sleep 120; false; })

So all in all the env file keeps out of github but we pass it's data via the build command. In my case I just need the firebase key to get all my other keys from firebase. So if you need more keys, you have to extend the script a little bit. I know this is a messy solution, but it was the only one I found for this issue.