Vercel, Github Action, Netlify, AWS Amplify, CI/CD, Builds, Angular (2024)

Let's face it, we all have secrets, but that's not what I want to talk about.

This article shows you a technique to easily use Angular's environment.ts file to access sensitive data without revealing your secrets.

What is a secret?

Secret refers to any sensitive values that are not supposed to be pushed as part of the source code. This can be things like API keys, OAuth tokens, certificates and passwords.

These secrets are often required to integrate with other providers or services as part of the build or deployments.

Secrets can be different based on deployment environments as well.

For example, you might use a test account for development with a different API key to your production.

Why should you care about secrets?

Many projects utilise cloud-based Git and CI/CD tools to manage the source code, build and deploy.So keeping secrets from leaking into your source code is essential.

You typically deal with two types of secrets in client-side projects.

1. Secrets that your client-side app needs to use when talking to a provider.

These secrets are still visible in the JS bundle or API calls.These are secrets like your Google API key that needs to be sent in an HTTP request to Google, for example.

For these types of secret usually, you need accompanying security measures. For example, Google lets you limit an API key to a domain or limit it to specific Google services.

Even for this type, it is a good practice not to hardcode in the source.hardcoding them makes the secret management based on the environment difficult.

Let's say you have a Test and Production environment which use different Google API keys.

If secret is part of the source code you need to remember to change the code each time you want to change it from Test API key to Production one.

In the same way, updating your secret to rotate it can be more challenging.

Now let's add the fact that source code will spread across branches and devices.

I guess you get the picture. This is important and for that reason there are best practices and tools to help you.

For example, Google has "Best practices for securely using API keys."Which suggest not to store API keys in source code.

Or Github will send you a warning email if you push your Google API key.They have this Automatic secret scanning going on.

2. Secrets that are just required as part of the build but not after that.

For example, if my build process can query my content repository(headless CMS) to pre-render some pages to generate static pages.

In that case, I do not need the content repository's API key after the build is done. I will only take the results (static pages) to deploy them.So I can genuinely secure my key by not putting in the source code.

If you are not convinced, read Why secrets in git are such a problem - Secrets in source code.

Utilise Angular environment.ts file to access secrets

The Angular official way to manage the environment configurations is to use the provided environment.ts file.

You can create a file for each environment.

└──myProject/src/environments/ └──environment.ts └── └──environment.stage.ts

and provide the configs of each environment like this

export const environment = { production: true, apiUrl: 'http://my-prod-url'};

You can easily access this configuration in your code.

 import { environment } from '../environments/environment'; public getBooks() { const url = `${environment.apiUrl}/books`; return this.http.get<Book>(url); }

To get environment specific configs, you can use the env name in the build.

ng build --configuration=stage or use angular.json to define the same thing based on the environment.

"serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project-name:build" }, "configurations": { "production": { "browserTarget": "your-project-name:build:production" }, "staging": { "browserTarget": "your-project-name:build:staging" } }},

These configs are pushed to your source code to support the build. So anyone who has access to source code can see these configs in plain text.

This technique is completely fine for typical configs like the apiUrl but not good enough for secrets.


We can provide secrets through the environemnt.ts files without pushing it to source code using the Environment variable.

An environment variable is a dynamic-named value that can affect how running processes will behave on a computer. They are part of the environment in which a process runs. For example, a running process can query the value of the TEMP environment variable to discover a suitable location to store temporary files, or the HOME or USERPROFILE variable to find the directory structure owned by the user running the process.

These Environment variables are set up on the build machine which your Angular build runs.

There are different ways to set up Environment variables, which can differ based on the context.

We don't want to set up these variables manually, so we use a .env file.You can easily set multiple environment variables and values in one go.

Later you can use the .env file to read these variables based on the environment. The content of .env looks like this.


So the idea is that you load the .env file related to an environment (Test, Production) and somehow provide them to the Angular environment.ts file.

How is this approach more secure?

This approach is more secure because simply the .env file, which contains the sensitive values, only exists on your build machine (private server).

So only the person who has access to the build server can read the file. Sensitive values are no longer part of the source code.

What about the cloud-based CI/CD?

All the cloud-based CI/CDs already provide a way to define and manage Environment variables.

Once you set them up, the Environment variables will be available at runtime when the build is running, and we can access them the same way as if it's our server. Plus, the Environment variables will be secure since they are only available through the cloud-based CI/CD admin dashboard.

Here are some examples from some of the popular cloud-based CI/CDs.

VercelVercel, Github Action, Netlify, AWS Amplify, CI/CD, Builds, Angular (1)

Github ActionsVercel, Github Action, Netlify, AWS Amplify, CI/CD, Builds, Angular (2)

AWS AmplifyVercel, Github Action, Netlify, AWS Amplify, CI/CD, Builds, Angular (3)

How to access the Environment variable in Angular environment.ts files?

Angular build already utilises Node.js at runtime to do the build, and we can add an npm script to generate the environement.ts as part of the build.

