Installing Protos

Type the following commands in the terminal to install protos in ubuntu

1) PROTOC_ZIP=protoc-3.3.0-linux-x86_64.zip
2) curl -OL https://github.com/google/protobuf/releases/download/v3.3.0/$PROTOC_ZIP
3) sudo unzip -o $PROTOC_ZIP -d /usr/local bin/protoc
4) rm -f $PROTOC_ZIP

Resolving version conflicts in Angular

This blog resolves the problem of dealing with the version conflicts in Angular (Ex: You have installed angular 6 and for instance you come across a situation where you would like to run an angular project developed in Angular 5 without removing the global version of Angular 6).

Here is the procedure to resolve the issue:
Solution 1:
1)install npm i node-sass (OR) install npm i node-sass@[version]
Ex: install npm i node-sass@4.8.1(Note: 4.8.1 is a version of node-sass, you can put your version of the project to be executed)
2)npm add @angular/cli@[version] –save-dev
Ex: npm add @angular/cli@1.7.4 –save-dev (Note: 1.7.4 is the version to install Angular 5).

Solution 2:
1)For sass problem:
install npm i node-sass (OR) install npm i node-sass@[version]
Ex: install npm i node-sass@4.8.1(Note: 4.8.1 is a version of node-sass, you can put your version of the project to be executed)
2)For Undefined is not a function follow this procedure:
a)npm remove -g @angular/cli
b)npm install -g @angular/cli@[version]
Ex: npm install -g @angular/cli@1.7.4 (Note: 1.7.4 is the version to install Angular 5)
c)npm remove @angular/cli
d)npm add @angular/cli@[version] –save-dev
Ex: npm add @angular/cli@1.7.4 –save-dev (Note: 1.7.4 is the version to install Angular 5).

The 92% chunk asset optimisation problem nodejs Angular5

At times running Angular Application on an environment which is fresh can be daunting. We may end up with errors which are not in alignment towards the development. One such of a case is the 92% chunk asset optimization problem when running a build of the Angular application.

On AWS hooked up an ec2-instance with Ubuntu 16.04, every thing works fine until you run the command npm run build.

We are stuck in an exception, 92% chunk asset optimisation and the dist directory is not created. Though we end up looking information on the development stack, but at times it could also be related to the Operating System SWAP space.

If the SWAP space on the OS if short or not available, this error shows up and to go around the error follow the instructions to check and allocate swap space on ubuntu. Hopefully this should help in getting around the problem.

One of the easiest way of increasing the responsiveness of your server and guarding against out of memory errors in your applications is to add some swap space. Swap is an area on a hard drive that has been designated as a place where the operating system can temporarily store data that it can no longer hold in RAM.

Basically, this gives you the ability to increase the amount of information that your server can keep in its working “memory”, with some caveats. The space on the hard drive will be used mainly when space in RAM is no longer sufficient for data.

The information written to disk will be slower than information kept in RAM, but the operating system will prefer to keep running application data in memory and use swap for the older data. Overall, having swap space as a fall back for when your system’s RAM is depleted is a good safety net.

sudo swapon -s

Another command for the same thing

free -m

Before we do this, we should be aware of our current disk usage. We can get this information by typing:

df -h

Although there are many opinions about the appropriate size of a swap space, it really depends on your personal preferences and your application requirements. Generally, an amount equal to or double the amount of RAM on your system is a good starting point.

Since my system has 4 Gigabytes of RAM, and doubling that would take a significant chunk of my disk space that I’m not willing to part with, I will create a swap space of 4 Gigabytes to match my system’s RAM.

Creating SWAP File
sudo fallocate -l 4G /swapfile
Check by running the following command that the SWAP file was created and space was reserved
ls -lh /swapfile
Enable SWAP Fiile
sudo mkswap /swapfile
Verfiy Permissions are set correctly
ls -lh /swapfile
Now that our file is more secure, we can tell our system to set up the swap space by typing:
sudo swapon /swapfile

We can verify that the procedure was successful by checking whether our system reports swap space now:

sudo swapon -s
Filename                Type        Size    Used    Priority
/swapfile               file        4194300 0       -1

We have a new swap file here. We can use the free utility again to corroborate our findings:

free -m

https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-ubuntu-14-04

My HandBook on Angular

1) install Angular CLI: npm install -g @angular/cli
    [Note:Sometimes forms and http packages will not be installed inorder to do so, run the following commands:
    a) npm install -g forms/npm install forms(for installing forms package in node_module).
    b) npm install -g http/npm install http(for installing http package in node_module).
        -g stands for global, which simply means global installation.]
