Set environment variable for build in Netlify

Question

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 ?

just to be clear - you are running that JS at build time with webpack, not intending it to do something at browse-time, right? — fool, Jan 26 '18 at 15:14
Yes I should have clarified but as the title suggests this is only called at build time and not exposed anywhere at run time. — Maëlig, Apr 05 '19 at 06:59

score 27 · Accepted Answer · answered Jan 26 '18 at 17:38

27

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_KEY}\n`)

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.

answered Jan 26 '18 at 17:38

talves

13,993
5
40
63

3

this is a great answer, totally endorsed by the team at Netlify support! That "Build Environment Variables" section is on your Build & Deploy settings page - second "card" down – fool Jan 27 '18 at 01:31
Thanks, that worked like a charm. I was halfway there but didn't realise you could create files on the fly using Netlify. – Maëlig Jan 29 '18 at 18:48
2

I found this solution after a lot of Googling and it works for me but it's weird there's no official documentation for this on Netlify @fool – Dan Dec 13 '18 at 14:02
1

[@DanChristian](https://stackoverflow.com/users/851669/dan-christian) Probably, the reason you don't see this in official docs is this would not fit a general solution rule for environment variables, because there are many build solutions supported by Netlify. My solution really just solves IF your project **requires** a `.env` setup, but does help if you want to use it as an alternative. Environment variables are typically accessible at build time. – talves Dec 13 '18 at 17:44
@JBalin the OP is not using the keys in his front end code from what he says.The OP even states it in the comments when asked. **Only** during his build process. I agree with you that he should not be using thees keys in client code. – talves Apr 05 '19 at 13:54
Is it possible that someone reads "Environment Variables" in Netlify? Is it safe to use? – John Valdetine Nov 06 '19 at 16:45
what if i have more than 1 env variable – Naveen Kashyap Dec 03 '19 at 09:54

score 20 · Answer 2 · answered Jun 02 '18 at 12:06

20

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

answered Jun 02 '18 at 12:06

Riky_Tree

561
6
7

1

I am wondering why this is not an accepted answer. I find it very clean for CI purposes – kasongoyo Dec 03 '19 at 05:22
1

This 100% should be the accepted answer, worked like a charm! – Alicia C Feb 24 '20 at 23:41

score 7 · Answer 3 · answered Apr 20 '19 at 17:58

7

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.

answered Apr 20 '19 at 17:58

Sankha Karunasekara

1,636
18
19

if i want to have the same key env variable, but with different value per environment (dev, stage, prod enviroments) ?? – menepet Sep 17 '20 at 14:44
Then the built should be different for each of the environments you mentioned. You should probably have separate git branches for different environments and have different netlify builts for every environment. – Sankha Karunasekara Nov 14 '21 at 16:14

score 4 · Answer 4 · answered Mar 13 '19 at 10:40

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.

Jakub Siwiec · Answer 5 · 2020-09-16T21:04:08.917

What you can also do is also to define a global constant in Webpack. Netlify environment variables defined in UI will work with it. You don't need dotenv or dotenv-webpack.

webpack.config.js

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.API_KEY": JSON.stringify(process.env.API_KEY)
    }),
  ]
}

However again, of course you shouldn't do it just inputting enviornmental variables in the frontend if your API key is confidential and project public. The API key will appear in the source code of the website and will be easily accessible for everyone visiting it. Lambda function would be a better option.

score 0 · Answer 6 · answered Sep 26 '20 at 10:07

You can use the Netlify's config file also ... You can find documentation here. Also i wanted to have the same ENV variables with with different values per branch/environment. This workaround worked for me:

Create a netlify.toml file like:

[build]
  NUXT_ENV_BASE_API = "/api"
  NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr"

[context.branch-deploy]
  environment = { NUXT_ENV_BASE_API = "/dev-api", NUXT_ENV_HOST_DOMAIN = "https://dev.your-domain.gr" }

[context.production]
  environment = { NUXT_ENV_BASE_API = "/api", NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr" }

And deploy in Netlify ...

Set environment variable for build in Netlify

6 Answers6

Issue

Solution

Caveats & Recommendations

Linked

Related