Env Vars

Back End Project

Auto Inject Env Vars

1. We should install dotenvx
2. Then for the NPM script command we need to call dotenvx + a TS Command:

Development Experience

For a development environment we can use ts-node-dev (with alias path convertion: 'ts-config-paths')

Default .env file

By default, a .env will be automatically used.

• "dotenvx run --" (for The env injetcion)
• "ts-node-dev" (for TS transpile)
• "tsconfig-paths/register ./src/index.ts" (for Alias Path Conversion)

1  dev-demo": "dotenvx run -- ts-node-dev -r tsconfig-paths/register ./src/index.ts

Local .env files

In some moments we want to temporary use a local env var

1  dev-demo": "dotenvx run --env-file=.env.demo.local -- ts-node-dev -r tsconfig-paths/register ./src/index.ts

ps. The .env is auto inject, we don't need to explict it --env-file=.env

Front End Project

Using Vite

Default .env file

By default, a .env will be automatically used.

Local .env files

We use the "mode" prop and create a .env.[mode].local to also load an extra .env file

1  dev-demo": "dotenvx run --env-file=.env.demo.local -- ts-node-dev -r tsconfig-paths/register ./src/index.ts

File Tree

| .env | .env.demo.local

If we set a NAME="mario" in .env and NAME="luigi" in .env.demo.local, the final value will be "luigi"