Angular Java Sample App Dockerization Guide

Step by step guide to setup sample app using Docker

Docker is a containerization tool used to streamline application development and deployment workflows across various environments.

This guide aims to help the user to run the sample app using docker containerization which is simply a way of packaging software applications into containers.

Before you start

Install Docker Desktop

Download and install Docket Desktop from here.

📘

Why Docker Desktop?

Docker Desktop is an easy-to-install application for your Mac or Windows environment that enables you to build and share containerized applications and microservices. Docker Desktop includes Docker Engine, Docker CLI client, Docker Compose, Docker Content Trust, Kubernetes, and Credential Helper.

On successful installation of docker desktop, when we launch docker desktop it shows below screen.

Angular - Java Sample App Code Base (GitHub)

Download the code from the above mentioned repository and follow the below steps.

Configure SSL for the Sample app

  • If you already have public SSL certificates, replace the certs folder certificates specified below.

SSL Configuration

Pre-requisites

Configure the SSL certs by following steps mentioned in SSL setup.

Existing Certificates

Along with the repo, you will find a folder named certs to place the [self-signed] certificates.

  • Place your certificates .p12, .crt, and .key files, with names matching to sslkeystore.p12, server.crt and server.key in certs folder respectively.

Self-Signed Certificates (Auto-generated through script)

Angular Frontend

Build Docker Image for Angular app

Navigate to the root folder where the Dockerfile-angular file already exists. Open Command Prompt if windows and Terminal in case of mac then run below command to build the docker image.

docker build -f ./Dockerfile-angular -t identity-demo-angular:1.0 .
  • Make sure to include . at the end
  • Here, -t means, tag followed by name:tag format. You can give any name and tag as you prefer.

Run Docker Image for Angular app

docker run -d -p 4200:4200 --name identity-demo-angular identity-demo-angular:1.0
  • -d means that we will start the container in a detached mode. It exits when the root process used to run the container exits.
  • -name assigns the name of the container.
  • -p exposes the container’s internal port. The format is -p hostPort:containerPort. The exposed container’s port can be directed through the specified host’s port. Thus, -p 4200:4200 binds the host’s 4200 port to the container’s internal 4200 port.
  • identity-demo-angular:1.0 is the Image name along with the tag.

Once the Docker image starts running successfully, you can browse the URL https://identitydemo.acmeinc.com:4200 or use the open browser button on the docker desktop.
Configure the settings to access the web application.

Spring-boot Backend

Build Docker Image for Spring-boot app

  • Navigate to the root folder where the Dockerfile-springboot file exists.
  • Open Command Prompt if windows and run below command to build the image.
docker build -f ./Dockerfile-springboot -t identity-demo-spring-boot:1.0 .
  • Make sure to include . at the end
  • Here, -t simply means tag followed by name:tag format. You can give any name and tag as you prefer.

Run Docker Image for Spring-boot app

docker run -d -p 8080:8080 --name identity-demo-spring-boot identity-demo-spring-boot:1.0
  • -d means that we will start the container in a detached mode. It exits when the root process used to run the container exits.
  • -name assigns the name of the container.
  • -p exposes the container’s internal port. The format is -p hostPort:containerPort. The exposed container’s port can be directed through the specified host’s port. Thus, -p 8080:8080 binds the host’s 8080 port to the container’s internal 8080 port.
  • identity-demo-sprint-boot:1.0 is the Image name along with the tag.

Docker Compose

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application’s services. Then, with a single command, you create and start all the services from your configuration.

Navigate to the root folder where the docker-compose.yml file exists. Open Command Prompt if windows and run the below command to start and run your entire sample app, both angular and spring boot app.

docker-compose up --build -d

Now, you can use the environment for the Angular Java Sample App.

Open https://identitydemo.acmeinc.com:4200 and configure Settings to access web application.

These are some helpful docker commands.

List all images:  docker images -a
list all processes: docker ps
List all networks: docker network ls
To Stop docker compose: docker-compose down

For more commands refer Docker docs