Set environment variable for build in Netlify

by

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.

More Related Contents:

  1. CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side
  2. How can I use ES6 in webpack.config.js?
  3. TypeError: MiniCssExtractPlugin is not a constructor
  4. How to inline CSS in the head tag of a NextJS project?
  5. Cannot find module ‘webpack/bin/config-yargs’
  6. Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical
  7. How to use a library from a CDN in a Webpack project in production
  8. Is it possible to create custom resolver in webpack?
  9. Module not found: Error: Can’t resolve ‘util’ in webpack
  10. Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED [duplicate]
  11. How to include css files in Vue 2
  12. What is `require.context`?
  13. How to use variable substitution in Frontend js applications like backend applications?
  14. What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of “100KB”” mean?
  15. Multiple html files using webpack
  16. Getting “Error: `output.path` needs to be an absolute path or `/`”
  17. using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined
  18. Rules vs Loaders in Webpack – What’s the Difference?
  19. How “include” and “exclude” works in webpack loader
  20. Webpack – background images not loading
  21. Inline JavaScript and CSS with webpack
  22. How to Polyfill node core modules in webpack 5
  23. jQuery is not defined in bootstrap-sass
  24. where is create-react-app webpack config and files?
  25. I am getting an “Invalid Host header” message when connecting to webpack-dev-server remotely
  26. Path aliases for imports in WebStorm
  27. Caching effect on CORS: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  28. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  29. How to dynamically import SVG and render it inline
  30. Install vue 3.0 in laravel

Leave a Comment