hackthings / refarch-caseportal-app

Case Inc Portal App

In this project we are presenting how to develop an Angular 5 single page application using a Test Driven Development approach. The Back end For Front end is done using nodejs / expressjs.

We are covering the following:

• use angular CLI to create modules, components and service for the user interface
• use karma and jasmine to test driven each components

This project is part of the 'IBM Integration Reference Architecture' suite, available at https://github.com/ibm-cloud-architecture/refarch-integration and implements the 'cloud native' web application with a set of features to demonstrate all the use case for hybrid cloud, cognitive and analytics. It should be considered as an internal portal application for CASE Inc internal staff to access a set of internal features.

Target audiences

The main target of this project and all the related content is developer, who wants to get a concrete implementation that is more than a simple hello world or a light proof of concepts as it covers:

• Classical Angular 5 single page application served by a nodejs app. We tried to add some tricks we are discovering on Angular.
• Implement the back end for front end logic inside the nodejs, expressjs middleware framework
• How to use a Test Driven Development approach for Angular app development.
• How to access API defined in API Connect and deploy on API gateway on premise or on ICP
• How to integrate with secure gateway when deployed on public cloud to access on-premise servers
• How to package all this as docker image
• How to define helm chart for IBM Cloud Private and kubernetes cluster deployment.

Table of Contents

• Introduction
• Pre Requisites
• Build
• Run
  • Locally
  • IBM Cloud as cloud foundry
  • IBM Cloud container service
  • IBM Cloud Private
• Code explanation
• Security
• devops
• Compendium

Introduction

This application illustrates how to plug and play different Angular modules with different back ends of IBM Cloud reference architecture, and specifically addresses:

• the inventory management feature to demonstrate hybrid integration as presented in the hybrid integration reference architecture center web site. This is a simple front end to manage old computers inventory, which is persisted in DB2, exposed via SOAP data access layer service, and with ESB mediation flow and API management. The Angular code is under src/app/features/inventory folder, and for the server part it is in server/routes/feature/inventory.js.
• how to support login with a LDAP server running on-premise and exposed via IBM API connect: Angular feature in src/app/features/login and corresponding server code in passport.js, see this article for details
• how to develop with Angular a simple user interface, with the master-detail pattern for Item and Inventory.
• how to integrate with back end, on-premise services using secure gateway when deployed on IBM Cloud public.
• how to proxy Watson Conversation
• how to deploy the app as Cloud Foundry on IBM Cloud, or docker container on IBM Cloud Container or Helm charts on IBM Cloud Private
• how to use Jenkins for continuous integration and deployment

The current top level view of the home page of this application looks like:

For public cloud deployment the application is up and running at the following address: http://caseincapp.mybluemix.net/. When deployed on IBM Cloud Private the URL is http://portal.brown.case. You will need some DNS or hosts mapping to support this direct access.

Pre-requisites

The common pre-requisites for the integration solution are defined here, so be sure to get them done.

• Clone the current repository, or if you want to work on the code, fork it in your own github repository and then clone your forked repository on your local computer. If you used the fork-repos.sh script from the Integration solution main repository, you are already set.

git clone https://github.com/ibm-cloud-architecture/refarch-caseportal-app
cd refarch-caseportal-app
npm install

• You need to install Angular 5 command line interface if you do not have it yet: see the cli.angular.io website

sudo  npm install -g @angular/cli

on Mac, as a global install you need to be root user or a "sudoer" user.

• As we are using docker to build different images, you need docker engine on your laptop.

Build

To build the angular app locally run the command:

$ ng build

When involving a continuous integration using Jenkins the jenkins file executes the scripts defined in the scripts folder. The stages are build, and deploy to ICP. See jenkins file.

When compiling the angular typescripts the javascript code generated is saved under dist folder.

Run

We are proposing multiple deployment and execution environments:

• run locally using npm run start or node server/server, then load the http://localhost:6100 URL in your web browser.
• run the application in IBM Cloud Container service
• run the application in IBM Cloud Private
• run the application as a cloud foundry app on IBM Cloud

Run the application locally

To start the application using node monitoring use the command:

npm run dev

The trace should display a message like below with the url to use

[1] starting `node server/server server/server`
[1] Server v0.0.2 starting on http://localhost:6100

Point your web browser to the url: http://localhost:6100 to get access to the user interface of the home page.

The demonstration script is described in this note

Run on IBM Cloud as cloud foundry app

To avoid conflict with existing deployed application you need to modify the Manifest.yml file with a new host name.

  host: yourcaseincapp

and define your own conversation support.

Use the set of IBM Cloud CLI commands to upload the application:

cf login api.ng.bluemix.net
cf push

This should create a new cloud foundry application in your IBM Cloud space as illustrated by the following screen copy.

Deploy on Kubernetes and minikube VM

See the note here

Deploy the CaseInc Portal App in IBM Cloud Kubernetes Service

A dockerfile is defined in the root project folder to build a docker image from the node:alpine official image. The docker file is simple and use the port 6100.

MAINTAINER https://github.com/ibm-cloud-architecture - IBM
WORKDIR /caseportal
COPY . /caseportal
RUN cd /caseportal
RUN npm install
EXPOSE 6001
CMD node server/server.js

• You first need to be sure the Angular UI Typescript files are compiled. We have developed a simple gradle file for that. Execute the following command to compile the UI

./gradlew build

** To build the docker image use the following command: The . represents the current project folder where.

$ docker build -t case/webportal .
# the image case/webportal should be visible in you local repository
$ docker images

Optionally you may want to run it locally: instead of using the npm run dev command used during pure development phase, use the command:

docker run -d -p 6100:6100 -t case/webportal

• push the image to IBM Cloud registry: Once built, the image is uploaded to the IBM Cloud private container registry registry.ng.bluemix.net/<namespace>/<imagename>.

To get the list of namespace defined into your account use:

$ bx cr login
$ bx cr info                                    

For example the namespace we are using is ibm_nls so we need to tag the image and upload it, using:

docker tag case/webportal  registry.ng.bluemix.net/ibm_mls/casewebportal

docker push registry.ng.bluemix.net/ibm_mls/casewebportal

Once the image is uploaded it is possible to build a Kubernetes Deployment

$ bx login -a https://api.ng.bluemix.net
# initialize your access to the cluster
$  bx cs init
# Get the list of cluster: you should have one per region.
$ bx cs clusters
>OK
Name            ID                     State    Created                    Workers   Datacenter   
brown-cluster   664c66d603e            normal   2017-07-18T14:59:40+0000   1         hou02

Set the cluster as the context for your interaction session

$  bx cs cluster-config brown-cluster

> export KUBECONFIG=/Users/jeromeboyer/.bluemix/plugins/container-service/clusters/brown-cluster/kube-config-hou02-brown-cluster.yml

To be able to use the kubernetes command line interface kubectl you need to execute the export

$ export KUBECONFIG=/Users/jeromeboyer/.bluemix/plugins/container-service/clusters/brown-cluster/kube-config-hou02-brown-cluster.yml

and deploy the container to the pods. The commands are:

# Create a Deployment and run it on the pods
$ kubectl run caseportal --image=registry.ng.bluemix.net/ibm_mls/caseportal --port=6100

Run on IBM Cloud Private

see this note

Compendium

• Angular 2.4 tutorial from the angular site this tutorial is updated with new release and covers the most important features used in our angular app.
• NG Develop to learn the latest news on Angular and its tutorial