Back to course

Deployment Strategies (CI/CD overview and practical deployment example)

The Complete Angular Developer: From Zero to Hero

80. Deployment Strategies (CI/CD Overview and Practical Example)

The final step in the Angular development lifecycle is deploying the optimized static assets to a hosting service.

1. Hosting Environment

Since Angular apps are SPAs, they consist only of static files (HTML, CSS, JS bundles). They can be hosted on any static file server, CDN, or cloud platform.

Popular Hosting Options:

  • Firebase Hosting: Extremely fast, great for Angular apps.
  • Vercel / Netlify: Excellent for static sites and serverless architecture integration.
  • AWS S3 / CloudFront: Highly scalable, but requires more setup.

2. Continuous Integration / Continuous Delivery (CI/CD)

CI/CD pipelines automate the build and deployment process every time code is merged to the main branch.

Typical CI/CD Steps:

  1. CI (Integration): Developer pushes code -> CI runner (e.g., GitHub Actions, GitLab CI) checks out code, runs npm install, runs unit tests (ng test), runs linting.
  2. CD (Delivery/Deployment): If tests pass -> The runner executes ng build --prod -> The output (/dist folder) is uploaded to the static hosting service.

3. Practical Deployment Example (Firebase)

Firebase Hosting is often the simplest way to deploy an Angular application.

Step 1: Install Firebase CLI

bash npm install -g firebase-tools firebase login

Step 2: Initialize Project

bash firebase init hosting

Public directory: dist/

Configure as a single-page app: Yes

Step 3: Build for Production

bash ng build --configuration=production

Step 4: Deploy

bash firebase deploy --only hosting

This final deployment command pushes your optimized application to the public internet, completing your journey from '0 to hero'!