Developer 101: Beginners Guide to NPM

What is NPM?

Photo by Petrebels on Unsplash

NPM or Node Package Manager is a powerful tool that plays a vital role in the JavaScript ecosystem. At its core, npm serves as a repository, housing a vast array of JavaScript packages, modules, and tools contributed by developers worldwide. These packages encapsulate functionalities, ranging from utility functions and libraries to full-fledged frameworks, enabling developers to extend the capabilities of their projects with ease. Many organizations use npm to manage private development as well.

With NPM, developers can efficiently manage dependencies, automate the installation of packages, and streamline the development process. Whether you're building a web application, a server-side application, or a command-line tool in JavaScript, NPM is an indispensable tool in your toolkit, allowing you to deliver high-quality applications in less time.

Simply npm can be said to consist of three distinct components:

• the NPMJS website
• the Command Line Interface (CLI)
• the registry

As a developer, you’ll use the website to discover packages, set up profiles, and manage other aspects of your npm experience. For example, you can set up organizations to manage access to public or private packages.

The CLI runs from a terminal and is how most developers interact with npm.

The registry is a large public database of JavaScript software and the meta-information surrounding it.

NPM comes bundled with Node.js installation, so when you install Node.js, npm automatically gets installed alongside it. Developers mostly use npm to:

1. to install, publish, and manage dependencies in their projects effortlessly.
2. Download standalone tooling built to work in the nodejs ecosystem for example NX when working with monorepos. Other examples include tools like Babel (for compiling JavaScript), Sass (for compiling CSS), webpack (for asset bundling), TypeScript, ESlint (for checking code quality); Prettier (formatting code), and testing libraries like Jest or Cypress.
3. Run packages without downloading using npx.
4. Share code with any npm user, anywhere in the world by bundling their code into npm package which they upload into the public registry.
5. Create organizations to coordinate package maintenance, coding, and developers.
6. Manage multiple versions of code and code dependencies.
7. Update applications easily when the underlying code is updated.

If you already have Node.js and npm installed, to check the installed version, run the following commands:

node -v
npm -v

You can use a Node installer to install both Node.js and npm on your system.

• Node.js installer
• NodeSource installer

If you use Linux, it is recommended that you use a NodeSource installer.

Besides node installers, I would recommend using a Node Version Manager. Node version managers allow you to install and switch between multiple versions of Node.js and npm on your system so you can run or test applications on multiple versions of npm to ensure they work for users on different versions. Examples of version managers include nvm and n for Macs and Linux-based OSes. Window-based version manager examples include nodist and nvm-windows.

Using NPM

Just to clarify, we will be using Angular as an example in our text. Angular is a commonly used JavaScript framework for developing web applications.

Once node has been setup on your PC, we’ll follow simple steps to add Angular CLI and an Angular project.

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

The command above is prefixed with npm to denote that you are running a node CLI command. Once the Angular CLI is installed, you can run commands in the npm context that have been defined as per the CLI docs.

To develop Angular apps, you have to be in the context of an Angular workspace.

To create a new workspace and initial starter app:

1. Run the CLI command ng new and provide the name my-app, as shown here:

ng new my-app

The ng new command will prompt you for information about features to include in the initial app. ng denotes here that you are running an Angular command added under the Angular CLI.

Accept the defaults by pressing the Enter or Return key. The Angular CLI also installs the necessary Angular npm packages and other dependencies.

The Angular CLI includes a server command for you to build and serve your app locally. To run the dev web server, navigate to the workspace folder and run the following command:

cd my-app
ng serve

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

Different CLIs define commands that may or may not take options. The example above takes the --open or -o option amongst others.

npm Scripts

Photo by Sasha Yudaev on Unsplash

npm provides a feature called npm scripts defined in the package.json file of your project and allows you to execute various tasks such as running tests, building your project, or deploying it. These scripts can be easily executed using the npm run command followed by the script name.

There is no need to memorize the Angular CLI commands and you can utilize npm scripts to run the CLI commands. For example, suppose you can create a script named start that starts your Angular application. You can define this script in your package.json file as follows:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "ng serve"
  }
}

To run the script use the following command to execute ng serve, which will start the development server for your Angular application.:

npm run start

Difference between Node Commands and Scripts

It’s important to note the difference between npm scripts and Node commands. Node commands are typically global commands installed on your system using npm, such as the ng command in the Angular example above added to the node context by installing the Angular CLI or npm added by default through the npm CLI.

These commands can be executed from any directory on your system. On the other hand, npm scripts are project-specific commands defined in your package.json file and are executed within the context of your project.

Custom npm Scripts

npm scripts are highly customizable, allowing you to define custom commands tailored to your project’s needs. For example, you can define scripts for running tests, linting your code, or deploying your application to a server. By leveraging npm scripts, you can automate repetitive tasks and streamline your development workflow.

While npm is used widely as a package manager for JavaScript, there are other alternatives available, such as Yarn and pnpm. These package managers offer similar functionality to npm but may provide additional features or optimizations. However, npm remains the default choice for most JavaScript developers due to its maturity and extensive ecosystem.

Refs:

npm: A Free Guide for Beginners | CSS-Tricks

A Comprehensive Beginner's Guide to NPM: Simplifying Package Management

npm Docs