We’ve been working extensively with Node.JS and Express for the past 8 months and have picked a few components that allow us to work efficiently and manage our project better. In this blog we will be discussing how to setup a Node.JS project with,
- Bower to handle client side dependencies
- Grunt to handle minification and beautification
- VSCode as our editor for Node.JS.
Prerequisites :
- Node js must be installed on your system. If not you can download the latest version of Node js from here.
- NPM is a Node Package Manager. Once you have installed Node js you will have NPM installed as well.
- Git must be installed on your system. If not you can download the latest version of the Git from here.
Bower
What is Bower?
Bower is a front-end package manager for the web which is used to install the client-side dependencies like Bootstrap, jQuery etc.
Why should we use Bower?
Bower makes management of client-side dependencies easy. Updating individual dependencies is easy and can be done by running the bower’s update command. You can maintain versions of packages what you are using in your application in a JSON file called bower.json.
No need to commit different versions of jQuery or bootstrap to our repositories. These are installed and managed by Bower.
Installation of Bower
Open terminal (command prompt in windows) and type the following command
npm install -g bower
This will install the Bower globally in your system. You can check the version of Bower installed on your system with the following command.
bower -v
Setting up Bower in your Node js application
Go to your application’s main folder in the terminal and run the command bower init and follow the instructions. Once you have done with that, it will automatically create a file bower.json in that folder which looks like as follows.
name: 'Bower',
version: '1.0.0',
authors: [' '],
description: 'A package manager for the web',
dependencies: {},
moduleType: [
'node'
],
keywords: [
'Bower'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}
Now you can start installing the client-side dependencies by mentioning the dependencies name and version in bower.json file under dependencies section like as follows,
dependencies: {
"bootstrap": "3.3.0",
"moment": "2.9.0"
}
The names and versions that you see here, can be retrieved via a bower.json file present when you download these plugins. For example, bootstrap’s bower.json can be found here.
Now, run bower install/update command to install or update the dependencies.
By default, Bower will put these in the bower_components directory which can be changed by creating a .bowerrc file in the location where the bower.json file is present with the following content.
{
"directory": "plugins/"
}
You can find the more information about Bower from here.
Grunt
What is Grunt?
Grunt is a command line task runner which is used to automate the common repetitive tasks like minification of files, beautification of files etc.. during the development of web application.
Why to use Grunt?
We use Grunt to minify, mangle and concatenate CSS and JavaScript files. This is useful on production websites where it is important to reduce the amount of data sent to the client. We are also using it to compress images.
But then Grunt can be used to handle a lot of repetitive tasks via the plethora of plugins that it supports. The list of Grunt plugins can be found here.
Installation of Grunt CLI ( Command Line Interface )
You can install the Grunt CLI using NPM. Run the following command in the terminal,
npm install -g grunt-cli
This will install the Grunt CLI globally on your system.
Installation of Grunt and its plugins
You can install the Grunt and its plugins in your application. For example, the following command will install the latest version of the Grunt in your application and it will automatically add to the devDependencies section in the package.json file of your application
npm install grunt –save-dev
Then the devDependencies section of your package.json file will be updated as follows,
"devDependencies": {
"grunt": "0.4.1"
}
Depending on what grunt plugins you use, this section will have to be updated.
Next you need a create a file with name Gruntfile.js or Gruntfile.coffee in the path where the package.json file is located. This is the file where you create and configure the tasks that you want to run using Grunt.
Setting up Project configuration in Gruntfile
The project configuration in the Gruntfile is handled by the grunt.initConfig method. An object with the project configurations and tasks configuration if any should be passed to this method. Generally, the pkg: grunt.file.readJSON(‘package.json’) line will import the project configuration. Now, the Gruntfile looks like as follows,
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
Configuring the tasks
Each task in the Grunt has its own configuration, so the task configuration should be defined inside the grunt.initConfig method.
For example, the below code will perform two tasks, one is for minification of the files and another one is for the beautification (maintains the indent spacing of the lines, wrapping of the lines etc..) of the files.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
prodclient: {
files: ['app.js']
},
options: {
mangle: true
},
},
jsbeautifier: {
files: ['app.js' ],
options: {
js: {
indentChar: ' ',
indentSize: 2,
}
}
}
});
Grunt plugins
Grunt plugins are the components to perform the specific tasks using Grunt. You can find more Grunt plugins from here.
Loading the grunt plugins
To perform the tasks mentioned in the above example,  we are using following plugins,
- grunt-contrib-uglify and
- grunt-jsbeautifier
Remember to mention these plugins information in package.json file under devDependencies section and run npm install. Then load these plugins in the Gruntfile as follows,
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks("grunt-jsbeautifier");
Registering the tasks
The grunt.registerTask method is used specify a default set of tasks that should run when the grunt command is executed.
grunt.registerTask('default', [ 'uglify:prodclient']);
grunt.registerTask('dev', ['jsbeautifier']);
The first parameter of this method specifies the name of the task (in this case default’) and the second contains an array of the tasks you wish to be executed.
Running Grunt
Executing the grunt command in your terminal will run all of the tasks specified in your default task.
You can also run tasks individually by passing the task name to the grunt command.
grunt // Runs default tasks grunt dev // Just runs the task with the name 'dev'
You can find the more information about Grunt from here.
VSCode
What is VSCode ?
Visual Studio Code is a light weight editor which is used to edit and debug the applications written in Node.js and ASP.NET. It is platform independent supporting Windows, Linux and Mac OS X.
Setting up VSCode for your Node js application
Download the latest version of VSCode from here.
Installation on Windows
An executable file VSCodeSetup.exe will be downloaded if you download the Visual Studio Code for Windows. Run this file and the Visual Studio Code will be installed on your machine.
Installation on Linux
You’ll have a zip file once you download VSCode. Before installing the VSCode for Linux, check whether the mono is installed on your Linux system since it is needed for debugging purposes. If mono is not installed, you can install it by following the instructions mentioned here. Note that you’ll still be able to run VSCode without mono, but debugging will not work.
IfΓö¼├í you want to run the VSCode from terminal,Γö¼├í set up the path to the VSCode executable file in the following manner(substitute ‘/path/to/vscode/Code’ with the absolute path to the Visual Studio Code executable file).
sudo ln -s /path/to/vscode/Code /usr/local/bin/code
Launching VSCode from the terminal
Go to specific project folder on the terminal and type the command  code . to open that folder contents in VSCode. For example,
/path/user/Folders/Test$ code
Debugging Node js application in VSCode
After launching VSCode press F5 to set up the debug configuration for the project. After pressing F5 a file with name launch.json will be opened in the editor where you can set the debug configuration of the project.
Change the Name property to ‘Launch App’ (for example) and change the program property to the path of your application.Γö¼├í Now, save the file and select ‘Launch App’ in the dropdown at the top of the debug view in the VSCode, set a breakpoint in your code, and press F5 to start debugging.
You can find more information about debugging options here.
Pros and Cons of VSCode as of V 0.1
Pros :
- Setting up debugging is easy.
- Fast, very little bloat.
- Microsoft’s support and regular updates.
- Clean interface.
- Git support and JSHint validation.
Cons :
- Unable to detect the Git submodules.
- Inability to mark certain files to be highlighted with certain type. For example we cannot mark .ejs files to be treated/highlighted as .html files.
Leave a Reply