How To Start npm Project?

How To Start npm Project?

A lot of developers use npm for their projects. Npm is so useful feature for programmers. So how to install npm on your machine? How to packages?

Table of contents

  1. Install Node.js

  2. Create a project folder

  3. Launch npm

  4. Install npm packages

  5. Terminal command keys

  6. npm i events

  7. Overall

Step 1. Install Node.js

If you don’t have Node.js on your computer install Node.js from the official website. Why do we need Node.js? It’s simple. We need Node.js because npm is a separate project from Node.js. Simply, without Node.js you can’t get npm in your project.

node.js official website

If you already have Node.js on your computer check the version:

node -v

So check the npm version to verify you have the latest version: npm -v

Step 2. Create a project folder

If you don’t have a project folder at this step it’s time to create it. In the next steps, you will work with your project folder. You can use the terminal to create a folder. All you need to do is enter this command in your terminal:

mkdir folder-name

To verify that you created a folder run this:

ls

Also, you can use the basic way to create a folder. Maybe in the future, I’ll write an article about terminals and how they can save your time just ‘running’ in computer directories.

Step 3. Launch npm

If you start your project from scratch and don’t have a package.json file run this command in your project:

npm init --yes

It will create a basic package.json file in your project folder:

nodejs installation successful message

Step 4. Install npm packages

After we installed npm let’s install some packages. All dependencies install by the command npm install or in a short way npm i.

npm i eslint --save-dev --save-exact

We installed eslint in our project. But what are the weird words with dashes?

Step 5. Terminal command keys

What is --save-dev and --save-exact ? most terminal commands have additional settings. The settings call command keys. --save-dev and --save-exact are the specifying commands. They need it to clarify how to install the package.

--save-dev key will install the package in the devDependencies section in a package.json file. If you will forget this key your package will be installed in the dependencies section. It’s no problem but there is a logical split:

devDependencies packages need it for development, dependencies packages need it for an app working.

--save-exact is a key that says to install the exact version of the package (usually newer). If you will forget this key your package will be installed with ^ sign. That means “every version from and higher”. It’s okay, but if several developers will be working on your project, they in 90% will have a different version of the packages. That will be the issue.

Some keys have a short way, one hyphen and an initial letter. For example, -D is the same as that --save-dev or -E the same that --save-exact

npm i eslint -D -E

The pros of the short way are combining them and -D -E will be -DE

npm i eslint -DE

So the order is not important. You can type -ED too.

Step 6. npm i events

After we installed the first package in our project we can see some events:

package-lock.json will be formatted in your project directory. This file contains the version history of our dependencies. If you already have dependencies in your project the package-lock.json file will be updated. You have to commit it to your GitHub repository.

There will be created a new block in your package.json file called devDependencies(or updated).

And you can see a new folder in your project called node_modules. You don’t have to commit it. Why? Because all packages are stored in package.json file and after you open your project on a new computer or if you pull the repository from GitHub all you will need to do is install your packages by running npm i in the terminal. All your packages will be installed instantly. That’s AWESOME!

Package.json have a special section called scripts. In this section, you can set different scripts for launching.

{
  "scripts": {
    "lint": "eslint"
  }
}

In this example we have a lint script that will launch eslint in our project:

npm run lint

What does this command do? It will launch eslint package in the Node.js workspace. The ESLint is the program that analyzes your JavaScript code to find the problems.

Overall

In this article, we learned how to start npm from scratch in our future projects. And we are understood how to install packages, how to set them up, what we need to commit and what is better to add to .gitignore file. Thank you for reading this article.