Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 11. 3. 2016
We need Node.js on the front-end mainly for making the developers’ work easier and for managing developer dependencies.
NPM is a packaging system of Node.js. You have to download and install a complete version of Node.js.
And now for everyone, regardless of the platform they use. Install Node.js globally. All the ways to do it are described here: nodejs.org/en/download/
Test if everything’s OK by using the command for displaying the NPM version:
All other dependencies will be installed as Node packages.
Sometimes, it is recommended to run all NPM commands as an admin (
sudo npm …).
However, this is not good from a security point of
is much better to grant the current user privileges to write into
sudo chown -R $USER /usr/local
That is the end of this “lecture about security”. Now, let’s install useful packages.
Will you use a Grunt assembler? Then, using the command line, you
will have to install a global package:
npm install -g grunt-cli
And what about the front-end Bower packager? That’s easy. Just install it globally like this:
npm install -g bower
Using the very same procedure, you can install Grunt plugins, an alternative Gulp assembler and the Webpack.
npm install <plugin-name> --save-dev
Notice that we do not install plugins globally, therefore we do not use the
switch. And yes, Grunt plugins and Bower packages can be installed in any
particular project. We really want to save them to the config files of the
package manager (
Are you using Windows? Then watch out! Some Grunt plugins require special attention. I know of PhantomJS, which is a dependency of the critical CSS (grunt-criticals) plugin or ImageMagick which is indispensable for plugins that deal with images, such as grunt-contrib-imagemin.
bower install <plugin-name> --save
--save-dev switch will save a plugin into developer dependencies.
Beginners use it in connection with Grunt and its plugins. They can be installed
If you want to install jQuery, it will be a user dependency. We will use the
--save switch but for such dependencies, it is better to use Bower.
Fortunately, both Bower and NPM fortunately have similar commands:
# Searching a package in the central repository: npm/bower search jquery-ui # Displaying package details: npm view jquery-ui bower info jquery-ui # Installing all packages on a project: npm/bower install # Installing a package and adding it to user dependencies: npm/bower install jquery-ui --save # Installing a package and adding it to developer dependencies: npm/bower install jquery-ui --save-dev # Installing a version specific package: npm/bower install firstname.lastname@example.org # Updating all packages: npm/bower update # Listing a tree of dependencies: npm/bower list # Listing a tree of dependencies and a package version: npm/bower list jquery-ui # Removing a package: npm/bower uninstall jquery-ui # Deleting cache. Ideal when re-installing a package set: npm cache clean # Displaying packages that need to be updated: npm outdated bower list # Help: npm help