System

Node app Deployment and development process Manager

For development , its better to use nodemon

To install

npm install -g nodemon

To run

nodemon server.js

 

For Production , For most cases we can use forever

To Install

[sudo] npm install forever -g

To run

forever start app.js

forever start -a server.js

forever stop server.js

forever list

To see continuous Logs in terminal

forever logs server.js -f

Standard
AngularJS

MEAN.io – Installing in Windows 8.1 (MEAN Stack)

MEAN.io is becoming a Popular Modern Framework for MEAN Stack(Mongo , Express , Angular , Node). I have recently tried it out and had real fun with it , such an awesome Boilerplate for MEAN Stack.

banner-top-ninja

Most of the Developers around the world work on MAC/LINUX when they are with MEAN. But I thought why not to write a Full Process for Windows Users . Cool , lets do the whole thing to get running an MEAN.io app in Win8.1.

First , We need to install the Core Node And Mongo.

1.Lets install Node first.Go to Node Download Center and Download Windows Installer (.msi) based on your OS Architecture and just Install with few Clicks.

2.Lets Install MongoDB , to see How to Install Click Here

3.Some of Mean.io dependencies uses node-gyp with supported Python version 2.7.3.

3.1.Install Python From here

Python

Python

3.2. Install Microsoft Visual Studio C++ 2012/13 for Windows Desktop (Express version works well)

3.3.Install node-gyp

npm install -g node-gyp

4. Install Gulp and Bower

npm install -g gulp

npm install -g bower

5.Install the MEAN.io CLI

npm install -g mean-cli

6.Now create your own app

mean init myApp

cd myApp
npm install

7.To start you application run –

gulp

Alternatively, when not using gulp (and for production environments)

node server.js

And browse http://localhost:3000

You can see your Site , All done by the amazing Mean.io

Mean

Mean

Standard
Uncategorized

MongoDB Installation in Windows 8.1

1.Just go to MongoDB Download Center And download like the below picture.

MongoDb

2.Click and Start Installation.

Mongo Install Starts

Mongo Install Starts

3.Do the Complete Installation.

Mongo Complete

Mongo Complete

4.Go to the installed Directory and try to run Mongo Server mongod.exe , You will get exception like below.

Mongo Server mongod.exe

Mongo Server mongod.exe

5.Run the below command in terminal to create those Directories

mkdir c:\data\db
mkdir c:\data\log

6. Now try to run Mongo Server mongod.exe on terminal

C:\Program Files\MongoDB\Server\3.0\bin\mongod.exe

Depending on the security level of your system, Windows may pop up a Security Alert dialog box about blocking “some features” of C:\mongodb\bin\mongod.exe from communicating on networks. All users should select Private Networks, such as my home or work network and click Allow access.

Allow

7.Now run Mongo Client mongo.exe on another terminal

C:\Program Files\MongoDB\Server\3.0\bin\mongo.exe

Mongo Server Client

Mongo Server Client

MongoDB successfully installed.

Now lets install MongoDB as a Windows Service.

8. Now run the 3 below commands in Terminal.

echo logpath=c:\data\log\mongod.log> "C:\Program Files\MongoDB\Server\3.0\mongod.cfg"

echo dbpath=c:\data\db>> "C:\Program Files\MongoDB\Server\3.0\mongod.cfg"

sc.exe create MongoDB binPath= "\"C:\Program Files\MongoDB\Server\3.0\bin\mongod.exe\" --service --config=\"C:\Program Files\MongoDB\Server\3.0\mongod.cfg\"" DisplayName= "MongoDB" start= "auto"

Your Service is ready now.

To get mongo as CLI , add this to Environment Variable.

Mongo CLI

Mongo CLI

Standard
AngularJS, JavaScript

AngularJS One Time Binding Concept

Angular 1.3 added a new feature called One Time Binding . This is definitely an awesome enhancement for performance of an angular app.

We know , If a data changes in angular app, The $digest cycle checks for changes through watchers and gets the new value and renders the view. But if the app gets bigger with so many data , so many bindings , the $$watchers count increases with $digest loop size. Though in a large collection only few data got changed but the whole data gets rendered which is not good for performance.

One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value

The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expressions being watched makes the digest loop faster and allows more information to be displayed at the same time.

Lets see how we can do this in angular app.

<div>
        <h1>Angular OneTimeBinding</h1>
        <br />
        <table>
            <tr ng-repeat="profile in profiles">
                <td>
                    {{::profile.Id}}
                </td>
                <td>
                    {{::profile.Name}}
                </td>
                <td>
                    {{::profile.Address}}
                </td>
            </tr>
        </table>
        <br />

        <button ng-click="addProfiles()">addProfiles</button>
        <button ng-click="getWatchers()">getWatchers</button>

        <div>
            <h3>OneTimeBinding Watchers Count :::  {{totalWatchers}}</h3>
        </div>

    </div>

Here I added {{::}} this syntax for One Time Binding.

Lets see our Controller’s code-

