Angular Vercel Deployment

Introduction

Deploying your Angular application is a crucial step in the development process, enabling users around the world to access your application. Vercel provides one of the most streamlined and developer-friendly platforms for deploying frontend applications like those built with Angular.

In this guide, you'll learn how to deploy your Angular application to Vercel. We'll cover everything from preparing your application for deployment to configuring custom domains and environment variables. By the end, you'll be able to deploy your Angular apps with confidence and take advantage of Vercel's powerful features.

What is Vercel?

Vercel is a cloud platform for static sites and serverless functions that enables developers to host websites and web applications with zero configuration. Some key features include:

• Zero configuration deployments: Deploy directly from Git repositories
• Automatic HTTPS: SSL certificates are automatically provisioned
• Global CDN: Content delivery network for fast access worldwide
• Serverless functions: Backend logic without managing servers
• Preview deployments: Every pull request gets its own preview URL
• Built-in CI/CD: Continuous integration and deployment

Prerequisites

Before we begin, make sure you have:

1. A working Angular application
2. Node.js and npm installed
3. A GitHub, GitLab, or Bitbucket account (optional, but recommended)
4. A Vercel account

Step 1: Prepare Your Angular Application

To ensure your Angular application works properly on Vercel, you may need to make a few adjustments:

Creating a Vercel Configuration File

Create a vercel.json file in the root of your project:

json

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/assets/(.*)", "dest": "/assets/$1" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

This configuration tells Vercel to route all requests to index.html unless the request is for a file in the assets folder, which enables Angular's client-side routing to work correctly.

Update Angular Configuration

Make sure your Angular application's angular.json file has the correct build output directory. Vercel typically looks for the build output in the dist folder:

json

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-app-name",
            // other options...
          }
        }
      }
    }
  }
}

Step 2: Install the Vercel CLI (Optional)

While you can deploy directly from the Vercel dashboard, the CLI offers more flexibility for testing deployments locally.

bash

npm install -g vercel

After installation, log in to your Vercel account:

bash

vercel login

Follow the prompts to complete the authentication process.

Step 3: Deploy Your Angular Application

Option 1: Deploy using Vercel CLI

Navigate to your project directory and run:

bash

vercel

The CLI will guide you through the deployment process with a series of questions:

? Set up and deploy "~/projects/my-angular-app"? [Y/n] y
? Which scope do you want to deploy to? Your Username
? Link to existing project? [y/N] n
? What's your project's name? my-angular-app
? In which directory is your code located? ./
? Want to override the settings? [y/N] n

Once you answer these questions, Vercel will deploy your application and provide you with a deployment URL.

Option 2: Deploy using Vercel Dashboard

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
2. Go to vercel.com and log in
3. Click "New Project"
4. Import your repository
5. Select the repository containing your Angular project
6. Configure project settings:
   • Set the Framework Preset to "Angular"
   • Set the Build Command to ng build or npm run build
   • Set the Output Directory to dist/your-app-name (matches your Angular configuration)
7. Click "Deploy"

Vercel will automatically detect that you're deploying an Angular project and configure most settings accordingly.

Step 4: Configure Build Settings

After your initial deployment, you might need to adjust build settings:

1. Go to your project in the Vercel dashboard
2. Click on "Settings" > "General"
3. Under "Build & Development Settings":
   • Build Command: ng build or npm run build
   • Output Directory: dist/your-app-name (replace with your app name)
4. Click "Save"

Step 5: Setting Up Environment Variables

If your Angular application uses environment variables, you can configure them in Vercel:

1. Go to your project in the Vercel dashboard
2. Click on "Settings" > "Environment Variables"
3. Add your environment variables:
   • Name: API_URL (for example)
   • Value: https://api.example.com
   • Select environments (Production, Preview, Development)
4. Click "Save"

To access these variables in your Angular application, you'll need to prefix them with NG_APP_ when referencing them in your environment.ts files:

typescript

// environment.ts
export const environment = {
  production: false,
  apiUrl: process.env['NG_APP_API_URL']
};

Step 6: Configuring Custom Domains

To add a custom domain to your Vercel-hosted Angular application:

