Installing tools to develop modern JavaScript and Angular applications

We are far from years where JavaScript was a language only to validate form fields within HTML pages. Modern JavaScript applications leverage advanced tools, frameworks and libraries to build them but also to package them. Before being able to use such, we need to install a set of tools. In this post, we describe the way to install them under Debian-based Linux distributions.

Install and build Node

Node is the underlying stone for JavaScript application development for both client and server sides. Of course, in the case of JavaScript applications for browsers, only building and packaging leverage Node. The latter isnt used by applications themselves for their processing.

We need first to install the required tools to build Node on Linux:

  • build-essential
  • ssl packages
  • pkg-config

Following command will install such tools thanks to the Debian package manager:

sudo apt-get install build-essential openssl libssl-dev pkg-config

Lets now download the current version of Node from its web site The current version is 0.10.31 at the time of writing. Now you got the distribution archive, just launch the following commands:

./configure && make && sudo make install

Now you should have Node and NPM (the package manager that comestible with Node) installed. Juste launch the following commands to check if everything is correctly installed:

$ node -v
$ npm -v

Install Ruby

Yeoman requires Ruby for its generators, at least for the Angular generator. We will describe later what Yeoman is and can be used for.

We can install Ruby and its related tools for development using the Debian package manager with the following commands:

sudo apt-get install ruby
sudo apt-get install ruby-dev

Now you should have Ruby installed. Lets check this using the command ruby:

$ ruby --version
ruby 1.9.3p484 (2013-11-22 revision 43786) [x86_64-linux]

We also need to install Saas and Compass with Ruby. Saas is a CSS preprocessor and Compass a XX.

We can use the command gem of Ruby to install them, as described below:

$ gem install saas
$ gem install compass

We have installed now all the prerequirements to install tools to develop efficiently, package and build modern JavaScript applications.

Install Yeoman

Yeoman is a tool that helps developers to kickstart new projects, prescribing best practices and tools to help them stay productive.

Yeoman can be installed from the package manager NPM. Its package name is yo.

$ sudo npm install -g yo

We can notice the option -g that names the install global. Without this option, the installed will only salve within the current directory.

We can also chose to install a specific version of Yeoman. Following command install its version 1.2.1:

sudo npm install -g yo@1.2.1

Since Yeoman relies on Bower for Web dependencies and Grunt for packaging build, you should now have all these tools installed. To check this, we can use the following commands:

$ yo --version
$ bower --version
$ grunt --version
grunt-cli v0.1.13

If we want to create Angular applications, we also need to install the Angular generator for Yeoman. This can be donne with NPM with the following command:

$ sudo npm install --global generator-angular@0.9.8

Install Grunt and Bower without Yeoman

We can also decide not to use Yeoman but Grunt and Bower. In this case, we simply need to use NPM to install them, as described below:

$ npm install -g grunt-cli
$ npm install -g bower

This entry was posted in Angular, JavaScript, Web2 and tagged , , , . Bookmark the permalink.

One Response to Installing tools to develop modern JavaScript and Angular applications

  1. Pingback: Installing AngularJs Tools on Linux | AngularJs

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s