Jon Stuebe

Front End Tools Pt. 2 (Node.js & NPM)

javascript front-end npm node.js

Front End Tools Pt. 2 (Node.js & NPM)

Posted by Jon Stuebe on .

javascript front-end npm node.js

Front End Tools Pt. 2 (Node.js & NPM)

Posted by Jon Stuebe on .

This article is part two of a series on Front End Tools. Here is a link to part one on Terminal Basics.


For starters, most if not all of the front end tools run on Node.js. As a broad overview, for our purposes think of Node.js as the server that will be running all of our tools behind the scenes. To install Node, simply visit their site and download the installer.

Npm (Node Package Manager)

Node has a wonderful package manager (Npm) that allows you to quickly download and install any Node programs (packages). This is what we will be using to install all of the tools for the remainder of the article. Basically, there are two different kinds of installs that you will do with Npm. One will be referred to as a global install. It will look something like this:

$ npm install -g <package_name>

These global installs are used for programs that you will use in pretty much every one of your projects. It simply installs it across your whole system so you don't have install it each time you setup a new project. In this above example I'm using npm to install grunt's package to my system.

The second kind of install you will do is a per project/folder install:

$ npm install <package_name>

These kind of installs will install that package to the current folder (also referred to as the current working directory or cwd). This means if you have used the "cd" command to change directories in your terminal and in your project folder, let's say for this example:

$ cd ~/sites/testing/

Since you are in the folder "testing", then any time you run an npm install that is not global, npm will create a folder called "node_modules" at the path like so and install of your packages there:


Quickly though, you will start needing a decent list of packages for all of your tools. Rather than having to run npm install each time, there is a configuration file that you can create which contains a list of all of the packages required for that project. This file needs to be named "package.json" and placed in the root/main directory of your project. Luckily rather than having to write this yourself, npm has a tool to create it. Simply run:

$ npm init

This will guide you through a series of steps asking you your project name, version, and other pertinent details. If at any point you don't understand what it's asking you, it's ok to just hit return, most of these details won't matter to you yet. Think of these options as the advanced configuration details that you can change later.

Now that you've ran npm init you should see the "package.json" file in the root of your project. This means that now when you run npm install all you need to do is simply add a flag to the command to have it add it to the package.json file for you to use in another project at a later date (or to install these packages on another machine or with another teammate quickly).

$ npm install --save-dev <package_name>

Again, running this command with the "--save-dev" will not only install the package using npm, but will add it to your package.json file for later, repeat install use. Another quick tip is that you can add more package names to the end of the command to install multiple at once like so:

$ npm install --save-dev <package_name> <second_package_name>

In this example, npm would install both the uglify and sass grunt plugins in one batch rather than you having to type out each as a seperate command.

With all of this information, it's time to move on to getting your different tools installed and configured.

Pt. 1: Terminal Basics

Pt. 2: Node.js Install & Node Package Manager (NPM)

Pt. 3: Javascript Task Runners (Coming Next Week)


Jon Stuebe