Angular on PCF and Other Production Servers

Background

Angular has become the primary choice for developers to build a web and SPA application. However, most of the tutorials available talk about running the Angular app using "ng serve." "ng serve" is a command provided by the AngularJS CLI. It will  serve a project that is 'Angular CLI aware,' i.e. a project that has been created using the Angular CLI,  particularly using:  ng new app-name 

This is useful when you are developing the app on your system and want to see the changes reflected in browser while coding. However, once the application is ready to deploy, you'll need to host it on a web server like Node.js or NGINX. PCF also supports buildback for nodejs and nginx.

Let's add a little complexity here. With Angular 6, we'll be using TypeScript files for developing code. If you don't know, TypeScript is a language created by Microsoft, which gets compiled into JavaScript. As the name itself suggests, TypeScript brings type checking capabilities into JavaScript.

Once you have typscript (.ts) files, they need to be compiled to .js files and are supposed to be deployed on a web server to run. 

Let's talk about how to deploy on Node.js first and then NGINX in detail.

Node.js Server

Step 1: Run the 'ng build' Command

The Angular CLI has a command ng build. This command builds the artificat (compiles .ts files and converts them to .js files) and stores all files including index.html in the  /dist  directory.

Step 2: Create a server.js File

To start a Node.js server, we need a JavaScript file which will have Node.js code to listen the port 8080 and route each request to the /index.html residing in /dist directory created by Step 1. See the sample code below:

//server.js file
var express = require('express');
var app = express(); 
const path = require('path');
var rootPath = path.normalize(__dirname + '/dist/');

var port = process.env.PORT || 8080; 

app.use(express.static(rootPath)); 

app.get('*', (req, res) => {
  res.sendFile(rootPath + '/index.html');

});

app.listen(port);
console.log("App listening on port " + port);

Step 3: Run the 'npm start' Command

To start the application, a server.js file has to be loaded by the Node.js server. The npm start command is used for the same purpose. This command will check what script is configured in package.json and run those commands as per the script. In this case, the script command is:

 "start": "npm install && node server.js" 

//package.json file
{
  "name": "angular-ui-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "npm install && node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "angular-pdf": "^2.0.0",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.8",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3",
    "@angular-devkit/build-angular": "~0.6.8"
  }
}

Once these three steps are completed, the server.js application will be initialized and route each request hitting the following URL: https://<ip>:8080 to /dist/index.html.

This way, our Angular application can be hosted on a Node.js server.

NGINX Server

Step 1: Download the NGINX Server and Start it

You can download the nginx server from the below site:

https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/

Step 2: Configure the nginx.conf File

We need to ensure that the root field points to the /dist folder. It will pick up the index.html file. Restart the NGINX server to reflect the changes.

//nginx.conf
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    root /var/www/frontend/dist;

    try_files $uri $uri/ index.html;

    error_log /var/log/nginx/angular4_error.log;
    access_log /var/log/nginx/angular4_access.log;
}

Step 3: Build the Angular Application

Use the ng build --prod command and it will compile and build the artificats in the /dist folder.

Step 4: Run the Application

Hit the application with the NGINX domain name or public IP address. 

In this way, an Angular application can be hosted on an NGINX server.

So both the Node.js and NGINX setup discusseed above work in PCF the same way. There is no extra configuration needed. 

That's all for this post. Please do let me know your views through the comments.