Useful NPM Modules for Grunt

By Md Mahabubul Masud in Deployment, Javascript, Programming 0 Comment

Grunt is commonly used as a javascript build tool. Grunt used NPM (node modules) for build purpose. Sometimes it’s very hard to find useful node modules for grunt. Here I will point out some useful node modules that is commonly used with grunt.

This module will clean any directory by removing the whole folders along with the containing files and folders.  The ‘src’ options allow multiple folders with different path.

//clean the build directory
clean: {
    build: {
        src: ['dist']
    }
},
grunt.template.today("yyyy-mm-dd HH-MM-ss-TT") // this will print current date time ex: 2017-01-28 10-10:56 PM
//copy the previous build to
copy: {
    build: {
        cwd: 'dist', 
        src: ['**'],
        dest: 'backup/dist-<%= grunt.template.today("yyyy-mm-dd HH-MM-ss-TT") %>',
        expand: true
    }
},
//rename folders or files
rename: {
    main: {
        files: [
            {
                src: 'backup/dist', 
                dest: 'backup/dist_<%= grunt.template.today("yyyy-mm-dd HH-MM-ss-TT") %>'
            }
        ]
    }
},
//SASS compilar
sass: {
    dist: {
        files: [{
            expand: true,
            cwd: '../css/secondary',
            src: ['**/*.scss'],
            dest: 'dist/sass',
            ext: '.css'
        }]
    }
},
// configure cssmin to minify css files 
cssmin: {
    options: {
        banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
    },
    build: {
        files: {
            'dist/css/secondary.min.css': ['../css/secondary/**/*.css','dist/sass/**/*.css']
        }
    }
},
// configure jshint to validate js files 
jshint: {
    options: {
        reporter: require('jshint-stylish'), // use jshint-stylish to make our errors look and read good
        reporterOutput: 'jshint.html'
    },

    // when this task is run, lint the Gruntfile and all js files in src
    build: ['gruntfile.js', '../js/secondary/**/*.js']
},
//compress folders
compress: {
    main: {
        options: {
            archive: 'backup/gmil-<%= grunt.template.today("yyyy-mm-dd HH-MM-ss-TT") %>.zip'
        },
        expand: true,
        cwd: 'dist',
        src: ['**/*'],
        dest: ''
    }
},
// configure to uglify to minify js files based on subfolder.js
uglyfolders: { 
    general: {
        options: {
            src            : '../js/secondary/',
            target         : 'dist/js'
        }
    }
},
// configure uglify to minify js files 
uglify: {
    options: {
        banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
    },
    build: {
        files: {
            'dist/js/all.min.js': ['../js/secondary/**/*.js']
        }
    }
},

Finally this is how the package.json file looks like:

{
  "name": "hello-grunt",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-build-number": "^1.0.0",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-jshint": "latest",
    "grunt-contrib-less": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-include-source": "^1.0.0",
    "grunt-ugly-folders": "^0.1.6",
    "jshint-stylish": "latest"
  },
  "main": "gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "buildnum": "1"
}

This is how the gruntfile.js file will looks like with all this configuration:

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // configure jshint to validate js files 
        jshint: {
            options: {
                reporter: require('jshint-stylish'), // use jshint-stylish to make our errors look and read good
                reporterOutput: 'jshint.html'
            },

            // when this task is run, lint the Gruntfile and all js files in src
            build: ['gruntfile.js', '../js/secondary/**/*.js']
        },

        // configure uglify to minify js files 
        uglify: {
            options: {
                banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
            },
            build: {
                files: {
                    'dist/js/all.min.js': ['../js/secondary/**/*.js']
                }
            }
        }, 

        // configure to uglify to minify js files based on subfolder.js
        uglyfolders: { 
            general: {
                options: {
                    src            : '../js/secondary/',
                    target         : 'dist/js'
                }
            }
        },

        // configure cssmin to minify css files ------------------------------------
        cssmin: {
            options: {
                banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
            },
            build: {
                files: {
                    'dist/css/secondary.min.css': '../css/secondary/**/*.css'
                }
            }
        },

        // include source to common.jsp
        includeSource: {
            options: {
                basePath: '',
                baseUrl: '',
                templates: {
                    jsp: {
                        js: '<script src="{filePath}"></script>',
                        css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
                    }
                }
            },

            myTarget: {
                files: {
                    'dist/common.html' : 'index.tpl.html'
                }
            }
        },

        // build number
        buildnumber: {
            options: {
                field: 'buildnum',
            },
            files: ['package.json', 'bower.json']
        }
    });


    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-ugly-folders');
    grunt.loadNpmTasks('grunt-include-source');
    grunt.loadNpmTasks('grunt-build-number');


     // this default task will go through all configuration (dev and production) in each task 
    grunt.registerTask('default', []);

    // this task will only run the dev configuration 
    grunt.registerTask('dev', ['uglyfolders','cssmin', 'includeSource', 'buildnumber']);

    // only run production configuration 
    grunt.registerTask('production', ['uglify', 'cssmin', 'includeSource', 'buildnumber']);


};

 

 

