Some days ago I had to initialise a newAngular app for a side project of mine. The use case would be fairly simple, and I needed some basic features like user authentication and some entities to store on a backend.

In such casesSupabase is a great open-source alternative to setting up a custom backend, and integrating it into an Angular app is fairly simple, given the existing supabase dependencies like@supabase/supabase-js. The only prerequisite to make it work isinitialising a supabase project andgenerating an API key.

However, I found out that managing environment variables in an Angular project is not really straight forward. Once we generate a project via the Angular CLI, we get theenvironment.ts andenvironment.prod.ts files, but these cannot be used for declaring such API keys, especially if we want to push our codebase to a github repository.

After some research I did, I discovered@ngx-env/builder which, as it seems, provides us with a clean and secure way to store our environment variables.

You can find a sample project showcasing how it works here:

NG_APP_PUBLIC_SUPABASE_URL=https://test.supabase.coNG_APP_PUBLIC_SUPABASE_ANON_KEY=keykeykeyvaluevalue

Getting started

Once we are at our Angular project root directory we can simply runng add @ngx-env/builder to get started. This command will install the necessary dependency, adjust the application builders accordingly and generate the environment types withinenv.d.ts.

Once this is complete we can extend the generatedenv.d.ts and its Env interface with our expected environment variables. For example:

declareinterfaceEnv{readonlyNODE_ENV:string;// Replace the following with your own environment variables.readonlyNG_APP_ENV:string;readonlyNG_APP_PUBLIC_SUPABASE_URL:string;readonlyNG_APP_PUBLIC_SUPABASE_ANON_KEY:string;}

Please keep in mind that theNG_APP_ prefixis mandatory. In case you need to change it please consult the relateddocumentation.

Defining Environment Variables

Now we can use.env files on our local and production environments with the corresponding values. First we need to make sure that our.gitignore includes the.env file. Then we can create our local.env file as such:

NG_APP_PUBLIC_SUPABASE_URL=https://test.supabase.coNG_APP_PUBLIC_SUPABASE_ANON_KEY=keykeykeyvaluevalue

Since we included this file as part of our.gitignore, these values won't be pushed to our github repository.

Usage in components / templates

We can import the actual values of our environment variables in our components as such:

supabaseUrl=import.meta.env.NG_APP_PUBLIC_SUPABASE_URL;

Basically theimport.meta.env object will include all the environment variables we've defined.

Differentiate environments across serve and build tasks

We could possibly use the defaultNODE_ENV values to differentiate between e.g.development andproduction environments, however I prefer having my own app environment values which for this sample project, I've defined withinpackage.json.

Example:

"scripts":{"start:dev":"NG_APP_ENV=dev ng serve","start:staging":"NG_APP_ENV=staging ng serve","start:production":"NG_APP_ENV=production ng serve","build":"NG_APP_ENV=production ng build"}

By doing this we have aclear app environment separation, while we are also able to differentiate pieces of implementation depending on the app environment, e.g. if we want to show a teaser component only on production or staging.

Deployment / usage in production

Once our local setup is complete, we can overwrite the values of our environment variables, just by defining them on the staging/production system environment (e.g.export NG_APP_PUBLIC_SUPABASE_URL="environment.specific.url"), or by creating an.env file in there, including all the enviroment specific values (e.g. staging values on the testsystem, production values on the live server).

Conclusion

Managing API keys and secret values that should be handled as environment variables is an essential part of any frontend application that should be production ready. The@ngx-env/builder package provides us with an elegant and straightforward way to do so, when it comes to Angular apps. Enjoy!