Everything you need to know about npm

Everything you need to know about npm

Hello folks🙋, in this blog we will be discussing on npm, what is npm, how to install npm, Installing packages from npm(UUID) and semantic versioning.

NPM - Node Package Manager

NPM is a huge part of javascript ecosystem these days, so it is definitely a good skill set to have.

What is npm?

NPM is a main package manager for Node.js, it is the huge repository of all the open source softwares, which can be used by anyone for free.

Why do we need npm?

Let's say you are building a full stack web application and you need to generate a uniqe ID for every user, you have two choices either you can build one by yourself or you can install package which is already created by a a developers.
Yes, the easy one is to install the package, this makes our life easy

  • or you may say npm makes writing code easier because you can rely on pre-built code that other people have written.

How to install npm?

To use NPM in your own computer, first you need to install Node.js, if you don't know what Node.js is check this article. To install Node.js click here
When you install Node.js, NPM will install with it. You can check whether it is installed or not by opening terminal and running node -v and npm -v

Let us get started with npm init

Make a new directory, and open it with vs code and start typing the below commands in the terminal(yeah follow along with me😀)

npm init

This creates a file or moreover a initialisation and telling our entire program, "hey I will be using some of the third party packages and you might want to keep track of them"

As soon as you hit npm init , package.json is created but before that , CLI will ask few things(Program/project details) to you to enter or skip for it to take default values, that includes: "name", "version", "description", "test scripts", "author" and "license". Let us explore one by one

{
"name": "npmblog",
"version": "1.0.0",
"description": "This is a created to explain npm ",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Shriram",
"license": "ISC"
}
  • name
    this can be name of the program you are building or by default it will take the folder name as name.
  • version
    This is version of your program, npm uses a special type of versioning called semantic versioning. What is semantic versioning(SemVer)?🧐 Semantic versioning is a versioning system that has 3 numbers separated by . (dot) and is in the form Major:Minor:Patch
Code StatusStageRuleExample version
First ReleaseNew productStart with 1.0.01.0.0
Backward Compatable Bug FixesPatch ReleaseIncrement the third digit1.0.1 or 1.0.2
Backward compatible new featuresMinor ReleaseIncrement the middle digit and reset last digit to zero1.1.0 or 1.2.0
Changes that break backward compatibilityMajor ReleaseIncrement the first digit and reset middle and last digits to zero2.0.0 or 3.0.0

As this is our First Release of the product/program keep the version as 1.0.0

  • description
    description can be a one or two line explination of what a program is capable of doing.
  • main
    main is entry point to the software/program, this means every single program is divided into multiple files and they all need a single entry point, where the whole software can be started.
  • scripts
    scripts include "start": react start for react app or you can define your own scripts for example "start":"node main.js" to run main.js and may also be scripts to run test's on the software
  • author
    author is you😉, who is writing the program.
  • license
    A license for your program, in our case keep the default license itself.

How do I install a npm package?

Before we go to example, there are two ways to install npm package

  1. Locally
  2. Globally

    1. Installing packages Locally

    Installing packages locally means that it will only be accessible from that specific project folder. To install you can use the below command in CLI Syntax:
    npm install <name of the package/>
    
    example:
    npm install uuid
    

    2. Installing packages Globally

    Installing packages globally means that it will be accessible from anywhere in that system. this helps all the node.js applications on that computer can import and use the installed packages. Syntax:
    npm install -g <name of the package/>
    
    example:
    npm install -g @angular/cli
    

Now with the example below we will install uuid from npm and discuss some other important concepts you need to know

Installing UUID

You already know how to install packages, as we need uuid on this project directory only we will install uuid package locally.

npm install uuid

🧐 Did you notice any changes in files, after succesfull installation of uuid,node_modules folder and package-lock.json is also added in the project folder.

node_modules folder include all the packages and files that are requred to run uuid.

What does package-lock.json file do?

This file records the actual specific versions of each package and dependencies that you have installed on your local computer.
It looks like package.json, but with more description of the dependiecies, it holds the exact version number, resolved , integrety and holds a lot of other things.

  1. when app is in production stage, then we need a dependency tree to find out which version or which UUID or what are the other packages that you need to be installed in what proper order. So, in general this file is necessary in production.

Also you might have seen this

"uuid": "^9.0.0"

in package.json file, 🤔What does this "^" mean? for that let us deep dive to versioning again

Consider the below json data

{
"uuid": "^9.0.0",//it can upgrade to 9.2.3 or 9.3.4 or 9.0.3
"uuid": "~9.0.0",//it can upgrade to 9.0.3 or 9.0.4 etc
"uuid": "*",// it can upgrade to 10.0.0
"uuid": "9.0.0"
}
  1. "^" Means get me the latest UUID but please do not change the version or first number from 9 to 10 but you can chage any of the last number(security patches/bug fixes) or middle number(features).
  2. "~" Means get me the latest UUID but please do not change the version or first number, and middle number(features), but you can chage the last number(security patches/bug fixes).
  3. "*" Means get me the latest UUID and here there are no resitriction, you can change first number, middle number also last number.
  4. "9.0.0"Means I don't want any of the latest UUID, just give the exact number of what I am saying.

😅 Okay, finally let us create a entry point of our program i.e "main": "app.js"

touch app.js

In app.js we shall use UUID and create a random ID and log the ID in console

const { v4: uuidv4 } = require('uuid');
uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'

I got this code from the uuid documentation in npm.

Let us modify it a bit

const {
v4: uuidv4,
} = require('uuid');
const myid= uuidv4(); 

console.log(myid);

Conclusion🎊

You should now have a good understanding of what npm is, how to install npm packages, and most importantly, the semantic versioning used by npm.

I hope this helps someone out there!🤗