Skip to main content
Angular 21 has just been released, bringing performance improvements and a more modern, streamlined developer experience. The release focuses on speed, accessibility, and a smoother path toward fully zoneless Angular applications. Check out this blog post by the Angular team to get full insights! To celebrate this release we’ve created this guide that walks you through how to deploy an Angular application on Upsun using best practices which includes standalone components, optimized production builds and Upsun’s single-runtime configuration.

Why Angular and Upsun Go Hand in Hand

Angular’s build-first, static-output architecture aligns naturally with Upsun’s automated deployment platform. Modern Angular Builds + Reproducible Upsun Environments: Angular 21’s optimized Vite-powered builds run in clean, isolated containers on Upsun. You get predictable output, consistent Node versions, and fully repeatable deployments. Angular SPA Output + Upsun Zero-Config Static Hosting: Upsun automatically serves Angular’s generated dist/ output (automatic HTTPS, global caching, compression, instant rollbacks). Angular Preview Workflows + Upsun On-Demand Environments: Every Git branch deployed on Upsun becomes its own environment with its own URL, perfect for:
  • Staging UI updates
  • Reviewing component changes
  • Demos and feedback rounds
  • Validating design improvements
Optional Backend + Upsun Multi-App Architecture. If your Angular app needs an API layer, Upsun lets you:
  • Add the language of your choice for your backend
  • Use managed databases
  • Auto-connect services internally
  • Inject env variables per environment
  • Upsun also handles all service wiring.

Prerequisites

Before you begin, make sure the following requirements are met:
  • You already have an Upsun account.
    If you don’t have an Upsun account, create one here: https://console.upsun.com/
  • You have an Angular project ready.
    If you don’t have an Angular project, you can follow the official Angular setup guide to create a new project.
  • Your Angular application builds successfully on your local machine.
    You can verify this by checking that a dist/<app-name> directory is created after running:
ng build 
  • The Upsun CLI is installed locally.
    If you haven’t installed it yet, you can install it following these instructions.

Let’s get started!

1. Create project

First, you need to create a project with the Upsun CLI (you can also do this through the Upsun Console).
upsun project:create
You will be prompted to answer:
  • Add project title
  • Choose project region
  • Define default branch
Then you will be prompted to set the new project as the remote for this repository directory. Select Yes. Finally a project cost will be given to you to accept.

2. Initialize your project

From the root of your Angular project, run:
upsun project:init
This command:
  • Detects your project stack
  • Creates the .upsun folder
  • Generates a starter config.yaml
  • Connects your project to Upsun (if not already connected)
You’ll now have:
.
├── .upsun/
   └── config.yaml
└── src/

3. Configure Angular in .upsun/config.yaml

Open the generated file and update it for an Angular static deployment:
# Upsun configuration, generated using AI at: 2025-11-21T13:10:37+01:00
# AI can make mistakes. Please modify this file to suit your needs.
applications:
  angularupsundemo:
    type: nodejs:24

    build:
      flavor: none
      # For Angular CLI cache and build output
    mounts:
      /.angular:
        source: storage
        source_path: angular

    hooks:
      build: |
        set -ex
        npm install 
        npm run build

    web:
      commands:
        start: npm start  -- --port $PORT --host 0.0.0.0 --allowed-hosts

      locations:
        /:
          root: public
          passthru: true
          allow: false

        '/(api|health)':
          passthru: true

    
routes:
  https://{default}/:
    type: upstream
    upstream: angularupsundemo:http
Everything is handled in a single file. Mounts define the required file system structure and state management that the running Node.js/Angular environment needs on the Upsun platform, ensuring crucial directories like /.angular are persisted and available at runtime. Without it, the Angular build will fail.

4. Push Your Code

Once your config is ready add the files to Git and add a commit message:
git add .
git commit -m "Add Upsun Configuration"
And lastly push your project to Upsun
upsun push
Upsun immediately:
  1. Builds your Angular app
  2. Provisions the environment
  3. Deploys the output
  4. Provides a live URL
Your Angular app is now deployed.

Feature Environments

One of my favorite features of Upsun is environments, as it states in our documentation “You can think of other environments as copies of your live site where you can run tests without worrying about damaging anything in production.” Let’s see how it works. We start by creating a new branch:
git checkout -b feature/test
We will build a feature by generating a new component to test this out.
ng generate component components/test-feature
Now, add the new component to the app.ts file
import { Component, signal } from '@angular/core';
import { TestFeature } from './components/test-feature/test-feature';

@Component({
  selector: 'app-root',
  imports: [TestFeature],
  template: `
    <main class="content">
      <app-test-feature [title]="title()" />
    </main>
  `,
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('upsun-angular-demo');
}
Add to GitHub and push to Upsun:
git add .
git commit -m "add new feature"
upsun push feature/test
Upsun deploys it automatically with a unique URL. Ideal for:
  • UI reviews
  • QA
  • Demos
  • Experimentation
No manual setup. That’s it!

Final thoughts

Angular 21 modernizes the framework with faster builds, better accessibility tools and a fully zoneless future. Upsun complements this perfectly by removing infrastructure complexity and automating deployment end-to-end. Together, they give you:
  • Predictable builds
  • Automated environments
  • Global static hosting
  • Effortless previews
  • Zero maintenance infrastructure
Angular + Upsun makes deployment simple, scalable and enjoyable. If you’d like to explore a complete working example, including the Angular 21 app, Upsun configuration and deployment setup, you can find it here
Last modified on April 27, 2026