> For the complete documentation index, see [llms.txt](https://coldbox-elixir.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coldbox-elixir.ortusbooks.com/environment-variables.md).

# Environment Variables

You will occassionally need to access environment variables in your JavaScript.  This is done using the `process.env` object like so: `process.env.YOUR_KEY_HERE`. But your user's browser won't have access to a `process` object.  How will we handle this?

### Webpack's EnvironmentPlugin

Webpack uses the [`EnvironmentPlugin`](https://webpack.js.org/plugins/environment-plugin/) to do this.  It takes an array of environment variable names to allow in your application.  Then all instances of `process.env.YOUR_KEY_HERE` will be replaced with the value in your environment. 

{% code title="Environment" %}

```bash
NODE_ENV=development
```

{% endcode %}

{% code title="webpack.config.js" %}

```javascript
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.EnvironmentPlugin(["NODE_ENV"]),
  ]
};
```

{% endcode %}

{% code title="Source File" %}

```javascript
console.log(process.env.NODE_ENV);
```

{% endcode %}

{% code title="Output File" %}

```javascript
console.log("development");
```

{% endcode %}

If the environment variable allowed is missing, an error will be thrown during compilation, ensuring that you don't accidentally ship code without this value.

In addition to passing an array of key names, you may pass an object with the keys being environment variable names and the values being default values if the keys are not found in the environment.

{% code title="webpack.config.js" %}

```javascript
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.EnvironmentPlugin({
      NODE_ENV: "development"
    }),
  ]
};
```

{% endcode %}

### mix.env

To make this process easier, Elixir has a `mix.env` method that passes through to `EnvironmentPlugin`.

{% code title="webpack.config.js" %}

```javascript
const elixir = require("coldbox-elixir");

module.exports = elixir(mix => {
  mix.env(["NODE_ENV"]);  
});
```

{% endcode %}

This is the easiest way to define the environment variables your JavaScript bundle needs.

### Automatic NODE\_ENV

`NODE_ENV` is a very common environment variable used by many libraries to output additional debugging information or to enable optimizations.  Since Elixir already knows what environment you are building for, this value is defaulted for you.  If you desire to override that value, just define `NODE_ENV` in your environment and it will take precendence.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://coldbox-elixir.ortusbooks.com/environment-variables.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.