Building and Deploying Angular Apps on Upsun

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:

Builds your Angular app
Provisions the environment
Deploys the output
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

​Why Angular and Upsun Go Hand in Hand

​Prerequisites

​Let’s get started!

​1. Create project

​2. Initialize your project

​3. Configure Angular in .upsun/config.yaml

​4. Push Your Code

​Feature Environments

​Final thoughts