Dopper + direnv == "<3"
Tags: webdev, productivity, tutorial, watercooler
Published: 2022-08-17 06:18:00

I'm using React to build [cl3rk.io](https://cl3rk.io). The SPA needs some configuration like OAuth Client ID, Auth0 Domain,  and backend URL. I try not to commit any configuration in the git repo so I have two options:
* create a .env file on every machine I'm working on
* outsource the configuration to a configuration provider

There are plenty of configuration providers out there like [Azure App Configuration](https://azure.microsoft.com/en-us/services/app-configuration). A few months ago I found Doppler, which by definition is not a configuration manager BUT a secret store with some neat features. In this post, I'm showing you how I use doppler with direnv.

Requirements:
* This will only work on Linux/Mac OS
* [Doppler shell](https://docs.doppler.com/docs/install-cli)
* [direnv](https://direnv.net)

## Doppler

Doppler has a generous free offering (5 users for free!🎉) - that's very important for me as I'm using doppler for cl3rk which is not yet making any money as well as personal projects.

![The Doppler dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fy2p9i73nb8siayt4ew.png)

Noticeable in the top left I'm in the cl3rk workspace. Each user can have multiple workspaces. I have a workspace for each product or prototype I'm working on.

Each Workspace has multiple projects. I use projects in two ways:
* Make configuration available to other projects via [secrets referencing](https://www.doppler.com/changes/secrets-referencing). In the screenshot, the `azure` project is an example of this. It holds the credentials to talk to azure.
* Per logical unit of the project: frontend and potentially backend / API



![Doppler stages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwsisq1zbx2k2imakco3.png)

In each project, there are stages to represent different instances of the configuration for different deployments.


![Doppler secrets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzte1m4grd48m75ogkgn.png)

Each of the stages contains its own set of secrets and configurations.

There is much more to explore so head over to [Doppler](https://www.doppler.com) and try it out.

## direnv

The link from the Doppler config and React is still missing and I'm using [direnv](https://direnv.net) to do that.


With direnv you can place an instruction file (`.envrc`) in each folder and as soon as the terminal enters the folder the `.envrc` is executed. This is helpful to set additional env variables or to add executables to the path.

example `.envrc` to read the .env file and adds its content to the environment variables:
```bash
dotenv
export Hi="dev.to"
```
Shell output when entering the directory / applying `direnv allow .`:
```bash
direnv: loading ~/projects/cl3rk/.envrc                                                        
direnv: export +DOPPLER_TOKEN +Hi
~/projects/cl3rk main* ❯ 
```
Two vars are being set `DOPPLER_TOKEN` comes from the .env file and `Hi` from the .envrc

Whenever we leave the folder all added variables are removed again:
```bash
direnv: unloading
```

Here is a real world example:
```
.
│   .envrc
│   .env                 # contains the doppler access token    
│   ...
└───IaC                  # contains all code for Infrastructure as Code
│   │   .envrc           # updated .envrc file to point to the correct Doppler project (infrastructure) and stage (dev by default)
│   │   main.tf
└───Web_Frontend
    │   .envrc           # updated .envrc file to point to the correct Doppler project (backend) and stage (dev by default
    │   package.js
```

`./.envrc`:
```bash
dotenv # only read the .env file
```

`./.env`:
```bash
DOPPLER_TOKEN="dp.pt.***"
```

`IaC/.envrc`:
```bash
source_up                               # also scan top-level folders for .envrc files and run them as well
export DOPPLER_PROJECT=infrastructure   # use the infrastructure project
export DOPPLER_CONFIG=dev               # and the dev stage
# download all the secrets to your shell and remove them
export $(doppler secrets download --no-file --format env-no-quotes)

```

Whenever you lose your notebook just regenerate your Doppler token and no secret is left behind on your pc. On top of that you can share the configuration easily with colleagues without copying the .env file. As soon as you enter one of the directories the .envrc code gets executed and Doppler injects secrets as environment variables which you can use in your projects. Pretty neat. What do you think?