Styjun

I'm trying to set an environment variable for an API key that I don't want in my code. My source javascript looks something like this :

.get(`http://api-url-and-parameters&api-key=$process.env.API_KEY`)

I'm using webpack and the package dotenv-webpack https://www.npmjs.com/package/dotenv-webpack to set API_KEY in a gitignored .env file and it's all running fine on my local. I'd like to also be able to set that variable when deploying through Netlify, I've tried adding it through to GUI to the 'build environment variables', and also to set it directly in the build command, but without success.

Any idea what might be the issue ?

WARNING: If this is a secret key, you will not want to expose this environment variable value in any bundle that gets returned to the client. It should only be used by your build scripts to be used to create your content during build.

Issue

dotenv-webpack expects there to be a .env file to load in your variables during the webpack build of your bundle. When the repository is checked out by Netlify, the .env does not exist because for good reason it is in .gitignore.

Solution

Store your API_KEY in the Netlify build environment variables and build the .env using a script prior to running the build command.

scripts/create-env.js

const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=$process.env.API_KEYn`)

Run the script as part of your build

node ./scripts/create-env.js && <your_existing_webpack_build_command>

Caveats & Recommendations

• 
  Do not use this method with a public facing repository [open] because any PR or branch deploy could create a simple script into your code to expose the API_KEY


• The example script above is for simplicity so, make any script you use be able to error out with a code other than 0 so if the script fails the deploy will fail.

You can set Dotenv-webpack to load system environment variables as well as those you have declared in your .env file by doing the following:

 plugins: [
 new Dotenv(
 systemvars: true
 )
 ]

I.e Setting the systemvars attribute of your webpack dotenv plugin to true.

Note that system environment variables with the same name will overwrite those defined in your .env file.

Source: https://www.npmjs.com/package/dotenv-webpack#properties

if you go to corresponding site's settings in Netlify, under build&deploy you can find a section called environment variables you can easily add your environment variables from there. if you add MY_API_KEY variable to environment variables you will be able to access it inside your project via process.env.MY_API_KEY.

If you're using Nuxt JS there is a more "straight forward" approach.

Just edit the nuxt.config.js like so:

module.exports = {
 env: 
 GOOGLE_API_KEY: process.env.GOOGLE_API_KEY

 ,
 // ...

Then add the GOOGLE_API_KEY to Netlify through the build environment variables as usual.

Credit goes to yann-linn and his answer on github.