Angular Java Sample App Deployment Guide

Step by step guide to setup sample app environment

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

Prerequisites

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.
  • Make sure the path of Node.js is configured into system PATH environment variable.
  • Below commands can be used 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 system PATH environment variable.
** Set the path of jdk bin **** Set the path of jdk bin **

Set the path of jdk bin

<JDK_Directory>\bin
  • Below command can be used to check JDK installation.
  • Minimum version of JDK required is 11.
java -version

Install Maven

** Set the path of maven bin **** Set the path of maven bin **

Set the path of maven bin

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

Install MySQL Server and workbench

**Select MySQL Server and MySQL Workbench****Select MySQL Server and MySQL Workbench**

Select MySQL Server and MySQL Workbench

  • Enter the MySQL Root Password below and make a note of it.
  • Proceed further to complete the installation.
** MySQL Root Account**** MySQL Root Account**

MySQL Root Account

Setup Custom Database

  • Open MySQL workbench.
  • Add MySQL Connection with above configured user credentials by providing custom connection name.
**The workbench should successfully connect to the MYSQL server ****The workbench should successfully connect to the MYSQL server **

The workbench should successfully connect to the MYSQL server 

  • Go to File, Open SQL Script, select DBScript.sql located at identity-demo-angular folder to configure the Database schema named customerDB.
  • Execute the script.

Configure SSL for the demo app

Self-signed SSL

Generate Certificates

authorityKeyIdentifier = keyid, issuer 

basicConstraints = CA:FALSE 

keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment 

subjectAltName = @alt_names 

[alt_names] 

DNS.1 = localhost 

DNS.2 = identitydemo.acmeinc.com
  • Open command prompt and type openssl and hit enter.
  • Run the following commands to generate certificates.
req -x509 -nodes -new -sha256 -days 1024 -newkey rsa:2048 -keyout RootCA.key -out RootCA.pem -subj "/C=US/CN= identitydemo.acmeinc.com"

x509 -outform pem -in RootCA.pem -out RootCA.crt

req -new -nodes -newkey rsa:2048 -keyout server.key -out server.csr -subj "/C=US/ST=YourState/L=YourCity/O=Example-Certificates/CN= server.local"

// Make sure you change the file path for domains.ext file

x509 -req -sha256 -days 1024 -in server.csr -CA RootCA.pem -CAkey RootCA.key  -CAcreateserial -extfile "domains.ext" -out server.crt

// Give Export Password
pkcs12 -export -out sslkeystore.p12 -inkey server.key -in server.crt -name demoapp

Install certificates   

  1. Install RootCA.crt certificate.
  2. Double click on certificate and click on Install certificate.
  1. Select Local Machine and proceed.
  2. Select Trusted Root Certification Authorities as shown in the below image. 
**Select Trusted Root Certification Authorities****Select Trusted Root Certification Authorities**

Select Trusted Root Certification Authorities

  1. Repeat steps 2-4 to install server.crt certificate.

DNS Aliasing

  • Make an entry in hosts file.

    For Windows [C:\Windows\System32\drivers\etc\hosts]

127.0.0.1 identitydemo.acmeinc.com

SSL Configuration

This section is applicable for both Self Signed SSL and Public SSL certificates.

  • Copy the .p12 file (generated in this step) and place it under resources folder .\Spring-boot\src\main\resources
  • Create a new folder named ssl under angular project. .\angular
  • Now move server.crt and server.key files (generated in this step) to ssl folder under angular project.
  • If you have any existing .crt and .key files, rename it to server.crt and server.key.

Update Configuration Files in sample app

Update application.yml file

  • Update placeholder values in application.yml file located at identity-demo-angular/spring-boot/src/main/resources/application.yml.
    • spring.datasource.password - The Custom Database password configured at the time of MySQL server installation.
    • server.ssl.key-store - Mention key store value as classpath:sslkeystore.p12
    • server.ssl.key-store-password - Mention the key store password entered for Export Password

Update environment.ts file

  • Update placeholder values in environment.ts file located at identity-demo-angular/angular/src/environments/environment.ts.
    • apiFqdn - Mention The Fully Qualified Domain Name.
    • oauthAppId - Mention the Application ID of the OAuth client app created here.
    • oauthScope - Mention the scope which is created here.

Update index.html file

  • Replace <YOUR_TENANT_FULLY_QUALIFIED_DOMAIN_NAME> value with the fully qualified domain name in index.html file located at identity-demo-angular/angular/src/index.html.

Build and Run

To Build and Run Angular Java application refer below.

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 administrator.
mvn spring-boot:run

With all the above steps, the environment should be ready for the Angular Java Sample App.

Open https://identitydemo.acmeinc.com:4200 on browser, Configure Settings and access web application.