2) Create New Application: ng new project-name/application-name[Ex:angular-tour-of-heroes]
     (Note: The name of the project must not have white space, instead use – )
3) Serve the application/Run the Application:
    Go to the project directory and launch the application.
    cd project-name/application-name[Ex:angular-tour-of-heroes]
    ng serve – – open/-o[To open/run the Project/Application]
    (Note:The ng serve command builds the app, starts the development server, watches the source files, and rebuilds        the app as you make changes to those files.
    The – – open flag opens a browser to http://localhost:4200/)
4) Change the application title:
    Open the project in your favourite editor or IDE and navigate to the src/app folder.
    You’ll find the implementation of the shell AppComponent distributed over three files:
    app.component.ts— the component class code, written in TypeScript.
    app.component.html— the component template, written in HTML.
    app.component.css— the component’s private CSS styles.
5) Creating Components:
    ng generate component [component-name] / ng g c [component-name]
    ng generate component /sub-folder1/2/…/[component-name]
    Creating a component without a spec file:
    ng generate component [component-name] – – spec=false / ng g c [component-name] – – spec=false
          (OR)
    ng generate component [component-name] – – spec false / ng g c [component-name] – – spec false.
    Creating a component without a spec file, and without being imported  in app.module.ts:
    ng generate component [component-name] – – spec=false / ng g c [component-name] – – spec=false – – skip-import
          (OR)
   ng generate component [component-name] – – spec false / ng g c [component-name] – – spec false – – skip-import
6) Command prompt:
    a)open: Ctrl + ~
    b) close: Ctrl + C
    c) clear
7) To change the port of execution: ng serve -p [portnumber]
    (Ex: ng serve -p 3000)
    (note: give any port number, default port-number is:4200)
     To host and execute:
     ng serve – – host 0.0.0.0 – – open (OR)
     ng serve -h 0.0.0.0 -o (to run on default port)
     ng serve -h 0.0.0.0 -p 3000 -o(to run on user defined port)
8) For statement:The syntax is *ngFor=”let <value> of <collection>”.
     [Ex: *ngFor=”let hero of heroes”]
9)  Creating Services: ng generate service [service-name] / ng g s [service-name]
     (Ex: ng generate service hero)
10) Providing the service(i.e regestering service into app.module.ts):
      ng generate service [service-name] – – module=app / ng g s [service-name] – – module=app
     (Ex: ng generate service hero – – module=app)
11) Creating and providing service:
      ng generate service [service-name] – – module=app / ng g s [service-name] – – module=app
      (Ex: ng generate service hero – – module=app)
12) Creating Routing and adding it to the app.module.ts:
       ng generate module [routonFetchData()ing-page-name] – – flat – – module=app
       (Ex: ng generate module app-routing – – flat – – module=app)
       [Note:- – flat puts the file in src/app instead of it’s own folder.
       – – module=app tells the CLI to register it in the imports array of the AppModule.]
       A typical Angular Route has two properties:
       path: a string that matches the URL in the browser address bar.
       component: the component that the router should create when navigating to this route.
13) Install the In-Memory Web API package from npm:
       npm install angular-in-memory-web-api – – save
14) Note:
      If you neglect to subscribe(), the service will not send the delete request to the server!
      As a rule, an Observable does nothing until something subscribes!
      Confirm this for yourself by temporarily removing the subscribe(),
      clicking “Dashboard”,  then clicking “Heroes”. You’ll see the full list of heroes again.
      AsyncPipe
      As expected, the *ngFor repeats hero objects.
      Look closely and you’ll see that the *ngMatPaginatorFor iterates over a list called heroes$, not heroes.
      <li *ngFor=”let hero of heroes$ | async” >
      here, hero is a temporary variable, which must be declared with the help of the keyword  “let”.
      “of” is a keyword used to iterate through a specified set of values.
       heroes is the one consisting of a set of values.
       The $ is a convention that indicates heroes$ is an Observable, not an array
       The *ngFor can’t do anything with an Observable.
       But, there’s also a pipe character ( | ) followed by async, which identifies Angular’s AsyncPipe.
       The AsyncPipe subscribes to an Observable automatically so you won’t have to do so in the component class.
14) Installing Bootstrap: npm install – – save bootstrap/npm install – – save bootstrap@3
      {Note: in installing bootstrap@3, the notation @3 refers to installing of bootstrap version 3]