1. Go to your project in the Vercel dashboard
2. Click on "Settings" > "Domains"
3. Enter your domain name (e.g., myangularapp.com)
4. Click "Add"
5. Follow the provided instructions to configure your DNS settings

Vercel will automatically provision an SSL certificate for your domain.

Real-World Example: Deploying an Angular Todo App

Let's walk through deploying a simple Angular Todo application to Vercel:

1. First, create a new Angular application (if you don't already have one):

bash

ng new angular-todo-app
cd angular-todo-app

2. Develop your application features (simplified here):

Create a basic todo component:

bash

ng generate component todo

Update src/app/todo/todo.component.ts:

typescript

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

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent {
  todos: Todo[] = [];
  newTodo = '';

  addTodo() {
    if (this.newTodo.trim()) {
      const todo: Todo = {
        id: Date.now(),
        text: this.newTodo,
        completed: false
      };
      this.todos.push(todo);
      this.newTodo = '';
    }
  }

  toggleComplete(todo: Todo) {
    todo.completed = !todo.completed;
  }

  deleteTodo(id: number) {
    this.todos = this.todos.filter(todo => todo.id !== id);
  }
}

Update src/app/todo/todo.component.html:

html

<div class="todo-container">
  <h1>Angular Todo App</h1>
  
  <div class="add-todo">
    <input 
      type="text" 
      [(ngModel)]="newTodo" 
      placeholder="Add a new task..." 
      (keyup.enter)="addTodo()"
    />
    <button (click)="addTodo()">Add</button>
  </div>
  
  <ul class="todo-list">
    <li *ngFor="let todo of todos" [class.completed]="todo.completed">
      <span (click)="toggleComplete(todo)">{{ todo.text }}</span>
      <button (click)="deleteTodo(todo.id)" class="delete">X</button>
    </li>
  </ul>
  
  <div class="stats">
    <p>{{ todos.length }} total todos | {{ todos.filter(t => t.completed).length }} completed</p>
  </div>
</div>

Update src/app/app.module.ts to import FormsModule:

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TodoComponent } from './todo/todo.component';

@NgModule({
  declarations: [
    AppComponent,
    TodoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Update src/app/app.component.html:

html

<app-todo></app-todo>

3. Create a vercel.json file in the project root:

json

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

4. Deploy to Vercel using the CLI:

bash

vercel

5. After answering the CLI prompts, your Angular Todo app will be deployed to a URL like angular-todo-app-uniqueid.vercel.app

Common Issues and Troubleshooting

404 Errors on Page Refresh

If you encounter 404 errors when refreshing pages with Angular routing, ensure your vercel.json includes the proper routing configuration:

json

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

Build Failures

If your build is failing, check:

1. The build logs in the Vercel dashboard
2. Ensure all dependencies are properly installed
3. Verify your Angular version is compatible with your code
4. Make sure the output directory in Vercel settings matches your Angular configuration

Environment Variables Not Working

Remember that Angular requires environment variables to be set at build time, not runtime. Ensure you:

1. Prefix your variables with NG_APP_ for Angular to recognize them
2. Access them properly in your environment.ts files
3. Rebuild your application when environment variables change

Summary

Deploying an Angular application to Vercel provides a seamless experience with minimal configuration. We've covered:

• Setting up your Angular project for Vercel deployment
• Using the Vercel CLI and dashboard for deployment
• Configuring build settings and environment variables
• Adding custom domains to your application
• Working through a real-world deployment example

Vercel's platform offers powerful features like preview deployments, global CDN, and automatic HTTPS that make it an excellent choice for hosting Angular applications. With the knowledge gained from this guide, you can confidently deploy and manage your Angular applications on Vercel.

Additional Resources

• Official Vercel Documentation
• Angular Deployment Guide
• Vercel CLI Reference
• Environment Variables with Angular

Exercises

1. Deploy a simple Angular application to Vercel and configure a custom domain.
2. Set up environment variables for different deployment environments (development, production).
3. Configure a CI/CD pipeline that deploys your Angular application to Vercel whenever you push to the main branch.
4. Implement preview deployments for pull requests in your Angular project.
5. Add serverless API functions to your Vercel-deployed Angular application using Vercel Functions.