npm & increased efficiencies for web/front-end designers

While setting up your front-end projects, do you search on the web for bootstrap, font-awesome, jQuery? Do you search for the source files or CDN links to integrate? Then go through this page. I hope you will never waste time in searching the source files for different packages, after reading this post.

When we do front-end/web design, it becomes cumbersome to manage everything like CSS frameworks(Bootstrap, Materialize, Tailwind CSS), fonts(google-fonts), icon-fonts (Font Awesome, Material Icons), JavaScript libraries(jQuery, Chart.js, AOS, Gulp) and the list goes on. But it’s time to simplify everything.

Throughout this post will get the basic idea about npm (Node Package Manager), and how it helps the web/front-end designers.

What is npm?

In brief, npm (stylized in lowercase, so it’s not correct to write it as “NPM”) is a package manager for JavaScript. It stands for Node Package Manager. For better understanding, pay a visit to docs.

Installing Node.js and the npm client

One of the things that are somewhat intimidating to designers and those who don’t come from a strong programming background is the fact that npm is used via the command line. But it’s really not that big a deal for the purposes of just doing some basic package installing and updating.

To start using npm, just do the following two:

• Install Node.js
• Install the npm client

But if you install the latest version of Node.js, this will also install the npm client. So with the latest version of Node.js, you will get two things in one shot.

Now just check in the terminal whether the node and npm are ready. Write the following commands in the terminal.

node --version
npm --version

If you have done the above your machine is ready to move one. You just need to complete these steps once for an entire life-cycle of your machine(OS).

Initiating npm in the project

You can add a package.json file to your package to make it easy for others to manage and install. Packages published to the registry must contain a package.json file.

On the terminal, navigate to the root directory of your package.

cd /path/to/package

Run the following command:

npm init

Answer the questions in the command line questionnaire. And after completing the process the package.json file will be generated. For a better understanding of package.json please pay a visit to the docs.

Installing packages

It’s very easy to install any package with npm. Just write in the terminal npm install package-name. For further flexibility, it’s better to add packages to the dependency with — save flag.

npm install package-name --save

Now let’s see an example of installing npm package.

Installing a package: Bootstrap

For using bootstrap in our projects, what do you do? Download the CSS and JavaScript files then add them to the project? Okay hold a second and follow these steps.

Bootstrap requires jQuery and popper.js for running JS functionalities. So write in the terminal for installing all the three.

npm install bootstrap jquery popper.js --save

You can also install specific versions of these package with npm install package-name@version.

npm install bootstrap@4.0.0 --save
npm install jquery@3.3.1 popper.js@1.12.9 --save

Let’s get your web page Bootstrap ready: Open the index.html file in your favorite text editor. If you are using Visual Studio Code, Brackets, Sublime Text, or similar editors, you can open the project folder in the editor and then view index.html.

Insert the following code in the head of index.html file before the title.

<!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

This will include Bootstrap CSS into your web page. Note the subtle change in the fonts of the content of the web page. This is the Bootstrap typography effect coming into play. The default Bootstrap typography sets the font to Helvetica Neue and selects the appropriate font size based on the choice of the heading style and paragraph style for the content.

At the bottom of the page, just before the end of the body tag, add the following code to include the JQuery library, popper.js library, and Bootstrap’s Javascript plugins. Bootstrap by default uses the JQuery Javascript library for its Javascript plugins. Hence the need to include the JQuery library on the web page.

<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
 <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
 <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Done! You are ready to start your project and use all the flexibilities of bootstrap.

This is just an example of npm uses. For designing and developing real web projects you need tons of other packages to install. You can install any font or icon-font you want easily via npm. Wow.js and Owl Carousel is very famous for animation and sliding which can be easily integrated into the web project. Other optimization packages like Grunt, Gulp, Gatsby, Webpack are widely available on npm.

Conclusion

npm is used to install and manage packages, usually JavaScript modules and sometimes even CSS. It enables a systematic and efficient way of building web projects. If you already have started using npm, that’s great. If not, don’t wait. Just dive into the ocean of npm packages and build awesome things.