On the eleventh day of Enhancing: Environment Variables
Tags: enhance, webdev, webcomponents
Published: 2023-01-05 14:42:19

---
title: On the eleventh day of Enhancing: Environment Variables
published: true
description: Setting environment variables to enable different behaviors in production.
tags: enhance, webdev, webcomponents
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pjcigpiqzod39noorw4.jpg
canonical_url: https://blog.begin.com/posts/2023-01-05-on-the-eleventh-day-of-enhancing
series: 12 Days of Enhancing
---

Environment variables are key-value pairs that enable you to change the behavior of our application depending on the environment. Begin supports environment variables while doing local development and any of the deployed environments.

## Local environment variables

Let’s test our environment variables locally before we deploy the code that uses them to a staging or production environment. The quickest way to include an environment variable locally is to create a `.env` file at the root of your project. Let’s add a `DEBUGGING` environment variable to this file.

```
DEBUGGING=on
```

Now let’s use it in some code. Open `app/elements/my-footer.mjs` and update the code, so it looks like this:

```javascript
export default function Element ({ html, state }) {
 const showDebugInfo = process.env.DEBUGGING === 'on'
 return html`
<footer>
 ${ showDebugInfo ? `<pre>${JSON.stringify(state, null, 2)}</pre>` : ''}
</footer>`
}
```


We are reading the value of `DEBUGGING` from `process.env`. If the value is `on` we’ll show the debugging information. Otherwise, we’ll skip it. Open up [http://localhost:3333/about](http://localhost:3333/about) and you should see:

![debugging on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/offhordieki0j2wkhzqo.png)

Now, updated the `.env` file so `DEBUGGING` is off.

```
DEBUGGING=off
```

The [http://localhost:3333/about](http://localhost:3333/about) will automatically refresh and the debugging info is gone!

![debugging off](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4anntu9wuvhvdyi5hafq.png)

## Remote environment variables

You can set up different environment variables for each of your deployed environments (see yesterday for instructions on creating environments). For our example, we are going to assume you have `staging` and `production` environments.

Let’s set our `DEBUGGING` environment variable to `on` for `staging` but `off` for `production`. In order to do that, execute the following commands:

```bash
begin env create --env staging --name DEBUGGING --value on
begin deploy --env staging
begin env create --env production --name DEBUGGING --value off
begin deploy --env production
```

Now if you go to your `staging` URL you will see the debugging information:

![debugging on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/offhordieki0j2wkhzqo.png)

But, if you got to your `production` URL you will not see the debugging information.

![debugging off](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4anntu9wuvhvdyi5hafq.png)

## Next Steps

Speaking of debugging, how do we get the logs once we deploy to the cloud? Tune in tomorrow to find out.