NEXT: How to use this modules with GULP, Yarn and WebPack

 

Some useful articles for nodeJS, Express, Angular and MongoDb

By Md Mahabubul Masud in AngularJS 2.0, Javascript, NodeJS, Tutorial, Vanila Javascript 1 Comment

I was reading some blog post over the last weekend and found some good article on NodeJS, Express, Angular (not angular2) and MongoDB. I think it could be helpful for others:

All this articles are published on http://adrianmejia.com/ site.

REST service authentication using jsonwebtoken

By Md Mahabubul Masud in Javascript, NodeJS, Programming, Tutorial 0 Comment

In my last tutorial, we have gone through REST service creation using nodeJS and MongoDB. In this tutorial we will show, how to make token based authentication using jsonwebtoken. we will use mongodb for user login information.

Lets install the jsonwebtoken module using the following command:

npm install jsonwebtoken --save

“–save” option will add this module in package.json for future installation.

Now add this module to the server.js file in the following way:

jwt = require('jsonwebtoken'),

Now lets create a user model  so that we can verify user. Create a user.js file under app/models folder and put the following contents in it:

var mongoose = require('mongoose'), 
    Schema = mongoose.Schema;

var UserSchema = new Schema({
    name : String, 
    password : String, 
    admin : Boolean
})

module.exports = mongoose.model('User', UserSchema);

Now, let’s proceed to the authentication process. Authentication consists of two steps:

  1. Login with Username and password
  2. verify the authentication before each request

To make the authentication we will create a Service called authentication.js under app/service folder and put the following code. FYI, this is modular class which will expose two methods. One for check login and another one for verify login before is each request.

var User = require('../../app/models/user'),
    jwt = require('jsonwebtoken'),
    auth = require('../../app/config/auth');

var authenticate = (function (){
    /**
     * @method checkLogin
     * @description check login with user name and password 
     */
    var checkLogin = function (username, password, response) {
        User.findOne({name : username}, function (err, user) {
            if (!user) {
                response.json({
                    success: false, 
                    message : 'Authentication failed. User not found'
                });
            } else if (user) {
                if (user.password != password) {
                    response.json({
                        success: false, 
                        message : 'Authentication failed. User/Password not found'
                    });
                } else {
                    var token = jwt.sign(user, auth.secret, {
                        expiresIn : 1440 // expires in 24 hours
                    });

                    response.json({
                        success: true,
                        message: 'Authentication Success! Enjoy your token',
                        token : token
                    });
                }
            }
        });
    };

    return {
        checkLogin : checkLogin
    };

}());

module.exports = authenticate;

To verify the login before each request, we need to have a method first. Create the following method inside the authenticate module in the following way:

.......................................................................
/**
     * @method isLoggedin
     * @description check login with user name and password 
     */
    var isLoggedin = function (request, response, next) {
        var token = request.body.token || request.query.token || request.headers['x-access-token'];

        if (request.url === '/authenticate' || request.url === '/setup') { //if try to login, avoid token check
            next();
            return false;
        }
        
        if (token) {
            jwt.verify(token, auth.secret, function (err, decoded) {
                if (err) {
                    response.json({
                        success: false,
                        message : 'Failed to authenticate token'
                    });
                } else {
                    request.decoded = decoded;
                    next();
                }
            });
        } else {
            response.json({
                success: false,
                message : 'No toekn has provided'
            });
        }
    };
.......................................................................

Now expose this method as public in the following way:

.......................................................................
return {
        checkLogin : checkLogin,
        isLoggedin : isLoggedin
    };
.......................................................................

Now we have to update route.js file. We use the following route, which will verify the login, before serving the content to that particular request URL. To do that add the following code in route.js file:

var express = require('express'),
    Bear = require('../../app/models/bear'),
    User = require('../../app/models/user'),
    jwt = require('jsonwebtoken'),
    auth = require('../../app/config/auth'),
    authService = require('../../app/service/authenticate'),
    router = express.Router();

router.use(function(req, res, next){
    console.log('Something is trying to reach at ', req.url);
    authService.isLoggedin(req, res, next);
});

