The Essential NPM Commands You Need to Know

The Essential NPM Commands You Need to Know

Hey Everyone! Today, I will be discussing essential npm commands that are crucial for developers and commonly used in our daily software development tasks.

  1. npm install _name_of_package

    In our development journey, making many side projects or installing dependencies, one of the major requirement is to frequently install different software or libraries in your computer system.

npm install _name_of_package

Suppose, I need this package for just styling my terminal ( just an example lol )

I will simply move to my project folder and write the below command in my terminal / Bash or whatever CLI:

Note: The specific name of the package (in this case "chalk") is mentioned on their official npm website. Just use your Googling skills for this.

npm install chalk
  1. npm init

    init is short for initialized.

    Before understanding its use-case, we should first know what a package.json file is.

Now, I should also tell you about dependencies first. As the name suggests, dependencies are software codes, packages, and libraries which we need in our project to make it work. So, our project is dependent on those things.

For example, if you are using React in one of your projects, React has several software/ libraries, etc it depends upon. These dependencies are:

  • React: The core React Library.

  • React DOM: The library that allows React to render to the DOM.

  • Babel: A JavaScript compiler that allows you to use modern JavaScript features in older browsers.

  • Webpack: A module bundler that packages your JavaScript code into a single file.

  • ESLint: A linter that helps you find errors in your code.

  • Prettier: A code formatter that helps you format your code consistently.

  • Jest: A testing framework that allows you to write tests for your React components.

These are just a few of the many dependencies of React. Now, keep in mind, that each dependency may have its own set of dependencies. This is a reason why, there are lots of memes on the Node_Modules folder being the heaviest object in the universe, probably more heavy than Thor's hammer. Why? because this folder stores all these software/dependencies.

node modules - Heaviest Objects In The Universe - devRant

Coming to the point, "npm init" creates a package.json file in our project folder. This package.json stores all the records of the names of these dependencies and their versions. It automatically updates itself when we install a new package remove one or install a newer version of the old package.

npm init

Why this is important? the main advantage is the 3rd command.

  1. npm install

    We talked about all the 1000s of dependencies and each having another set of dependencies, we don't have to manually install each all thanks to this command

npm install

But, now package.json comes into play. Suppose, you clone a project from Git Hub, when we install all main files of projects, we don't install dependencies with it. Nobody uploads the heaviest folder Node_modules on Git Hub. Sometimes, beginners make this mistake even I did but in general, we only are able to clone all the main index files, images, etc. We also get their package.json file. (The file which we clone from somewhere else is named package_lock.json.

This file tells us what dependencies the project is using, and npm reads all that and installs everything in one go!

Hence, package.json is very needed for collaboration and if you are working with other developers and for your own future reference too!

  1. npm create vite@latest

If you are a Vite fan like me, who likes the fast development environment Vite provides for projects, this command is the one that creates and sets up your new project.

npm create vite@latest

This will create our project folder in the current directory.

On hitting enter, it asks us questions like which framework we are using, react, next.js, angular, svelte, etc. and it also asks which language are we using, javaScript, typeScript, etc. and after everything, the project folder is created!

Now open your project folder in VS Code or any code editor and start coding🔥

  1. npm run dev

To run your project on localHost, just type this command in your project folder in the terminal. All Set!

npm run dev

These are the basic commands which I found useful to share with upcoming devs. There are many many more commands but we can always explore them on Sunday afternoons while surfing the internet and eating our lunch.

Thank you for reading and have a great week ahead! 😸