Using Bower, Grunt and VS Code for Node.JS development

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.

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.

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.