// make the authentication request
router.post('/authenticate', function (req, res) {
    authService.checkLogin(req.body.name, req.body.password, res);
});

//rest of code 
.......................................................................

Now try to get list of bear from GET http://www.localhost:8080/api/bears using postman

screen-shot-2016-10-19-at-8-29-57-pm

Now it will through an error because authentication token is not available. Now Lets login or authenticate a user and get the token. Check this :

screen-shot-2016-10-19-at-8-29-10-pm

Now copy the token and put it in the GET request header like this way:

screen-shot-2016-10-19-at-8-30-33-pm

Now you will see the list of bear because Authentication token was passed as an header.

Hope you enjoy the process step by step. More will be added soon….

 

 

Create Node Server with Express & MongoDB [part-2]

By Md Mahabubul Masud in Javascript, NodeJS, Tutorial 0 Comment

If you miss the previous post, you can check it from here Create Node Server with Express & MongoDB

Step 5: Verify mongodb connection with a new collection (Save & Find)

Lets create a db model file under app/models. Lets called the file name bear.js and put the following content into the file:

var mongoose = require('mongoose'),
    Schema = mongoose.Schema;

var BearSchema = new Schema({
    name : String
});

module.exports = mongoose.model('Bear', BearSchema);

To use this model, we need to include it into the server.js file. But our purpose is to save some data into mongodb server and query the content. For that we need to define some ROUTE. To do that, let’s create a file called route.js under app/config folder and put the following content into the file:

var express = require('express'),
    Bear = require('../../app/models/bear');

/**
 * To insert data on POST method
 */
router.post('/bears', function (req, res){
    var bear = new Bear();

    bear.name = req.body.name;
    bear.save(function (err){
        if (err) res.send(err);
        res.json({message: 'Successfully created'});
    });
});

/**
 * To get all data on GET method
 */
router.get('/bears', function(req, res) {
    Bear.find(function(err, bears){
        if (err) res.send(err);
        res.json(bears);
    });
});


module.exports = router;

Now to access the url, we need to include the route.js file in server.js file in the following way:

.......................................
router = require('./app/config/route'),
.......................................

again, to maintain better REST url, we add a prefix ‘api’ to each route for the app. To do that add the following line:

............................
app.use('/api', router)
............................

Now you can access the url like this:

//To Save data
POST http://localhost:8080/api/bears

//To get all data
GET http://localhost:8080/api/bears

Lets try to access the url using postman chrome extension:

First add a data with POST url:

screen-shot-2016-10-16-at-8-52-22-pm

Now get the data using GET url:

screen-shot-2016-10-16-at-8-52-43-pm

Create Node Server with Express & MongoDB

By Md Mahabubul Masud in Javascript, NodeJS, Programming, Tutorial 1 Comment

This tutorial will describe how to create a node server with Express Framework and MongoDB database. To start, let take a look at the prerequisite

  • NPM – node package manager
  • MongoDB

Step 01: Create a folder called “node-tutorial”. Inside the folder create a new file called “package.json”. Add the following contents to the file:

{
  "name": "node-rest-api",
  "description": "Simple REST Service implementation",
  "dependencies": {
    "body-parser": "~1.0.1",
    "express": "~4.0.0",
    "mongoose": "~3.6.13",
    }
}

now run the following command to install the dependencies:

npm install

This will create a local node_modules folder where it will install all the dependencies.

Step 02: Now create some directory in the following format. For now just create the folder, ignore the files inside the folder.

screen-shot-2016-10-15-at-8-39-30-pm

Step 03: create a node server 

Let’s create a node server. To do that, create a file in to the root folder called “server.js”. Put the following contents into file:

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser');

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


app.use(bodyParser.urlencoded({extender: true}))
   .use(bodyParser.json())
   .listen(port);
   
console.log('Magic happens on port ', port);

Now execute the following command to run the server

node server.js

You will see the following screen in the terminal:

screen-shot-2016-10-15-at-8-45-59-pm

Congratulations, your first node server is running at port 8080.

Step 04: start mongodb server and connect from NodeJS server

First start the local mongodb Server using the following command

masud-hasan@C02RH1S1G8WM ~> mongod

2016-10-15T00:00:04.089-0400 I CONTROL [initandlisten] MongoDB starting : pid=9862 port=27017 dbpath=/data/db 64-bit host=C02RH1S1G8WM
2016-10-15T00:00:04.089-0400 I CONTROL [initandlisten] db version v3.2.5
2016-10-15T00:00:04.089-0400 I CONTROL [initandlisten] git version: 34e65e5383f7ea1726332cb175b73077ec4a1b02
2016-10-15T00:00:04.089-0400 I CONTROL [initandlisten] OpenSSL version: OpenSSL 1.0.2g 1 Mar 2016

