A few weeks ago, the jQuery plugins website, which developers used to find and download plugins for the popular client-side library, was switched to read-only mode. Developers are now encouraged to use npm to publish and search for jQuery plugins.
This demonstrates how central npm has become to the JavaScript community. It originally arose as the package manager for node.js, but quickly proved itself versatile for any kind of JavaScript code, and developers started using it to host client-side libraries as well.
In this tutorial, we will show you how you can use npm to develop a small web application. We will start from scratch – we will set up a package.json, install a bunch of libraries and make things work nicely together.
How to install and use client-side libraries with npm
There are two ways to do this. We are going to use the simpler one, which is a great fit for small websites and apps:
We will install the libraries that we need with npm. You can see a bunch of jQuery plugins here. To install one of them, run the command npm install <package-name> --save
npm creates the node_modules folder and places the libraries there.
In our HTML file, we include the scripts and CSS files directly from the node_modules folder with <script> and <link> tags.
When the time comes to put your web site/app online, just upload the node_modules folder together with the other files.
This is similar to how Bower works, but has the benefit that we are only using npm without installing additional package managers.
Setting things up
We are ready to start coding! However, there are a few things that you have to do first:
Make sure that you have node.js installed. If you don’t, download an installer for your OS and run it. This will also set up npm for you.
Create a new empty folder for your new website. As an example, we will use project-folder throughout this tutorial.
Open a terminal (or a command prompt if you are on Windows) and navigate to the project folder (cd is your friend!).
Type npm init. This will create an empty package.json file. Press enter to use the defaults, if you don’t know what info to supply.
Great! Now you’ve got an empty folder with a valid package.json inside it. package.json is a special file which is used by npm to write down the libraries you’ve installed so far, and details about your project.
Let’s install some libraries
We are going to make a simple web app that will visualize addresses using Google Maps, and will let people save addresses in their browser’s localStorage. For this purpose, we will need a bunch of libraries which are available on npm:
This will download and write to node_modules Bootswatch (Bootstrap with pretty themes applied), gmaps (an easy way for working with Google Maps), jQuery and moment.js (library for working with date and time in JavaScript). The –save flag will write them to package.json in addition to downloading them.
All that is left is to include these libraries in your HTML.
Tutorialzine NPM-Driven Website
The HTML
We have a basic HTML5 document with a few Bootstrap components. Notice how we’ve included the bootswatch stylesheet and the libraries by directly specifying their path inside the node_modules folder.
index.html
I have chosen the modern-looking Flatly theme from Bootswatch, which we installed a moment ago. In the HTML you can also see some of Bootstrap’s grid classes, along with a list group for presenting the favorite locations.
The JavaScript
Our JavaScript file will handle saving to and reading from localStorage, creating Google Maps using the Gmaps library and converting from addresses to geographic coordinates. You can see the entire file below.
assets/js/script.js
The CSS
We mostly rely on Bootstrap with the Flatly theme to do the styling for us. However I did write a few additional CSS rules, which you can see in assets/css/styles.css in the downloadable zip with the source code.
To wrap it up
This concludes our tutorial! Npm has a huge number of JavaScript libraries, a lot of which are usable in the browser directly (for the rest we have Browserify, but this is a topic for another article). Do you think you will use npm in your client side development? Share your thoughts in our comment section.