15) Using Bootstrap in our project after installation:
      goto project explorer->open project->src->{}.angular-cli.json->”styles”: ->
      then give the reference of bootstrap file as follows:
       “../node_modules/bootstrap/dist/css/bootstrap.min.css”
       Example:
       “styles”: [
       “../node_modules/bootstrap/dist/css/bootstrap.min.css”,
       “styles.css”
       ],
16) Using ng Model:
      Angular $ does’nt have the default library in order to load ng Model in order to do so,
      we must import the following library in AppModule.ts.
     AppModule.ts:
     import {FormsModule} from ‘@angular/forms’ and in imports section of @NgModule add  FormsModule.
     Declaration of ngModel in html page: <input type=”text” [(ngModel)]=”name”>
      [Note:in order to give dynamic value to the ngModel type, declare it in .ts file as [ngModel – name]=[‘ ‘]
      (Ex: name=’ ‘)]
      [Note2: the input tag designated with a void value must not be have a closing tag.
      Ex:<input type=”text” [(ngModel)]=”name”>
      in the above example the input tag is not assigned a value, hence it has a void value,
      Therefore, it must not have a closing tag.]
16) Plugins recommended: emmet
17) important imports to be added to app.module.ts:
      import { NgModule } from ‘@angular/core’;
      import { BrowserModule } from ‘@angular/platform-browser’;
      import{FormsModule} from ‘@angular/forms’;
      import{HttpModule} from ‘@angular/http’;
      under @NgModule in imports section:
      imports: [
      BrowserModule,
      FormsModule,
      HttpModule
      ],
18) if-statement syntax: *ngIf [Note:must use * as a prefix to ngIf, * is used since it is structural.
     *ngIf must be used the attributes like <p> tag]
      Ex:<p *ngIf=”ServerCreated”>Server was created, server name is {{ServerName}}</p>
19) Install Angular Augury extention to chrome for a a better debugging experience.
20) Simplified declarations using Constructors:
      Before:
          ex:ingredient.model.ts :-
               export class Ingredient {
               public name: string;
               public amount: number;
               constructor(name: string, amount: number) {
               this.name = name;
               this.amount = amount;
              }
           }
       After:
         ex:ingredient.model.ts :-
              export class Ingredient {
              constructor(public name: string, public amount: number) {
              }
            }
21) Lifecycle of Components:
   a) ngOnChanges: Called after a boundinput property changes.
   b) ngOnInit: Called once the component is initialized.
   c) ngDoCheck: Called during every change detection run.
   d) ngAfterContentInit: Called after content(ng-content) has been projected into view.
   e) ngAfterContentChecked: Called every time the projected content has been checked.
   f) ngAfterViewInit: Called after the component’s view (and child views) has been itialized.
   g) ngAfterViewChecked: Called every time the view (and child views) has been checked.
   h) ngOnDestroy: Called once the component is about to be destroyed.
22) Creating a Directive: ng generate directive [directive-name] / ng g d [directive-name]
      Ex: ng g d my-directive
23) if compile on save of visual studio does not work try these command:
       ng set – – global warnings.versionMismatch=false
                                              (OR)
       The problem may be related with Inotify Watches Limit on Linux.
       To solve to issue increase the watches limit to 512K
       sudo sysctl fs.inotify.max_user_watches=524288
       sudo sysctl -p – – system
24) Kill a program currently running in port 4200 commands:
       sudo kill $(sudo lsof -t -i:4200)
                        (OR)
       sudo kill `sudo lsof -t -i:4200`
25) Installing angular material complete guide:
       https://alligator.io/angular/angular-material-2/
26) Example for various angular material controls:
       https://stackblitz.com/edit/angular-material2-formgroup-issue?                                                 file=app%2Fapp.component.html
26) Installing firebase SDK:
       npm install – – save firebase
       Once installation is done goto appComponent.ts, then go to ngOnInit method,
       and then type the following code:
          ngOnInit() {
          firebase.initializeApp({
          apiKey: “AIzaSyCodykBIemB9N2FOn7PU93OIoRc1CB3SNY”,
          authDomain: “ng-recipe-book-505417.firebaseapp.com”,
        });
      }
     Note: the apiKey and authDomain veries for every user in order to get your own goto
               firebase console, then click on Authentication tab located on the left hand side,
               then in the authentication page click on web setup tab,
               then copy apiKey and authDomain.
27) Installing MySQL WorkBench:

28) Upload your csv file to a location and get the csv file data. Please try this:-

Component.html:-

<input type="file" class="upload" (change)="changeListener($event.target.files)">

Component.ts:-