This script will read the environment variables and generate the environement.ts file.This script is simply JavaScript, so write any logic you need to generate the output.

Here is the code for the script.

const setEnv = () => { const fs = require('fs'); const writeFile = fs.writeFile;// Configure Angular `environment.ts` file path const targetPath = './src/environments/environment.ts';// Load node modules const colors = require('colors'); const appVersion = require('../../package.json').version; require('dotenv').config({ path: 'src/environments/.env' });// `environment.ts` file structure const envConfigFile = `export const environment = { googleApiKey: '${process.env.GOOGLE_API_KEY}', auth0ClientId: '${process.env.AUTH0_CLIENT_ID}', appVersion: '${appVersion}', production: true,};`; console.log(colors.magenta('The file `environment.ts` will be written with the following content: \n')); writeFile(targetPath, envConfigFile, (err) => { if (err) { console.error(err); throw err; } else { console.log(colors.magenta(`Angular environment.ts file generated correctly at ${targetPath} \n`)); } });};setEnv();

Let's see what is happening here.

  • process.env provides access to the Environment variable in Node.js. So any variable that exists on the build machine will be available through it.
  • fs.writeFile let us create a file and write content to it. In this case, to generate the environment.ts file.
  • As a bonus, I am reading the package.json so I can get its version. This way, we can have a version number to display in our UI. This technique is convenient when for providing versioning as part of a release cycle.
  • targetPath is pointing to where the target file should exist.
  • envConfigFile constant is a template literal that provides the template and content of the environment.ts file. You can specify the variables you want to have in your environment.ts here.
  • console.log are there to make it easy to see the output of the file generation for debugging. Make sure not to log sensitive data here. Logs usually stay around long after the build is complete.
  • dotenv package can load a .env file so you can access the variable you have defined in that file.This trick helps manage a private build server or even building on your local development machine. The script won't fail if dotenv does not find the file in the specified location. So you can leave it there to support both local machine builds and cloud-based CI/CDs.

Automate it

To glue things together, we need to do two more things.

  • Firstly, we need to add an npm script that can run our newly added code.Here the new config npm script will run our code. We also update the npm script for build to run the config before build.
    {"name": "ionic-angular-cesium-3d-map","version": "0.0.1","author": "Ionic Framework","homepage": "","scripts": { "ng": "ng", "start": "ng serve", "build": "npm run config && ng build", "config": "ts-node src/environments/set-env.ts", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e"}}
  • Last but not least, we need to ignore the generated environment.ts file and the .env file from the source code.Update your .gitignore to include these files.

After following these steps, when you run the build or config npm scripts, it will generate an environment.ts and place it in the environment folder.File content will be like this.

export const environment = { googleApiKey: 'YOUR_ACTUAL_GOOGLE_API_KEY_FROM_ENV_VARIABLES', auth0ClientId: 'YOUR_ACTUAL_AUTH0_CLIENT_ID_FROM_ENV_VARIABLES', appVersion: '1.0.0', production: true,};

That's it. Now you access these environment configs in your Angular project.


We learned how we can integrate the operating level Environment variables with Angular environment.ts to get the best of both worlds and secure our secrets.

There are more ways to make keeping and sharing secrets more convenient for secrets that might need to be shared on different build machines. What we read in this article is just the first step.

Thanks for reading. As usual, if you have any questions, please leave me a comment here or DM me on Twitter.


if you need an example project that utilises this solution please refer to my ionic & Cesium 3D map example.

This project uses the same technique to hide the cesiumAccessToken which is used in the code from the source code.

This project builds on Vercel and uses the Vercel Environment variable to provide the cesiumAccessToken.

Here is the code repository: ionic-angular-cesium-3d-map


Twitter: _pazel

Vercel, Github Action, Netlify, AWS Amplify, CI/CD, Builds, Angular (2024)


How to secure Angular environment variables? ›

Angular Side
  1. Add environments to .gitignore.
  2. Ensure that you don't include any environment endpoints and secrets in any git commit.
  3. Change environment files with dynamic values instead of directly adding hardcoded secrets.
  4. Reference: Generating Automated Multiple Environment.ts in Angular using .env and Node JS.
Dec 28, 2023

How to sync Vercel with GitHub? ›

Deploying Your Vercel Application with GitHub Actions
  1. Create a new pull request to your GitHub repository.
  2. GitHub Actions will recognize the change and use the Vercel CLI to build your application.
  3. The Action uploads the build output to Vercel and creates a Preview Deployment.

What is Vercel GitHub? ›

​Vercel for GitHub automatically deploys your GitHub projects with Vercel, providing Preview Deployment URLs, and automatic Custom Domain updates. Vercel for GitHub automatically deploys your GitHub projects with Vercel, providing Preview Deployment URLs, and automatic Custom Domain updates.

How to deploy Angular in GitHub? ›

Deploy the angular app on GitHub

Create the gh-pages git branch. Next, check out from the main branch to gh-pages to transfer all code. Create the GitHub repository in your GitHub account. Push the gh-pages to the remote repository.

What is the difference between ng build and ng serve? ›

The ng build command writes generated build artifacts to the output folder (by default is -dist/). The ng serve command does not write build and it builds artifacts from memory instead for a faster development experience. This command builds your app and deploys it.

How to pass env variable to Angular? ›

Using . env to store environment variables in Angular.
  1. STEP 1: Modify your app.component.ts. ...
  2. STEP 2: Install @types/node. ...
  3. STEP 3: Modify your ...
  4. STEP 4: Install @angular-builders/custom-webpack and dotenv-webpack.
  5. STEP 5: Modify your angular.json. ...
  6. STEP 6: Create custom-webpack.config.ts file.
Mar 26, 2023

Does Vercel provide CI CD? ›

Vercel Workflow: Built-in CI/CD, live previews, and analytics.

Does Vercel use AWS? ›

To deliver world class dynamic sites in production, Vercel has turned AWS Lambda into an edge-first compute layer.

Is Vercel free for deployment? ›

Vercel offers three account plans: Hobby, Pro, and Enterprise. Each plan is designed to meet the needs of different types of users, from personal projects to large enterprises. The Hobby plan is free and includes base features, while the Pro and Enterprise plans offer enhanced features and resources.

What are the disadvantages of Vercel? ›

Cons and Limitations of Vercel Hosting
  • Limited Backend Support. Vercel's focus on the frontend means it may not suit complex or advanced backend needs, with limitations in language support and scalability for heavy backend processing.
  • Pricing Concerns.
Jan 10, 2024

What is the difference between Netlify and Vercel app? ›

Vercel provides native integrations with popular frameworks like Next. js and Nuxt. js, while also supporting custom setups. Netlify, on the other hand, has a rich ecosystem that includes support for static site generators, serverless functions, and headless CMS integrations.

Is Vercel for front end or backend? ›

Vercel's Frontend Cloud uses framework-defined infrastructure (FdI) to automatically transform your framework code into a globally served application.

How to build Angular project using GitHub Actions? ›

Go to the Actions tab and click on New Workflow.
  1. Search by angular and select the Node. ...
  2. A new yml file will be created under .github/workflows folder under the repository. ...
  3. Below is the content I use for all my Angular repos: ...
  4. With this step, you have a basic pipeline up and running.
Mar 1, 2024

How to automate Angular deployment? ›

How to use the Angular CLI for automated deployment?
  1. ng build --prod. This command will generate a production-ready version of your application in the “dist” directory. ...
  2. ng deploy. ...
  3. ng deploy --base-href=/my-app/ ...
  4. ng deploy --configuration=staging.
Feb 27, 2023

How to deploy Angular app on Netlify from GitHub? ›

How to deploy an Angular app with Netlify
  1. Create an account on Netlify. ...
  2. Create an Angular project using the Angular CLI (if you haven't already).
  3. Make sure useHash is false when exporting your routes to use the HTML5 History API. ...
  4. Create a _redirects file. ...
  5. On Netlify, configure the project which should be deployed.

How to secure data in Angular? ›

Best Practices for Angular Security
  1. Keep Dependencies Updated: Regularly update Angular and its dependencies to patch security vulnerabilities and benefit from the latest security enhancements.
  2. Input Validation: Always validate and sanitize user input to prevent injection attacks and ensure data integrity.
Mar 17, 2024

How do I make my Angular app more secure? ›

Top 5 Best Practices for Angular App Security
  1. Prevent cross-site scripting (XSS)
  2. Block HTTP-related vulnerabilities.
  3. Avoid risky Angular APIs.
  4. Don't customize Angular files.
  5. Stay updated with the latest Angular library.
Dec 8, 2023

How to encrypt the data in Angular? ›

How to perform Data Encryption and Decryption with CryptoJS
  1. Create a new Angular project (if you haven't already) and navigate to the project directory: ng new angular-login-encryption.
  2. Install the CryptoJS library: ...
  3. Create a service to handle encryption and decryption. ...
  4. Implement encryption and decryption in the service:
Apr 11, 2024

How to handle environments in Angular? ›

To use the environment configurations you have defined, your components must import the original environments file: content_copy import { environment } from './../environments/environment'; This ensures that the build and serve commands can find the configurations for specific build targets.

Top Articles
Latest Posts
Article information

Author: Laurine Ryan

Last Updated:

Views: 5936

Rating: 4.7 / 5 (57 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Laurine Ryan

Birthday: 1994-12-23

Address: Suite 751 871 Lissette Throughway, West Kittie, NH 41603

Phone: +2366831109631

Job: Sales Producer

Hobby: Creative writing, Motor sports, Do it yourself, Skateboarding, Coffee roasting, Calligraphy, Stand-up comedy

Introduction: My name is Laurine Ryan, I am a adorable, fair, graceful, spotless, gorgeous, homely, cooperative person who loves writing and wants to share my knowledge and understanding with you.