Deploy an Angular App to Vercel

Deploy an Angular app with an encrypted .env.vault file to Vercel.

Find a complete code example on GitHub for this guide.

Initial setup

Create an Angular application.

npx @angular/cli new

This will create a handful of files.

ls -1
README.md
angular.json
node_modules/
package-lock.json
package.json
src/
tsconfig.app.json
tsconfig.json
tsconfig.spec.json

Add @ngx-env/builder so we can get process.env support in Angular.

npx @angular/cli add @ngx-env/builder

Generate the environment files (for Angular 16 and greater).

npx @angular/cli generate environments

Edit src/app/app.component.ts to include the environment variable NG_APP_HELLO.

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'vercel';
  NG_APP_HELLO = process.env['NG_APP_HELLO']
}

Change src/app/app.component.html to a simple Hello {{ NG_APP_HELLO }}.

src/app/app.component.html

Hello {{ NG_APP_HELLO }}.

Add .vercelignore file.

.vercelignore

.env*
!.env.vault

Commit that to code and deploy it to Vercel.

npx vercel@latest deploy --prod

yourapp.vercel.app

Once deployed, your app will say 'Hello .' as it doesn't have a way to access the environment variable yet. Let's do that next.

Preload dotenv

Install dotenv.

npm install dotenv --save # Requires dotenv >= 16.1.0

Create a .env file in the root of your project.

.env

# .env
NG_APP_HELLO="World"

Preload Angular scripts using dotenv. This will inject environment variables ahead of Angular.

package.json

"scripts": {
  "ng": "node -r dotenv/config ./node_modules/.bin/ng",
  "start": "node -r dotenv/config ./node_modules/.bin/ng serve",
  "build": "node -r dotenv/config ./node_modules/.bin/ng build",
  "watch": "node -r dotenv/config ./node_modules/.bin/ng build --watch --configuration development",
  "test": "node -r dotenv/config ./node_modules/.bin/ng test"
},

Try running it locally.

npm run start
# Angular Live Development Server is listening on localhost:4200

It will say 'Hello World'.

Great! process.env now has the keys and values you defined in your .env file.

That covers local simulation of production. Let's solve for the real production environment next.

Build .env.vault

Push your latest .env file changes and edit your production secrets. Learn more about syncing

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

Use the UI to configure those secrets per environment.

www.dotenv.org

Then build your encrypted .env.vault file.

npx dotenv-vault@latest build

Its contents should look something like this.

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

Deploy

Commit those changes safely to code and deploy.

npx vercel@latest deploy --prod

That's it! On deploy, your .env.vault file will be decrypted and its production secrets injected as environment variables – just in time.