app.controller('profileCtrl' , ['$scope' , function($scope){
    console.log('profileCtrl is running...');

    $scope.profiles = [
                    { Id: 1, Name: 'Masoom', Address: 'Dhaka1' },
                    { Id : 2 , Name : 'Talukdar' , Address : 'Dhaka2' },
                    { Id: 3, Name: 'Shahjada', Address: 'Dhaka3' }
    ];

    $scope.addProfiles = function () {
        var id = $scope.profiles.length + 1;
        $scope.profiles.push({ Id: id, Name: 'AAAA' + id, Address: 'Dhaka' + id });
    };

    $scope.getWatchers = function () {
        var watchers = ($scope.$$watchers) ? $scope.$$watchers.length : 0;
        var child = $scope.$$childHead;
        while (child) {
            watchers += (child.$$watchers) ? child.$$watchers.length : 0;
            child = child.$$nextSibling;
        }
        $scope.totalWatchers = watchers;
    };

}]);

Here If we add a new profile by clicking the addProfile Button , it will add a Row , but the Watcher Count will not increase as its One Time Binding But if we remove the OneTimeBinding Syntax , I will increase the count which hampers the performance.

And, if we do not use One Time Binding in Property Level , but in Collection level like below , then If we click and click addProfile button , it will add new item in the collection inside $scope , but the UI will not render the new Items coz we have used OneTimeBinding in the Collection/List Level.

<table>
            <tr ng-repeat="profile in ::profiles">
                <td>
                    {{profile.Id}}
                </td>
                <td>
                    {{profile.Name}}
                </td>
                <td>
                    {{profile.Address}}
                </td>
            </tr>
        </table>

Hope , It helps you.

Cheers

Standard
Uncategorized

Node : Express app with Swig

Today , I will write about a Template Engine for Express App.

And This is Swig – A simple, powerful, and extendable JavaScript Template Engine.

Its Data Binding Syntax is like Angular, And I liked it, its really simple and fun.

This is how we can configure Swig in our Express App-

var cons = require('consolidate');
 
var app = express();
app.engine('html', cons.swig);
app.set('view engine''html');
app.set('views', __dirname + "/views");
 
app.get('/'function (req, res) {
    res.render('index', { name: 'Shahjada' });
});
 
var server = app.listen(8080, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

And our html is like below as simple –

<h1>Hello {{name}}</h1>

 
Its easy , right ?

Cheeers

Standard
Uncategorized

NodeJS : Connect MongoDB and get Data from Collection

In any Web application , its important to connect to Database for data .

In MEAN , as we use MongoDB , so I will write code how a Node app can talk with MongoDB Database.

I have a Database named newDB and I have a collection named myColl in my local MongoDB server.

Like below , we can connect and get data from Mongo Server.

var MongoClient = require('mongodb').MongoClient;
MongoClient.connect('mongodb://localhost:27017/newDB'function(err , db) {
 
	if(err) {
		console.log(err);
		throw err;
	}
	
	db.collection('myColl').findOne({} , function(err , doc){
	
		if(err) {
			console.log(err);
			throw err;
		}
		console.dir(doc);
		db.close();
		//res.send(doc);
	});
 
	console.dir("Called FindOne");
});

Hope this Helps.

Standard
Uncategorized

ExpressJS – Configure Routing for Express App

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Express is the most popular Web Framework on Node . So, I planned to write on Express and personally I am a MEAN (Mongo, Express , Angular , Node) Stack fan and MEAN stack became much powerful in Modern Web World.

This article shows how we can configure the routing for an Express app.

var express = require('express');
var app = express();
 
app.get('/'function (req, res) {
	res.send("Home");
});
 
app.get('/profile'function (req, res) {
	res.send("Profile");
});
 
app.get('/contact'function (req, res) {
	res.send("Contact");
});
 
app.get('*'function (req, res) {
	res.send("Not Found" , 404);
});
 
var server = app.listen(3001, function() {
	var host = server.address().address;
	var port = server.address().port;
	console.log('Express app listening at http://%s:%s', host, port);
});

The code is itself self explanatory . I have created 3 Routes and if User hits any other route beside these , Express will return “Not Found” with 404 Status which has been maintained by *

Here we can see server is listening to 3001 port , make sure to use that port which is empty

app takes 2 arguments , first is the route path and second is the callback which would be fired when that Route has been hit by User.

Hope this helps.

Cheers

Standard
AngularJS

Apology for not being regular here !

I know and I agree , I was not so much active in writing articles in 2014 ,In fact I was too much busy/sad/frustrated with so many things( New Language/frameworks are also parts of these).

I am planning to be more dedicated on writing new Articles in 2015. And I really need to thank to all the people of the world who visited my site in 2014.

And WordPress sent me an annual report that my site got traffic from 155 countries in 2014 which made me much confident and forced me to be more dedicated here.I thank you all.

Here is the public report : https://shahjadatalukdar.wordpress.com/2014/annual-report/

In 2015 , I am planning to write articles on MEAN stack (Mongo , Express , Angular , Node) .

I have already few articles on Angular.And Will continue more. Please visit/subscribe/like/comment on articles . I really appreciate your valuable comments/suggestions.

Cheers

Shahjada

Standard