public changeListener(files: FileList){
  console.log(files);
  if(files && files.length > 0) {
     let file : File = files.item(0); 
       console.log(file.name);
       console.log(file.size);
       console.log(file.type);
       let reader: FileReader = new FileReader();
       reader.readAsText(file);
       reader.onload = (e) => {
          let csv: string = reader.result;
          console.log(csv);
       }
    }
}

29)ng serve –host 0.0.0.0 -p 4200

30)running on pm2:

a) first run npm run build i.e npm i && npm run clean && ng build –prod(builds the project and creates a dist folder)

b) pm2 start datacaptive-scrapes-ui.js(pm2 start js file/ process name, note that in js file we have specified the project to run on port 3000)

c) pm2 list(lists all the process that are running)

d) pm2 stop datacaptive-scrapes-ui.js(pm2 stop js file/process name)

e) pm2 delete datacaptive-scrapes-ui(note it does not have the js extension, this command is used to delete the process)

Setting up a Reverse Proxy Server

Following our previous Process Manager for Nodejs Applications,  article, here we would get to see a walk through of how to set up a reverse proxy server for our nodejs application,

Now that our nodejs application is running, and listening on a private IP address, we need to set up a way where end users  access it. We will set up an Nginx web server as a reverse proxy. This tutorial will set up an Nginx server from scratch.

On the web server, let’s update the apt-get package lists with this command:

  • sudo apt-get update

Then install Nginx using apt-get:

  • sudo apt-get install nginx

Now open the default server block configuration file for editing:

  • sudo vi /etc/nginx/sites-available/default

Delete everything in the file and insert the following configuration. Be sure to substitute your own domain name for the server_name directive (or IP address if you don’t have a domain set up), and the app server private IP address for the APP_PRIVATE_IP_ADDRESS. Additionally, change the port (8080) if your application is set to listen on a different port:

/etc/nginx/sites-available/default
server {
    listen 80;

    server_name example.com;

    location / {
        proxy_pass http://APP_PRIVATE_IP_ADDRESS:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

This configures the web server to respond to requests at its root. Assuming our server is available at example.com, accessing http://example.com/ via a web browser would send the request to the application server’s private IP address on port 8080, which would be received and replied to by the Node.js application.

You can add additional location blocks to the same server block to provide access to other applications on the same web server. For example, if you were also running another Node.js application on the app server on port 8081, you could add this location block to allow access to it via http://example.com/app2:

Nginx Configuration — Additional Locations
    location /app2 {
        proxy_pass http://APP_PRIVATE_IP_ADDRESS:8081;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

Once you are done adding the location blocks for your applications, save and exit.

On the web server, restart Nginx:

  • sudo service nginx restart

Assuming that your Node.js application is running, and your application and Nginx configurations are correct, you should be able to access your application via the reverse proxy of the web server. Try it out by accessing your web server’s URL (its public IP address or domain name).

 

 

Process Manager for Nodejs Applications

In our last article where in we created our first application on nodejs, we mentioned the fact that we cannot stop the nodejs application once started if we want to service requests. While it can turn out to be pretty difficult to start and stop, if we are going to have multiple nodejs applications running.

With Process Manager we can manage & daemonize all the nodejs applications. PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks. Refer https://www.npmjs.com/package/pm2

To install PM, we will be using NPM (Node Packaged Modules) which is basically a Package Manager for Node Modules. This is installed by default with nodejs.

To install PM on our app server issue the following command

user@LT-201:~/projects/trials/nodejstrials$ sudo npm install pm2 -g
[sudo] password for user:
/usr/local/bin/pm2 -> /usr/local/lib/node_modules/pm2/bin/pm2
/usr/local/bin/rundev -> /usr/local/lib/node_modules/pm2/bin/rundev
/usr/local/bin/pm2-dev -> /usr/local/lib/node_modules/pm2/bin/pm2-dev
/usr/local/bin/pm2-docker -> /usr/local/lib/node_modules/pm2/bin/pm2-docker
/usr/local/lib
`– pm2@2.4.2
+– async@1.5.2
+– blessed@0.1.81
+– chalk@1.1.3
| +– ansi-styles@2.2.1
| +– escape-string-regexp@1.0.5
| +– has-ansi@2.0.0

To start the application in the back ground,  using PM2, it also adds your application to PM2’s process list, which is shown every time you start an application:


user@LT-201:~/projects/trials/nodejstrials$ pm2 start hello.js

————-

PM2 process manager

__/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
_\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
_\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
_\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
_\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
_\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
_\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
_\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
_\///______________\///______________\///__\///////////////__

Getting started

Documentation
http://pm2.io/

Start PM2 at boot
$ pm2 startup

Daemonize Application
$ pm2 start <app>

Monitoring/APM solution
https://app.keymetrics.io/

————-

[PM2] Spawning PM2 daemon with pm2_home=/home/user/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /home/user/projects/trials/nodejstrials/hello.js in fork_mode (1 instance)
[PM2] Done.
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤
│ hello    │ 0  │ fork │ 14796 │ online │ 0       │ 0s     │ 9%  │ 21.3 MB   │ disabled │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘
Use `pm2 show <id|name>` to get more details about an app

To stop an application

user@LT-201:~/projects/trials/nodejstrials$ pm2 stop hello.js
[PM2] Applying action stopProcessId on app [hello.js](ids: 0)
[PM2] [hello](0) ✓
┌──────────┬────┬──────┬─────┬─────────┬─────────┬────────┬─────┬────────┬──────────┐
│ App name │ id │ mode │ pid │ status  │ restart │ uptime │ cpu │ mem    │ watching │
├──────────┼────┼──────┼─────┼─────────┼─────────┼────────┼─────┼────────┼──────────┤
│ hello    │ 0  │ fork │ 0   │ stopped │ 0       │ 0      │ 0%  │ 0 B    │ disabled │
└──────────┴────┴──────┴─────┴─────────┴─────────┴────────┴─────┴────────┴──────────┘
Use `pm2 show <id|name>` to get more details about an app

Information about an application can be found at

user@LT-201:~/projects/trials/nodejstrials$ pm2 info hello.js

To restart application

user@LT-201:~/projects/trials/nodejstrials$ pm2 restart hello.js

To PM2 process monitor can be viewed using the following command

user@LT-201:~/projects/trials/nodejstrials$ pm2 monit

 

Applications that are running under PM2 will be restarted automatically if the application crashes or is killed, but an additional step needs to be taken to get the application to launch on system startup (boot or reboot). Luckily, PM2 provides an easy way to do this, the startup subcommand.

The startup subcommand generates and configures a startup script to launch PM2 and its managed processes on server boots. You must also specify the platform you are running on, which is ubuntu, in our case:

  • pm2 startup ubuntu

The last line of the resulting output will include a command (that must be run with superuser privileges) that you must run:

Output:
[PM2] You have to run this command as root
[PM2] Execute the following command :
[PM2] sudo su -c "env PATH=$PATH:/opt/node/bin pm2 startup ubuntu -u sammy --hp /home/sammy"

Run the command that was generated (similar to the highlighted output above) to set PM2 up to start on boot (use the command from your own output):

  • sudo su -c “env PATH=$PATH:/opt/node/bin pm2 startup ubuntu -u sammy –hp /home/sammy”
 Move to the next article to get to learn How to Setup a Reverse Proxy Server

My First Node.js Application

This article is in continuation to the Nodejs Series. To refer how to install Nodejs on Ubuntu follow the link Setting up Nodejs Environment on Ubuntu

Hello world application that returns “Hello World” to any HTTP requests.

Move to your projects directory

user@LT-201: mkdir /projects/trials/nodejstrials

create a helloworld.js using the vi editor

user@LT-201:vi helloworld.js

Write the code to return a Hello World string with a 200 Status Response

var http=require(‘http’);
http.createServer( function (req,res) {
res.writeHead(200,{‘Content-type’: ‘text/plain’});
res.end(‘Hello World\n’);
}).listen(8080, ‘127.0.0.1’);
console.log(‘Server running at http://127.0.0.1:8080’);

The nodejs application simply listens to a particular port on a given IP Addreess. On receiving a request on that IP Address and Port, it simply returns the response Hello World with a 200 status code.

user@LT-201:~/projects/trials/nodejstrials$ node -v
v6.10.0

To test the application which has been written issue the following node command on the app server. The command starts the Nodejs Server at the configured IP Address and Port #
user@LT-201:~/projects/trials/nodejstrials$ node hello.js
Server running at http://127.0.0.1:8080

While the app server is running, we cannot issue any new node commands until we break it using CTRL + C

To test the application from a web server, issue a curl command from a new terminal

user@LT-201:~$ curl http://127.0.0.1:8080
Hello World

In case if you stop the nodejs application and then issue a curl command in the other terminal

user@LT-201:~$ curl http://127.0.0.1:8080
curl: (7) Failed to connect to 127.0.0.1 port 8080: Connection refused

In the next article we would see to how to configure NPM