Welcome back 👋 to our K8s journey. In this post, we’ll explore how to deploy a front-end application with Angular 19 on a Kubernetes cluster

· Building the Angular App
∘ Creating a new Angular project
∘ Consume Backend REST API
· Containerize the application
∘ Creating a Dockerfile
∘ Building the Docker image
· Deploy the Application to Kubernetes
∘ Creating Kubernetes manifests
∘ Deploying the application to the cluster
· Conclusion
· References

This series of stories shows how to use Kubernetes in the Spring ecosystem. We work with a Spring Boot API and Minikube to have a lightweight and fast development environment similar to production.

In previous posts, we containerized and deployed a Spring Boot API to a Kubernetes cluster using Minikube. In this story, we’ll explore how to deploy a front-end application with Angular 19 on a Kubernetes cluster and consume the Spring Boot API.

Building the Angular App

Creating a new Angular project

Let’s start creating a new Angular application. Run this command on your terminal to generate a new Angular project:

$ npx -p @angular/cli@19.1.5 ng new angular-k8s

We used Angular v.19.1.5 which is the active version at the time of writing this story.

Consume Backend REST API

Next, we need to use the Spring Boot API. For this, we will use our spring-boot-k8s repository below:

GitHub – anicetkeric/spring-boot-k8s

Create the new component (home.component) in src/app.

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, TableModule],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  books: Book[] = [];
  private readonly apiUrl = `${environment.apiUrl}/book`;
  private readonly http = inject(HttpClient);

  ngOnInit() {
    this.fetchBooks();
  }

  fetchBooks() {
    this.http.get<Book[]>(this.apiUrl).subscribe(data => {
      this.books = data;
    });
  }

<div class="container">
    <h1>Book List</h1>

    <p-table
    [value]="books"
    showGridlines
    [paginator]="true"
    [rows]="5"
    [tableStyle]="{ 'min-width': '50rem' }"
    [rowsPerPageOptions]="[5, 10, 20]"
>
    <ng-template #header>
        <tr>
            <th style="width:25%">Title</th>
            <th style="width:25%">Isbn</th>
            <th style="width:25%">Price</th>
            <th style="width:25%">Page</th>
        </tr>
    </ng-template>
    <ng-template #body let-book>
        <tr>
            <td>{{ book.title }}</td>
            <td>{{ book.isbn }}</td>
            <td>{{ book.price }}</td>
            <td>{{ book.page }}</td>
        </tr>
    </ng-template>
</p-table>
</div>

This component displays a table with the list of books from the Spring Boot API.

We can run it locally with ng serve to verify it’s working.

Containerize the application

We’ll containerize our Angular application to a Kubernetes cluster using Docker to deploy it.

Spring Boot API is already available on the Minikube cluster. The Angular application can use http://192.168.49.2:31315/api/book to display the list of books. We define http://192.168.49.2:31315/api in the environment file as the apiUrl variable.

Creating a Dockerfile

Create a file named Dockerfile in the root of your Angular project (the same level as package.json) and add the following content:

# Stage 1: Build the Angular application
FROM node:22-alpine AS build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the Angular application
RUN npm run build --prod

# Stage 2: Serve the application with Nginx
FROM nginx:alpine

# Copy the built Angular application from the previous stage to the Nginx HTML directory
COPY --from=build /app/dist/angular-k8s/browser /usr/share/nginx/html

# Copy custom Nginx configuration file
COPY nginx.conf /etc/nginx/nginx.conf

# Expose port 80
EXPOSE 80

# Start Nginx server
CMD ["nginx", "-g", "daemon off;"]

Additionally, we need to create a nginx.conf file to configure Nginx to serve your Angular application. Here’s an example of a basic nginx.conf:

events {
    # Events block configuration
}

http {
    # Include additional configuration files
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # Server block configuration
    server {
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html;
        }

        error_page 404 /index.html;
    }
}

Building the Docker image

After creating the Dockerfile, we can create the image locally on all nodes in the cluster with the following commands:

$ minikube image build -t angular-k8s . --all

Deploy the Application to Kubernetes

Creating Kubernetes manifests

Create a file named k8s.yaml and add the following content:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: webapp
  labels:
    app: front-app
spec:
  replicas: 2
  selector:
    matchLabels:
      service: webapp
  template:
    metadata:
      labels:
        app: front-app
        service: webapp
    spec:
      containers:
        - name: front-web
          image: angular-k8s:latest
          ports:
            - containerPort: 80
              protocol: TCP
          imagePullPolicy: Never         
          livenessProbe:
            httpGet:
              path: /
              port: 80
          readinessProbe:
            httpGet:
              path: /
              port: 80
            initialDelaySeconds: 30
            periodSeconds: 10
            failureThreshold: 5                                                       
---
apiVersion: v1
kind: Service
metadata:
  name: webappservice
  labels:
    app: front-app
    service: webapp
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort : 80
      protocol: TCP
  selector:
    service: webapp

Deploying the application to the cluster

Now, we can apply the configuration by using the following command:

$ kubectl apply -f k8s/k8s.yaml
deployment.apps/webapp created
service/webappservice created

Check that the applications are running:

As we see, all resources are working well.

Let’s open the Angular application.

Conclusion

Well done !!. In this post, we have seen how to containerize and deploy an Angular application to a Kubernetes cluster.

The complete source code of this series is available on GitHub.

Support me through GitHub Sponsors.

Thank you for Reading !! See you in the next post.

References

https://angular.dev/

👉 Link to Medium blog

Lab10 (Spring Boot/K8S): Frontend deployment with Angular 19 on Kubernetes