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 Video Library
Refcards
Trend Reports

Events

View Events Video Library

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
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

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • How To Use the Node Docker Official Image
  • Cypress Web Automation
  • Deploy a Hyperledger Fabric v2 Web App Using the Node.js SDK
  • Building a Full-Stack Resume Screening Application With AI

Trending

  • Data Storage and Indexing in PostgreSQL: Practical Guide With Examples and Performance Insights
  • Breaking to Build Better: Platform Engineering With Chaos Experiments
  • Designing AI Multi-Agent Systems in Java
  • AI's Cognitive Cost: How Over-Reliance on AI Tools Impacts Critical Thinking
  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.

By 
Rajesh Bhojwani user avatar
Rajesh Bhojwani
·
Aug. 31, 18 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
11.0K 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.

Related

  • How To Use the Node Docker Official Image
  • Cypress Web Automation
  • Deploy a Hyperledger Fabric v2 Web App Using the Node.js SDK
  • Building a Full-Stack Resume Screening Application With AI

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

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

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: