playbooks

home / skills / pluginagentmarketplace / custom-plugin-angular / deployment

deployment skill

/skills/deployment

This skill helps you deploy Angular apps with production builds, CI/CD pipelines, hosting choices, and SSR options for scalable delivery.

npx playbooks add skill pluginagentmarketplace/custom-plugin-angular --skill deployment

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
1.3 KB
---
name: deployment
description: Angular application deployment, CI/CD pipelines, and hosting strategies
sasmp_version: "1.3.0"
bonded_agent: 07-testing-deployment
bond_type: PRIMARY_BOND
---

# Angular Deployment Skill

## Overview
Deploy Angular applications to production with CI/CD pipelines, hosting platforms, and server-side rendering configurations.

## Topics Covered

### Build Configuration
- Environment configurations
- Production build optimization
- Service workers and PWA
- Base href configuration
- Asset optimization

### Hosting Platforms
- Vercel deployment
- Netlify configuration
- Firebase Hosting
- AWS S3 + CloudFront
- Azure Static Web Apps
- GitHub Pages

### CI/CD Pipelines
- GitHub Actions for Angular
- GitLab CI configuration
- Azure DevOps pipelines
- Automated testing in CI
- Preview deployments

### Server-Side Rendering
- Angular Universal setup
- Hydration strategies
- SSR hosting options
- Pre-rendering static pages
- SEO optimization

### Containerization
- Docker for Angular apps
- nginx configuration
- Multi-stage builds
- Container orchestration

## Prerequisites
- Angular CLI proficiency
- Basic DevOps understanding
- Git workflow knowledge

## Learning Outcomes
- Configure production builds
- Set up CI/CD pipelines
- Deploy to multiple platforms
- Implement SSR/SSG strategies

Overview

This skill teaches practical strategies to deploy Angular applications, covering production builds, hosting options, CI/CD pipelines, and server-side rendering. It focuses on real-world configurations and workflows that make deployments repeatable, fast, and reliable. You will learn how to optimize builds, choose hosting platforms, and integrate automated pipelines for continuous delivery.

How this skill works

The skill inspects common deployment pain points and provides step-by-step configurations for build optimization, asset handling, and base href management. It shows how to implement hosting-specific settings for Vercel, Netlify, Firebase, AWS S3 + CloudFront, Azure Static Web Apps, and GitHub Pages. CI/CD sections include reusable pipeline templates for GitHub Actions, GitLab CI, and Azure DevOps, plus guidance for automated testing and preview deployments. Server-side rendering covers Angular Universal setup, hydration and pre-rendering options, and hosting patterns for SSR/SSG.

When to use it

  • You need a stable, repeatable production deployment for an Angular app.
  • You want to set up CI/CD to automate builds, tests, and releases.
  • You require SEO improvements via SSR or pre-rendering for public pages.
  • You plan to host on a specific platform (Vercel, Netlify, Firebase, AWS, Azure, GitHub).
  • You are containerizing the app for consistent environments or orchestration.

Best practices

  • Maintain separate environment configs and keep secrets out of repos.
  • Build production artifacts with AOT, optimization, and hashed assets.
  • Use multi-stage Docker builds and serve with a lightweight webserver like nginx.
  • Implement CI jobs for linting, unit tests, e2e or integration tests, and preview deployments.
  • Choose SSR or pre-rendering based on SEO needs and runtime complexity.

Example use cases

  • Set up GitHub Actions to build, test, and deploy an Angular app to Netlify on merge to main.
  • Configure Angular Universal and deploy SSR output to an Express host on AWS or an SSR-capable platform.
  • Deploy static site artifacts to S3 with CloudFront for global caching and custom domain support.
  • Create a Docker multi-stage pipeline and deploy containers to Kubernetes with a configured ingress.
  • Enable service workers and PWA features, then publish to Firebase Hosting with automatic rollbacks.

FAQ

Do I always need SSR for SEO?

Not always. Use SSR or pre-rendering for pages that require rich meta tags or fast first meaningful paint; smaller apps or internal dashboards can rely on client-side rendering.

Which hosting option is best for quick static deployment?

For quick static deployments, Netlify, Vercel, and Firebase Hosting provide seamless builds, previews, and CDN-backed delivery with minimal configuration.