DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Coding
  3. JavaScript
  4. Angular on PCF and Other Production Servers

Angular on PCF and Other Production Servers

Get an Angular application running in production on a Node.js-based server and an NGINX-based server. The processes for which can be followed when using PCF as well.

Rajesh Bhojwani user avatar by
Rajesh Bhojwani
·
Aug. 31, 18 · Tutorial
Like (3)
Save
Tweet
Share
10.07K Views

Join the DZone community and get the full member experience.

Join For Free

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.

AngularJS application Command (computing) Node.js Production (computer science)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Distributed Tracing: A Full Guide
  • How Elasticsearch Works
  • 5 Steps for Getting Started in Deep Learning
  • Use AWS Controllers for Kubernetes To Deploy a Serverless Data Processing Solution With SQS, Lambda, and DynamoDB

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: