How to add .env and use process.env to your typescript project

#typescript #env #processenv #environmentvariables

I recently came across this problem in my project and the usual google search/Stackoverflow readings lead to partial and confusing solutions.
So i’m going to document my solution, hopefully someone finds it useful.

First install dotenv package

npm install dotenv;
 OR 
yarn add dotenv;

Import to the entry point of your code. This is usually your index.ts, main.ts or app.ts

import * as dotenv from 'dotenv';

//inside your starter code, do this
...
...
dotenv.config();
...

Now you are ready to use, process.env.ENVIRONMENT_VARIABLE with your project.

However, i will recommend creating a config module to put all your environment variables access. This approach has a lot of benefits such as:

ease of code refactoring: a single place to update, change any environment variable key or default value. This is better than doing All-files-search of a variable name.
ease of testing: you can mock or intercept this.
Clean code: this approach is modular and less typing.

Your config module could look like this. endpoints.config.ts

export default {
 UserBaseUrl: process.env.USER_SERVICE_URL ?? '',
 EtlUrl: process.env.ETL_SERVICE_URL ?? ''
}

Now in your code, you can do something like this

import endpoint from '../endpoints.config';
... 
...
const user = await axios.get(endpoint.UserBaseUrl, { params})
...

That’s it!. Feel free to leave a comment if i missed anything or you are having issues with this.
Thanks

Discussion (6)

mick62 • Jan 26

When the app starts up it's crucial to first check whether all config parameters got a value (explicitly from an environment variables or via a default value).
This "fail early" behavior is important e.g. for apps deployed via kubernetes. If there is a problem the app (container/pod) should signal en error to kubernetes on start-up. So the attempt to deploy a new version fails and will be rolled back to the previous version.
Your example code would try to send a request to an empty url getting an inherited error w/o the chance to handle the root cause automatically.

rongem • Jul 12 '20

Good idea, but doesn't work for me. Fields always stay empty. Making fields to functions workd though.

Frank Font • Apr 26 '20

Thanks for sharing! Last year I was looking for something like this and it would have helped!

Ruben Paredes • Apr 9

For the people still with problems configuring dotenv, in its official repository is a guide just for typescript:
github.com/motdotla/dotenv/tree/ma...