Single .env file for frontend and backend apps

Recently, I was developing a backend API server in Django and frontend in React.js. Instead of having different Git repos for both application, I went for a Monorepo. The FE app was in a subdirectory within the repo.

One advantage of having a single repo is that it allows one to share a single .env file between the FE and BE apps. FE would need the URL of the server to call the APIs and BE would need the FE URL to configure its CORS configuration. Having them in a single .env file, makes deployment less error prone.

The .env file

FE and BE development frameworks can be configured by environment variables. This is a great way to pass different configurations to the apps, instead of hard-coding them. Docker also supports setting environment variables, through a “.env” file, which are read by the FE and BE apps.

A typical .env file would look something like the one below. It has some configuration that are specific to FE and BE apps and some that are common to both. The file would most probably contain other variables too.

Passing .env file to docker

One can configure .env via docker-compose.yml. A typical section for FE app would look something like below.

The important parameter is env_file. All the variables defined in the .env file would be set when the docker container starts. You can also pass .env file in command line while running docker command, like:

docker compose --env-file .env.dev up

Reading .env in React.js App

All the environment variables that start with “REACT_APP” keyword is available through “process.env” variable with Node.js app.

Using the variable directly within the app is an eye-sore. In order to make it more JS-friendly, I did the following:

Thus instead of using something like process.env.REACT_APP_API_SERVER, I can use config.apiServer.

Reading .env file in Django App

In order to ready the same .env file in Django app, one can use “python-decouple” package.

pip install python-decouple

In settings.py, we can do the following

from decouple import config

SITE_URL = config("REACT_APP_API_SERVER")
CORS_ALLOWED_ORIGINS = [ config("REACT_APP_SERVER_URL"), ]

Conclusion

Using single .env file making our configuration more DRY, which is one of the accepted software development principles.