---
title: "Access Local Environment Variables using Webpack | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2016/10/04/access-local-environment-variables-using-webpack/"
last_updated: "2026-07-11T11:25:45.000Z"
---
Building a Frontend JavaScript application in any framework will most like have you using a modern build tool like Gulp or [Webpack](https://webpack.github.io/).

Netlify allows you to add [environment variables](https://docs.netlify.com/configure-builds/overview/) to your build so you can define the way your site is built. In addition to the variables you choose to define, Netlify has a number of pre-defined variables saved in our own UI:

![script example](/v3/img/blog/env_variables.png)

The only downside to this UI only approach is that you are unable to access those variables in your local development environment.

At Netlify we built our application and site dashboard using [React](/blog/2016/07/26/our-conversion-from-angular-to-react/) as our frontend framework and Webpack as our build tool.

Webpack has a useful plugin called the [DefinePlugin](https://webpack.github.io/docs/list-of-plugins.html#defineplugin) and grants the use the ability to storing sensitive information, like secret keys in the Webpack build server.

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be very useful for allowing different behaviour between development builds and production builds. For example, you might use a global constant to determine whether logging takes place; perhaps you perform logging in your development build but not in the production build.

To access these variables for our local environment, we store them in the `[environment_name].config.js` which is simple a JavaScript Object.

```
module.exports = {  apiId: "...",  apiBase: "...",,  braintreeMerchantId: "...",  braintreeKey: "...",};
```

We then load these environment file using Webpack

```
new webpack.DefinePlugin({  // Dynamically access local environment variables based on the environment  ENV: JSON.stringify(require(path.join(__dirname, "src", "config", env))),  "process.env": {    // defaults the environment to development if not specified    "NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")  }})
```

We are now able to test our site locally using different variables based on the environment config files, i.e. **development.config.js** or **production.config.js**.

I should note the ability to bypass the need for the Webpack config by passing variables directly through the `npm start` command:

```
npm start NODE_ENV=development
```

We also set the **NODE\_ENV** in our production uild script as well.

```
 "scripts": {    ...    "build:prod": "NODE_ENV=production webpack -p --config webpack.config.js",  },
```

This post provides a brief intro into one plugin Webpack has to offer, to find out more about Webpack, check out their documentation or the egghead.io [Webpack intro](https://egghead.io/lessons/javascript-intro-to-webpack).

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Access Local Environment Variables using Webpack&url=https://www.netlify.com/blog/2016/10/04/access-local-environment-variables-using-webpack//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2016%2F10%2F04%2Faccess-local-environment-variables-using-webpack%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2016/10/04/access-local-environment-variables-using-webpack//)
-   [Bluesky](https://bsky.app/intent/compose?text=Access Local Environment Variables using Webpack+https://www.netlify.com/blog/2016/10/04/access-local-environment-variables-using-webpack//)

* * *

### Tags

-   [React](/blog/tags/react/)
-   [Jamstack](/blog/tags/jamstack/)

## Keep reading

![](/_astro/bbe3cfe0b5d5228f5d0a66e26ce057de315c7712-1200x675_ZQfk21.webp)

Tools & Services December 3, 2025

[

### Vibe coding to production with Kiro powers

](/blog/vibe-coding-production-kiro-powers)

-   ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp)
    
    Gehrig Kunz
    

![](/_astro/b596a7453ede5fe6739bd12506636fe522828198-2400x1351_1ANtEG.webp)

Tools & Services February 21, 2025

[

### Secure local development with Codezero for Netlify

](/blog/secure-local-development-codezero)

-   Kathleen Randall
    

## Recent posts

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

News & Announcements June 24, 2026

[

### How we measure Netlify’s Agent Experience

](/blog/how-we-measure-netlify-agent-experience)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)