Dopper + direnv == "<3"

I'm using React to build 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. 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
• direnv

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.

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. 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

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

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

There is much more to explore so head over to Doppler and try it out.

direnv

The link from the Doppler config and React is still missing and I'm using direnv 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:

dotenv
export Hi="dev.to"

Shell output when entering the directory / applying direnv allow .:

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:

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:

dotenv # only read the .env file

./.env:

DOPPLER_TOKEN="dp.pt.***"

IaC/.envrc:

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?