once you run the mongodb sever, it will start on default mongo port at 27017.

Now lets connect it from our app. Create a config.js file under app/config location and put the following content into the file:

var mongoose = require('mongoose');

mongoose.connect("mongodb://localhost:27017/nodetutorial");
module.exports = mongoose;

Here we are connecting to mongodb sever using mongoose module. Here we are creating a new mongodb schema called “nodetutorial”.

To get the mongo connection available through the application, let’s include the file in the server.js file in the following way:

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser');

var mongoose = require('./app/config/config.js'),
    port = process.env.PORT || 8080;


app.use(bodyParser.urlencoded({extender: true}))
   .use(bodyParser.json())
   .listen(port);
   
console.log('Magic happens on port ', port);

Now execute the following command to run the server

node server.js

if you don’t see any error then you are successfully able to connect to the mongodb server from node server.

Step 05: Verify mongodb connection with a new collection (Save & Find)

coming soon…..

MEAN Stack 01: Preapare development enviroment

By Md Mahabubul Masud in AngularJS 2.0, Javascript, Tutorial 0 Comment

This is going to be series of article on MEAN stack. Start with setting up development environment with the following the tools

Introduction to Vagrant

Vagrant is computer software that creates and configures virtual development environments. It can be seen as a higher-level wrapper around virtualization software such as VirtualBox, VMware, KVM and Linux Containers (LXC), and around configuration management software such as Ansible, Chef, Salt, and Puppet.

Windows

  • Install Vagrant
  • Create a vagrant script named vagrantfile 
    Vagrant.configure("2") do |config|
  
  // this is the box name
  config.vm.box = "ubuntu/trusty64"
  
  // provision script from a separate file
  config.vm.provision :shell, path: "bootstrap.sh"

  //forward the apache port to host machine with a  different port
  config.vm.network :forwarded_port, guest: 80, host: 1001

  //forward the nodejs port to host machine with a different port
  config.vm.network :forwarded_port, guest: 8001, host: 8001

  //share folder between host and guest machine
  config.vm.synced_folder "/Users/vagrant/helloworld", "/vagrant"
end
  • Run Vagrant Machine with Ubuntu 14.04 
    # vagrant up
  • Adding SSH key access to vagrant machine (using PPK file)
    • Install Putty and Putty Gen
    • To generate PPK (Putty Private key), open puttygen
    • Select import private key from the menu
    • show the path of the private key generated by vagrant, default at 
      YOUR_BOX_LOCATION\.vagrant\machines\default\virtualbox\private_key
    • Click the save private key button and save the file in the same location where the default vagrant private key located.
  • SSH to Vagrant Machine (putty, puttygen)
    • Open putty program
    • add the host name in hostbox, default is: 127.0.0.1
    • add the port number, default is: 2222
    • name the settings: testVagrant
    • for authentication, from left sidebar look for auth options and select that. left side you will see the option to browse the path of the PPK file.
    • Now click open and it will ask for login user name. Default user is: vagrant
  • Running the Vagrant from host machine
    • Install Apache Web Server using Ubuntu package manager (APT- Advanced Packaging Tool) 
      # Sudo apt-get update
# sudo apt-get install apache2
    • Forward port from guest machine to host machine using Vagrantfile configuration
  • Setup Vagrant Provisional items
    • Add Apache web server in bootstrap.sh 
      #!/usr/bin/env bash

# install apache2 server
apt-get update
apt-get install -y apache2
if ! [ -L /var/www ]; then
  rm -rf /var/www
  ln -fs /vagrant /var/www
fi
    • Add node package into the server 
      # install node package
apt-get install -y g++
curl -sL https://deb.nodesource.com/setup_0.12 | sh
apt-get install -y nodejs
su vagrant
mkdir /home/vagrant/node_modules
cd /var/www/
ln -s /home/vagrant/node_modules/ node_modules
npm install karma
    • Create and Run First node.js server 
      var http = require('http');
var server = http.createServer(function (request, response) {
    response.writeHead(200, {"content-Type": "text/plain"});
    response.end("Hello Node World\n");
});

server.listen(8001);
console.log('Server running at http://127.0.0.1:8001');
  • Mac
    • Install Vagrant
    • Create a vagrant script

Series:

MEAN Stack 01: Prepare development environment

MEAN Stack 02: mongoDB installation with provision and starting with mongodb

MEAN Stack 03: How to work with mongoDB

MEAN Stack 04: Start with Express framework using nodejs