Deploy the Java angular sample app

The sample app can either be deployed using docker, or you can deploy the sample app manually.

Deploy the 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.

15931593

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 the 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 are in the case of mac then run the below command to build the docker image.

docker build -f ./Dockerfile-angular -t identity-demo-angular:1.0 .
13651365
  • 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.
14421442

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
15691569

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

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

19191919

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

Manual installation of Java angular app

Overview

This guide aims to help you in installing the prerequisite tools and deploy the Angular Java sample app.

Before you begin

Install NODE.js

  • Download the Node.js installer from https://nodejs.org/en/download/ and run the file(highly recommended to download 64-bit version).
  • Node.js installer includes the NPM package manager.
  • Ensure that the path of Node.js is configured into the system PATH environment variable.
  • Use the commands below to check Node.js installation.
  • Minimum version of node required is 12.14.1.
node -v
npm -v

Install JDK

  • Download the JDK package from https://www.oracle.com/java and run the file.
  • Configure JDK bin path into the system PATH environment variable.
519519
<JDK_Directory>\bin
  • Use the command below to check JDK installation.
  • Minimum version of JDK required is 11.
java -version

Install Maven

649649
<MAVEN_DIRECTORY>\bin
  • Check the Maven version with the command below.
mvn –version

Configure SSL for the demo app

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

SSL Configuration

Along with the repo, you will find a folder named certs, which contains the self-signed certificates.

  • If you have any existing .p12, .crt, and .key files, rename them to sslkeystore.p12, server.crt and server.key and replace in certs folder respectively.

Step 1: Automation script to setup SSL

The automated script performs the following operations:

  1. Copy certificates to respective folders.
  2. Move the certificates to OS-specific certificate stores.

    If the certificates are still not trusted, perform Install certificates action.

  • Open the command prompt with administrative privileges and run the setup-ssl.bat file on Windows.

    Click Windows -> Command Prompt, Right click, and select 'Run as Administrator.'

cmd> setup-ssl.bat
  • For *Nix (Linux / Mac) systems, run setup-ssl.sh.
sh setup-ssl.sh

Step 2: Manual setup of SSL

Refer to Angular Java Sample App Self-Signed SSL Creation

Build and Run

Follow the steps below to Build and Run the Angular Java application.

Angular

  • Navigate to identity-demo-angular/angular folder.
cd angular
  • Install the dependencies.
npm i
  • Run the application.
npm start

Spring Boot Application

  • Navigate to identity-demo-angular/spring-boot folder.
cd spring-boot
  • Install the dependencies and build the project.
mvn clean install
  • Run the server as an administrator.
mvn spring-boot:run

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

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