The react-mui-sidebar, powered by Material-UI, is a helpful React NPM package designed to make it easier to build responsive and highly customizable sidebars.

In this article, we will explore the key aspects of react-mui-sidebar and how you can use it to elevate the sidebar experience in your React applications.

Table of Contents

• Prerequisites

• What is MUI (Material-UI)?

• Why Choose react-mui-sidebar?

• How to Get Started with react-mui-sidebar

• Wrapping Up

Prerequisites

Before diving into the tutorial, make sure you have the following:

• Basics of React like components, props, state, and JSX

• Familiarity with React Router or Next.js App Router so you know how linking/navigation works

• Understanding of Material-UI / MUI: theming, components, styling

• NPM / Yarn package usage: installing, importing, and managing dependencies

• Basic CSS / layout skills: Flexbox, widths, responsive design, and so on

Here’s what we’ll be building:

Here’s a live demo you can check out, too.

What is MUI (Material-UI)?

Material-UI is a widely adopted React UI framework that brings Google's Material Design principles to React applications. React MUI Sidebar leverages the strengths of Material-UI, providing a seamless integration for creating visually appealing and responsive sidebars.

Features of React MUI Sidebar

1. Responsive design: React MUI Sidebar ensures a consistent and adaptive layout across various screen sizes, catering to the increasing demand for mobile-friendly interfaces.

2. Customization options: You can easily change the appearance of the sidebar to match the overall design of you application, allowing for a cohesive and branded look.

3. Integration with React and Next.js: React MUI Sidebar seamlessly integrates with both React and Next.js, offering a familiar and efficient development experience.

4. User-friendly: React MUI Sidebar is designed with simplicity in mind, making it easy to incorporate into your projects. With intuitive documentation, you can quickly grasp and implement the sidebar functionality.

5. Icons support: The sidebar comes with built-in support for icons, helping you enhance the visual appeal and usability of your applications. You can use any icon library and provide the icon component.

6. Menu and submenu support: It provides a hierarchical structure with support for both main menus and nested submenus. This feature enables you to organize and present complex navigation structures in a clear and intuitive manner.

7. Smooth transitions: The sidebar incorporates smooth transition effects, enhancing the overall user experience by providing a visually pleasing navigation flow. Animations are thoughtfully implemented to avoid any jarring effects during sidebar interactions.

Why Choose react-mui-sidebar?

There are various reasons to use this helpful tool. Here are a few big ones:

Optimized Performance

react-mui-sidebar is designed and configured for high performance, ensuring smooth and responsive user interactions. Internally, it minimizes re-renders via memoization so that only parts of the menu that actually change are updated. It uses lightweight DOM structure and conditional rendering of nested items to avoid unnecessary mounting.

Since it's built on MUI, it also leverages efficient styling via the sx prop or styled components rather than heavy theme recalculations.

These features are crucial for applications, especially those with complex or intricate user interfaces, where performance issues can negatively impact the user experience.

Community Strength

React MUI Sidebar benefits from a large and active user base thanks in part to the large and active Material UI community. This is helpful for users because it means there's a wealth of resources, tutorials, and assistance available.

A strong community can contribute to the growth of the framework, provide solutions to common issues, and foster collaboration among developers.

Reliable Maintenance

react-mui-sidebar is actively supported by consistent updates and proactive maintenance from its community. Regular updates often include bug fixes, security patches, and new features, which help make sure that the framework remains current and adaptable to users’ evolving needs. This is especially important for long-term projects, and shows a commitment to the ongoing improvement and support of the framework.

How to Get Started with react-mui-sidebar

In this tutorial, I’ll walk you through installing and setting up react-mui-sidebar in a React and Next.js application. You’ll learn how to integrate the sidebar, add a logo, create menus, and use links.

Step 1: Install react-mui-sidebar

To begin, you’ll need to install the react-mui-sidebar package into your React and Next.js project. You can do this using either npm or yarn.

Using npm:

npm install react-mui-sidebar

Using yarn:

yarn add react-mui-sidebar

This will add react-mui-sidebar and its dependencies to your project.

Step 2: Import the React MUI Sidebar Component

Once the package is installed, you can import the necessary components from react-mui-sidebar into your project. These components will allow you to customize the sidebar with menus, submenus, and even a logo.

import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";

Step 3: Set Up Routing for React App or Next.js App

To enable navigation inside react-mui-sidebar components like MenuItem or Logo, you need to pass a link component from either react-router or next/link using the component prop inside the corresponding component like what’s shown in the below example:

If you're using React Router:

import { Link } from "react-router-dom";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo
        component={Link}  // Passing link to component for routing
        href="/"
        img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
      >
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem
          icon={<CottageOutlinedIcon />}
          component={Link} // Passing link to component for routing
          link="/tes"
          badge={true}
          isSelected={true}
        >
          {" "}
          {/* text for your link */}
          Link Text
        </MenuItem>
      </Menu>
    </Sidebar>
  );
};

export default App;

If you're using Next.js App Router:

import Link from "next/link";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo
        component={Link}  // Passing link to component for routing
        href="/"
        img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
      >
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem
          icon={<CottageOutlinedIcon />}
          component={Link} // Passing link to component for routing
          link="/tes"
          badge={true}
          isSelected={true}
        >
          {" "}
          {/* text for your link */}
          Link Text
        </MenuItem>
      </Menu>
    </Sidebar>
  );
};

export default App;

Step 4: Initialize the Sidebar

Now we’ll set up the Sidebar component in your application. You can set the width of the sidebar using the width prop. Here’s a simple example:

<Sidebar width={"270px"}> // pass the width you want your sidebar to have
  {/* Sidebar Content Goes Here */}
</Sidebar>

This initializes the sidebar with a width of 270px. You can adjust this width based on your design requirements.

Step 5: Add a Logo to the Sidebar

You can add a logo inside the sidebar by using the Logo component. To do so, you can provide an src URL or use the img prop to link to a CDN logo image. You can also make the logo clickable by passing a navigation link using the component and href props. Here’s how to do this:

<Sidebar width={"270px"}>
  <Logo 
    component={Link} 
    href=”/”
    img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png" // path for image you want to use as your logo
  >
    AdminMart
  </Logo>
</Sidebar>

In this example, we’ve added a logo from a CDN using the img prop, used the component prop to pass the Link, and set the navigation path to (/) (the homepage) using the href prop. We’ve also set the text “AdminMart” as the name of the application.

Step 6: Create a Menu Inside the Sidebar

Now let’s create a menu inside the sidebar using the Menu component. You can specify a submenu heading using the subHeading prop. Inside the Menu, you can add MenuItem components for each item.

You can also provide a link prop along with the component prop to the MenuItem to turn the item into a clickable link.

Here’s how you can structure the menu:

<Sidebar width={"270px"}>
  <Menu subHeading="HOME">
    <MenuItem component={Link}  link="/"  badge=”true”  isSelected={true} >
      Modern
    </MenuItem>
    <MenuItem>eCommerce</MenuItem>
    <MenuItem>Analytical</MenuItem>
  </Menu>
</Sidebar>

In this example:

• We’ve added a Menu with the heading “HOME”.

• The first MenuItem has a link prop, so clicking it will navigate to the homepage (/).

• The second and third MenuItem components are simple text items without links.

The badge="true" prop can be used to indicate a badge or notification on the MenuItem, and the isSelected={true} prop marks this menu item as currently selected or active. You can customize this feature according to your needs.

Step 7: Add Submenus (Optional)

To add submenus inside the main menu, you can use the Submenu component. The Submenu can be nested inside the Menu component and contains its own set of MenuItems. Use the title prop to set the submenu heading

Here’s an example of adding a submenu:

<Sidebar width={"270px"}>
  <Menu subHeading="SERVICES">
    <MenuItem  component={Link}   link="/web-development">Web Development</MenuItem>
    <MenuItem   component={Link}  link="/seo-services">SEO Services</MenuItem>
    <Submenu title="Marketing">
      <MenuItem  component={Link}  link="/digital-marketing">Digital Marketing</MenuItem>
      <MenuItem  component={Link}  link="/content-marketing">Content Marketing</MenuItem>
    </Submenu>
  </Menu>
</Sidebar>

In this example:

• A submenu under the "Marketing" heading is added inside the "SERVICES" menu.

• The submenu contains two MenuItems with links to different service pages.

Wrapping Up

You have now successfully integrated a fully functional sidebar in your React and Next.js application using react-mui-sidebar. You can further customize the sidebar by:

• Modifying the width and design.

• Adding more submenus, menu items, or icons.

• Using links to navigate between pages.

This setup provides a flexible, responsive, and easy-to-use sidebar, which is perfect for most web applications.

Try It Out:

You can view the working demo of the react-mui-sidebar here: View Demo.

Note: in this tutorial, we utilized Material UI Icons to construct this sidebar. Feel free to choose an alternative library or use different icons based on your specific requirements.

This article will guide you through the basics of npm, explain how it functions behind the scenes, and demonstrate step-by-step how to create and publish your own npm package to the official npm registry. Whether you’re a beginner just starting with JavaScript or a seasoned developer who has used npm but never published a package, this guide will help you confidently navigate the entire process, from setup to sharing your code with the global developer community.

Table of Contents

• What is npm?

• Components of npm

• The Command Line Interface

• The Registry

• The Website

• What is the Package.json File?

• How npm Works

• How to Publish an npm Library

• How to Verify and Install Your Package

• How to Update Your Package

• Notes and Best Practices

• Beyond the Basics

• Conclusion

What is npm?

npm, which stands for Node Package Manager, is a command-line tool for installing and managing JavaScript packages. It is an ecosystem that powers modern JavaScript development (Node.js, frontend tools, frameworks, and so on). Developers use npm to share and borrow packages, and many organizations use npm to manage private development.

Essentially, npm is to JavaScript what pip is to Python or Maven to Java. It enables developers to reuse code written by others (most of the time to fulfil a function in their project), manage dependencies, and share their own code with the world.

You can use npm to:

• Get and utilize code packages in your applications, either as-is or with custom modifications.

• Download and run standalone tools instantly.

• Execute packages directly from the registry without installing them using npx.

• Share your own code with developers around the world through the npm registry.

• Limit access to specific packages so only approved developers can use them.

• Create organizations to manage code, teams, and packages in one place.

• Collaborate as virtual teams using shared organizational accounts.

• Handle different versions of packages and their dependencies with ease.

• Keep your applications up to date by syncing with the latest package updates.

• Explore different packages that offer various solutions to the same problem.

• Connect with developers working on similar challenges and projects.

Components of npm

npm consists of three core components:

• The command line interface (CLI)

• The registry

• The website

The Command Line Interface

There are different npm commands you can run on your terminal. For example, npm init can be used to initialize a Node project, npm install can be used to install a package. It also allows you to do things like:

• Publish packages (npm publish)

• Update packages (npm update)

• Manage versioning (npm version)

• Run scripts (npm run build, npm test, and so on)

Think of it as your control panel.

The Registry

You can find the huge public database at https://registry.npmjs.org, where packages are stored and shared. It also contains all the meta-information surrounding the package.

Example, when you run:

npm install express

npm fetches the Express package from the registry.

The npm registry enables collaboration by allowing developers to:

• Publish their own packages

• Install packages created by others

• Discover new tools and libraries

Its collaboration features include:

• Open-source packages: The code is publicly visible (usually hosted on GitHub).

• Versioning: Multiple versions of the same package let users safely adopt updates.

• Scoped packages: Namespaces allow teams and organizations to manage ownership.

• Issues & pull requests: Most npm packages link to GitHub, allowing developers too contribute fixes and enhancements.

• Organisations: Teams can manage access to shared private or public packages.

The Website

At https://www.npmjs.com, this is where you can:

• Browse packages.

• Read documentation.

• View download stats and dependencies.

• Create and manage your account, organization, and package access.

What is the Package.json File?

A very important component of any npm tool that you’ll come across as a JavaScript developer installing an npm package, is the package.json file. It is a metadata file that lives at the root of every npm or Node project. It tells npm (and other tools) everything it needs to know about your project, like:

• What the project is called.

• What it depends on

• How to run it

• How to version it

• and how to publish it

You can think of it like the blueprint of your JavaScript project. Without it, npm doesn't know how to work with your code.

You can create a package.json file by typing the command npm init in your terminal and filling in the prompts provided. Alternatively, you can create a file named package.json and manually populate it with JSON content.

Key Fields in an npm package.json File

The following is a list of commonly used fields and how they interact with npm:

1. name and version

    "name": "my-awesome-package",
    "version": "1.0.0"
   

   • This is required for publishing.

   • name must be unique (if publishing to the public npm registry).

   • version follows semantic versioning (semver) (for example, major.minor.patch).

2. description, keywords, author, and license

    "description": "A utility to convert markdown to HTML",
    "keywords": ["markdown", "html", "converter"],
    "author": "Ikegah Oliver",
    "license": "MIT"
   

   • Helps npm users discover your package

   • Show up on npmjs.com.

   • Sets collaboratory license

3. scripts

    "scripts": {
      "start": "node index.js",
      "test": "jest",
      "build": "tsc"
    }
   

   • Defines custom commands.

   • Run with npm run test, npm run build, and so on.

   • Automates build, test, lint, deploy processes.

4. main and exports

    "main": "dist/index.js",
    "exports": {
      ".": "./dist/index.js"
    }
   

   • main: Entry point for require() or import.

   • exports: Controls exactly what parts of your package are exposed (especially useful for modern ESM and package security).

5. dependencies and devDependencies

    "dependencies": {
      "express": "^4.18.2"
    },
    "devDependencies": {
      "eslint": "^8.0.0",
      "jest": "^29.0.0"
    }
   

   • dependencies : Core packages your project needs to run in production (for example, express).

   • devDependencies : Packages used only during development, like testing or build tools (for example, jest).

6. engines

    "engines": {
      "node": ">=14.0.0"
    }
   

   • Specifies Node.js version your package supports.

   • Helps warn users before they install with an unsupported version.

7. private

    "private":"true"
   

   • Prevents accidental publishing to the public npm registry.

   • Used for monorepos and internal-only projects.

8. files (optional)

    "files":["/dist", "README.md"]
   

   • Controls what files get included when you run npm publish.

   • Reduces package size, omits build artifacts or test files.

A minimal npm package.json file looks like this:

{
  "name": "@oliver/markdown-to-html",
  "version": "1.0.0",
  "description": "Converts markdown to HTML with styles",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "test": "jest"
  },
  "keywords": ["markdown", "html", "converter"],
  "author": "Ikegah Oliver",
  "license": "MIT",
  "dependencies": {
    "marked": "^5.0.0"
  },
  "devDependencies": {
    "jest": "^29.0.0"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "files": ["dist/", "README.md"]
}

The package.json file plays a central role in every npm workflow. It defines your project's identity, lists its dependencies, specifies useful scripts, and outlines how the package should behave when published. Without it, npm can't properly install packages, run commands, or publish your code to the registry.

How npm Works

When you type npm install in your terminal, npm initiates a behind-the-scenes process to install the necessary packages for your project. Depending on how you run the command, the process varies slightly as follows:

Method 1 - package.json Already Has Dependencies

If your package.json lists packages under dependencies or devDependencies, npm will:

1. Read those entries: It looks at the names and version ranges of each dependency.

2. Contact the registry: npm queries https://registry.npmjs.org to fetch metadata about each required package.

3. Download the correct versions: It selects versions that match your version rules (such as ^4.17.0) and downloads the .tgz files.

4. Unpack and install: It places the packages into the node_modules directory and caches them.

5. Update package-lock.json: It logs the exact versions and dependency tree in this file to ensure consistent installs later.

Method 2 - You Run npm install <package-name> Without Existing Dependencies

If your package.json doesn't have any dependencies yet and you run something like this in your terminal:

npm install express

Then npm will run:

1. Resolve the package version: It fetches the latest version of Express (unless you specify a version manually).

2. Download and install: The tarball is downloaded and placed in the node_modules/ folder that is automatically generated. A tarball is the zipped-up version of the package (express in this case), containing the package’s JavaScript files, a package.json, a README, and anything else the author included for distribution that npm downloads and extracts onto your machine.

3. Add to package.json: npm automatically adds the package to your dependencies list like this:

"dependencies": {
  "express": "^4.18.2"
}

4. Create a package-lock.json (if it doesn't exist): It writes all the version info to lock things down for future installs.

Note: If you run npm install --save-dev jestIt’ll add the package under devDependencies instead.

How to Publish an npm Library

To follow through with this guide section, you will need to have the following prerequisites:

• Stable network connection

• A code editor with a terminal (like VSCode)

• Basic knowledge of JavaScript and Node

• A basic understanding of the Markdown Markup language (for README documentation)

Now, let’s dive into publishing an npm library. Assuming you just built and tested a fantastic JavaScript tool that you would like to share with the world, and allow people to use it in their projects and applications, the steps below will guide you from having the tool on your local machine to making it publicly available as an npm package for anyone to install and enjoy:

Step 1: Create a free npm account

Before publishing, you will need an npm account.

• Go to https://www.npmjs.com/signup.

• Fill in the form with your username, email, and password.

• Confirm your email address by clicking the link in the verification email.

Step 2: Log in from the Command Line

Once you’ve created your account, you need to log in through your terminal. Run:

npm login

npm will prompt you for your username, password, and email address. If everything is correct, npm will generate an authentication token and store it locally, so you don’t have to log in every time.

Step 3: Create a package.json file

If your project doesn't already have a package.json file, create one by typing this command in your terminal:

npm init

You will be prompted to fill in the following information:

• name: Must be unique if it’s public.

• version: Start with 1.0.0 (it represents the first version of your project; subsequently, you will change it accordingly after each update push)

• description: One-line summary of your package.

• entry point: Entry file of your project, usually index.js or dist/index.js.

• keywords: Help others discover your package.

• author: Your name or GitHub handle.

• license: Use MIT, ISC, or another open-source license.

When you’re done, npm will generate a package.json like this:

{
  "name": "my-awesome-package",
  "version": "1.0.0",
  "description": "A demo package for npm publishing",
  "main": "index.js",
  "keywords": ["demo", "npm", "tutorial"],
  "author": "Your Name",
  "license": "MIT"
}

Step 4: Add a README.md

Explain what your package does and how to use it in a README.md file. The README appears on your package page on npmjs.com. Example content:

# my-awesome-package

A simple package that says hello.

## Usage

```js
const greet = require('my-awesome-package');
console.log(greet('Oliver'));
// Output: Hello, Oliver!

Step 5:Add an .npmignore file

This will exclude folders like node_modules, dist, or .env, and any other file or folder within the package you don’t wish to publish. Example content:

node_modules
.env
dist

Step 6: Check if the package name you chose is available

Before publishing, check if the package name you chose is not already taken. To check, run this command on your terminal:

npm search my-awesome-package

Or enter the URL https://www.npmjs.com/package/my-awesome-package in your browser (replace my-awesome-package with the name you chose). If no package page shows up, the name is not taken.

If the package name has been taken, change it in your package.json and any documentation (README.md), the name is reflected, or publish it under a scope. A scope is like a namespace tied to your npm username or organization. It ensures your package name is unique, even if the base name is common. For example, if my-awesome-package is taken, you can publish under a scope by setting the name section in its package.json like this:

{
  "name": "@yourname/my-awesome-package"
}

Step 6: Publish your package

You are now ready to publish. Run:

npm publish

If you used a scoped name, when publishing, you must make it public:

npm publish --access public

If everything is valid, npm will publish your package and give you a URL like:

https://www.npmjs.com/package/my-awesome-package

How to Verify and Install Your Package

Visit your project page on npm to see it live. For example: https://www.npmjs.com/package/my-awesome-package, or search your project name on the npm website search bar.

Now, try installing it in a node project:

npm install my-awesome-package

Test out its features and functionalities, depending on what it is built to do.

How to Update Your Package

If you make changes or update features in your package, you can publish the update.

After applying your changes, you can update the version in your package.json. Using semantic versioning, you can update it as follows:

• Patch update: 1.0.0 → 1.0.1

• Minor update: 1.0.0 → 1.1.0

• Major update: 1.0.0 → 2.0.0

Or you can use the CLI:

npm version <update_type>

Replace <update_type> with your new semantic version.

Now run:

npm publish

Notes and Best Practices

Although publishing to npm is straightforward, you still need to follow best practices to maintain a clean, secure, and user-friendly package.

• Exclude Sensitive Files: Never include .env, credentials, or secrets. Use .npmignore or the "files" field in package.json to control what gets published.

• Test Before Publishing: Run npm pack to preview the package and install it locally in another project to ensure everything works.

• Unpublish Carefully: You can unpublish within 72 hours using npm unpublish --force, but avoid doing this frequently to prevent breaking other projects that rely on your package.

• Always Bump the Version: npm won’t let you overwrite a version, so use semantic versioning (npm version patch|minor|major) before publishing updates.

• Add Essentials: Include a clear README.md file, a license, and relevant keywords to make your package discoverable and easy to use.

Beyond the Basics

Now that you've got the hang of the basics, you can put your npm skills to work and level up as a developer. Here are some simple, practical steps you can take:

Get Involved in Open Source

One of the best ways to gain real-world experience is by contributing to existing projects on npm. Check out their repositories on GitHub and GitLab and see how you can contribute to them. This teaches you how to collaborate, handle code reviews, and manage versions. A great way to start is by looking for projects on GitHub with a "good first issue" label.

Maintain Your Own Package

Publishing is just the first step. To truly master the process, keep your package up to date. This involves fixing bugs, listening to user feedback, and adding new features. You will quickly learn about versioning, ensuring your package remains compatible with older projects, and effectively manage dependencies.

Dig into Advanced Features

Explore advanced npm topics like semantic versioning, using private packages, creating scoped packages, and automating your releases with CI/CD pipelines. These are essential skills for any professional developer.

Taking these steps will help you transition from merely understanding npm to confidently utilizing it in real-world scenarios.

Conclusion

Congratulations! You have now learned the essentials of npm from the package.json file to publishing and maintaining a JavaScript package with the npm library. With this knowledge, you can share your JavaScript tools with the world, collaborate with other developers, and contribute to the growing ecosystem of open-source libraries.

By following best practices, testing locally, and learning from standard errors, you can confidently create packages that are clean, secure, and useful for other developers. Whether you’re building a small utility or a full-fledged framework, publishing on npm gives your ideas visibility and helps you contribute to the wider JavaScript community.

If you’d like to get hands-on experience collaborating on a real package, I published an npm project called route-pilot, a powerful CLI tool for testing and analyzing Express.js routes in your Node.js applications. I’m actively seeking contributors who want to enhance the code, add new features, or refine the documentation. It’s a simple way to practice working with npm in a collaborative setting while learning more about open-source development. Head over to the GitHub repo and join in. We’d love to have you on board!

Another popular package manager is Yarn, which offers faster and more reliable dependency management while maintaining compatibility with the npm ecosystem.

In this article, we'll explore what npm libraries are, their benefits, and how they enhance the JavaScript and React ecosystem. We'll also go through a practical step-by-step guide on creating, publishing, and using your own npm library in a React project. We’ll also compare npm and Yarn, showing how you can use either of them effectively in your workflow.

By the end of this tutorial, you'll have a clear understanding of how to package and distribute your own code, making it reusable across multiple projects and even available to the wider developer community.

Table of Contents

1. What is npm?

   • How npm works

   • The role of the package.json file

   • Key npm Commands

2. Why Use npm Libraries?

   • Code reuse and modularization

   • Simplified dependency management

   • Community-driven ecosystem

3. Introducing Yarn: An Alternative to npm

   • What is Yarn?

   • Differences between npm and Yarn

   • When to use Yarn instead of npm

4. How to Create Your Own npm Library

   • Setting up a new package

   • Writing modular and reusable code

   • Adding dependencies and peer dependencies

5. How to Publish Your Library to npm

   • Creating an npm account

   • Configuring package.json for Publishing

   • Publishing the package

6. How to Use Your npm Library in a React Project

   • Installing your package

   • Importing and using the package in a React component

   • Handling package updates and versioning

7. Best Practices for npm and Yarn Libraries

   • Write Meaningful Documentation

   • Follow Semantic Versioning (SemVer)

   • Keep Dependencies Up to Date

   • Write Unit Tests for Your Library

   • Ensure Cross-Platform Compatibility

8. Conclusion & Next Steps

   • Recap of key points

   • Additional resources for npm and Yarn library development

   • Encouragement to contribute to open-source

What is npm?

npm (Node Package Manager) is the default package manager for JavaScript and Node.js. It allows developers to install, share, and manage libraries or dependencies that make building applications easier and more efficient.

npm provides access to a vast ecosystem of open-source packages hosted on the npm registry, making it one of the largest software repositories in the world.

npm comes bundled with Node.js, meaning that once you install Node.js, you automatically have access to npm. You can check if npm is installed by running the following command in your terminal:

npm -v

This command should return the version of npm installed on your system.

How npm Works

npm operates through three key components:

1. The npm Registry – A public repository that hosts open-source JavaScript packages.

2. The npm CLI (Command Line Interface) – A tool that allows developers to install, update, and manage packages from the command line.

3. The package.json File – A metadata file that keeps track of dependencies, scripts, and project configurations.

When you install a package using npm, it pulls the package from the registry and saves it in the node_modules folder within your project.

For example, to install Lodash, a popular utility library, you would run:

npm install lodash

This will:

• Download the latest version of lodash from the npm registry

• Add it to your node_modules folder

• Update the package.json and package-lock.json files to reflect the new dependency

The Role of package.json

The package.json file is the heart of any npm project. It serves as a blueprint, containing information about the project, including:

• Project metadata (name, version, description)

• Dependencies (external packages required for the project)

• Scripts (commands to automate tasks like starting a server or running tests)

• Versioning information (ensuring compatibility between different versions of dependencies)

A typical package.json file looks like this:

{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "description": "A sample project demonstrating npm usage",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"No tests specified\" && exit 0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

• dependencies – Lists essential packages required for the application to function.

• devDependencies – Includes development-only dependencies (for example, testing and linting tools).

• scripts – Defines CLI commands for automating tasks.

To install all dependencies listed in package.json, simply run:

npm install

This ensures all required packages are downloaded and ready for use.

Key npm Commands

Here are some essential npm commands you’ll use frequently:

Why Use npm Libraries?

As modern web development grows in complexity, using npm libraries has become essential for building scalable and maintainable applications. Instead of writing everything from scratch, you can leverage pre-built, tested, and optimized libraries to speed up development and ensure reliability.

In this section, we’ll explore the key advantages of using npm libraries and why they are crucial in JavaScript and React development.

Code Reuse and Modularization

One of the biggest benefits of npm libraries is code reuse. Instead of repeatedly writing the same functions or utilities in different projects, developers can:

• ✅ Use existing open-source packages for common functionalities (for example, date formatting, HTTP requests, UI components).

• ✅ Create and publish their own reusable libraries to share across multiple projects.

For example, instead of manually implementing a function to format dates, you can install a well-maintained package like date-fns:

npm install date-fns

Then, you can use it in your project:

import { format } from "date-fns";

const formattedDate = format(new Date(), "yyyy-MM-dd");
console.log(formattedDate); // Outputs: 2024-02-04 (or the current date)

This modular approach saves time and ensures consistency across projects.

Simplified Dependency Management

npm makes it easy to manage dependencies in a project. Instead of manually downloading and maintaining different versions of external libraries, npm automates this process through the package.json and package-lock.json files.

Some key features include:

🔹 Automatic installation – Run npm install, and all dependencies are set up.
🔹 Version control – Specify package versions to avoid breaking changes.
🔹 Peer dependencies – Ensure compatibility between different libraries.

For example, here’s how npm helps manage dependency versions in package.json:

"dependencies": {
  "react": "^18.0.0",
  "axios": "^1.5.0"
}

• ^18.0.0 – Allows minor updates but prevents major breaking changes.

• axios – Ensures HTTP requests are handled consistently across different projects.

To update all dependencies safely, run:

npm update

This ensures your project is always running on the latest stable versions.

Community-Driven Ecosystem

npm has an active and growing community, meaning developers around the world contribute and maintain thousands of useful libraries. This results in:

🌎 Faster development – No need to reinvent the wheel.
🛠️ Well-tested solutions – Many libraries are battle-tested in production environments.
📚 Rich documentation – Most npm packages come with clear usage instructions and examples.

Popular npm libraries include:

For example, using Axios to make an API request:

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

This replaces the need for writing complex fetch requests with error handling manually.

Introducing Yarn: An Alternative to npm

While npm is the default package manager for Node.js, another powerful alternative exists: Yarn. Developed by Facebook in 2016, Yarn was created to improve speed, security, and reliability in dependency management.

In this section, we’ll explore what Yarn is, how it differs from npm, and when you might prefer using Yarn over npm.

What is Yarn?

Yarn (Yet Another Resource Negotiator) is a package manager that works similarly to npm but with a focus on performance, security, and consistency. It offers:

🚀 Faster dependency installation thanks to parallel downloads
🔐 More secure package management using checksum verification
📦 Reliable dependency resolution with an offline cache

To check if you have Yarn installed, run:

yarn -v

If you don’t have it yet, you can install it globally using npm:

npm install --global yarn

Once installed, you can use it just like npm to manage dependencies.

Differences Between npm and Yarn

Although npm and Yarn serve the same purpose, they have some key differences:

Performance Comparison

When installing dependencies, Yarn is often faster because it downloads packages in parallel, while npm installs them sequentially.

For example, to install all dependencies in a project:

# With npm
npm install

# With Yarn
yarn install

Yarn can also install packages from a local cache, meaning it doesn't always need to fetch dependencies from the internet.

Common Yarn Commands vs. npm

Many npm commands have an equivalent in Yarn:

For example, installing axios using Yarn:

yarn add axios

When to Use Yarn Instead of npm

Yarn is a great choice when:

• You want faster installations – Yarn installs multiple packages in parallel, making it faster than npm.

• You need better dependency consistency – The yarn.lock file ensures that all developers use the same dependency versions.

• You're working with monorepos – Yarn’s built-in workspaces make it easier to manage multiple projects within the same repository.

• You want improved security – Yarn’s checksum verification prevents corrupted packages from being installed.

Still, npm has improved significantly in recent years, especially with npm v7+, making it a viable choice for most projects.

Switching Between npm and Yarn

If your project was originally set up using npm but you want to switch to Yarn, you can:

1️⃣ Delete node_modules and package-lock.json

rm -rf node_modules package-lock.json

2️⃣ Run Yarn to install dependencies

yarn install

This will generate a yarn.lock file, ensuring all dependencies are managed by Yarn moving forward.

Both npm and Yarn are powerful tools for package management. Choosing between them depends on your project’s needs:

✔️ Use npm if you want the default, widely used package manager that works well with most projects.
✔️ Use Yarn if you need faster installs, better security, and monorepo support.

Ultimately, both tools allow you to install, manage, and publish JavaScript packages efficiently.

How to Create Your Own npm Library

Creating your own npm library is a great way to share reusable code, contribute to the open-source community, or even streamline development across multiple projects. In this section, we’ll walk through the step-by-step process of setting up, coding, and preparing a library for publishing on npm.

Setting Up a New Package

Before writing code, you need to set up an npm package. Follow these steps:

Step 1: Create a New Project Folder

mkdir my-awesome-library
cd my-awesome-library

Step 2: Initialize npm

Run the following command to create a package.json file:

npm init

You will be prompted to enter details such as:

• Package name

• Version

• Description

• Entry point (default: index.js)

• Author

• License

💡 To skip the prompts and create a default package.json, use:

npm init -y

Writing Modular and Reusable Code

Now, let’s create a simple utility library that provides a function to format dates.

Step 3: Create an index.js File

Inside the project folder, create a file named index.js and add the following code:

function formatDate(date) {
  if (!(date instanceof Date)) {
    throw new Error("Invalid date");
  }
  return date.toISOString().split("T")[0];
}

module.exports = { formatDate };

Adding Dependencies and Peer Dependencies

Your library might depend on external packages. For example, let’s use date-fns for better date formatting.

To install it as a dependency, run:

npm install date-fns

Then, modify index.js to use date-fns:

const { format } = require("date-fns");

function formatDate(date) {
  if (!(date instanceof Date)) {
    throw new Error("Invalid date");
  }
  return format(date, "yyyy-MM-dd");
}

module.exports = { formatDate };

If you're creating a React-specific library, you should add React as a peer dependency:

npm install react --save-peer

This ensures users of your library install React separately, preventing version conflicts.

Before publishing, you should test how your package works when installed as a dependency.

Step 4: Link the Package Locally

Run the following command in your package folder:

npm link

Then, in another project where you want to use your package, navigate to that project and run:

npm link my-awesome-library

Now, you can import and use your function:

const { formatDate } = require("my-awesome-library");

console.log(formatDate(new Date())); // Output: 2025-02-04 (or the current date)

Once you're happy with your package, it's time to publish it on npm.

How to Publish Your Library to npm

Now that we’ve created our npm package, the next step is publishing it to the npm registry so others can install and use it. In this section, we’ll cover how to publish the package step by step.

Creating an npm Account

Before publishing, you need an npm account.

Step 1: Sign Up for npm

1. Go to https://www.npmjs.com/signup and create an account.

2. Verify your email address.

Step 2: Log in to npm from the Terminal

Run the following command in your terminal:

npm login

You will be prompted to enter:

• Your npm username

• Your password

• Your email (associated with your npm account)

If the login is successful, you’ll see a message:

Logged in as your-username on https://registry.npmjs.org/

Configuring package.json for Publishing

Step 3: Ensure Your Package Name is Unique

Every npm package needs a unique name. Run the following command to check if your desired name is available:

npm search my-awesome-library

If the name is already taken, you’ll need to modify package.json and change the "name" field.

Step 4: Add Metadata and Keywords

Open package.json and ensure it includes useful metadata:

{
  "name": "my-awesome-library",
  "version": "1.0.0",
  "description": "A simple npm package for formatting dates",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/yourusername/my-awesome-library.git"
  },
  "keywords": ["date", "formatter", "utility", "npm package"],
  "author": "Your Name <your-email@example.com>",
  "license": "MIT"
}

🔹 repository – Useful if you plan to host the project on GitHub.
🔹 keywords – Helps people discover your package on npm.
🔹 license – Specifies how others can use your package (for example, MIT, GPL, and so on).

Publishing the Package

Step 5: Publish Your Package to npm

Run the following command inside your project folder:

npm publish

If successful, you’ll see output similar to:

+ my-awesome-library@1.0.0

Your package is now available at:

📌 https://www.npmjs.com/package/my-awesome-library

Step 6: Making Changes and Updating the Package

If you want to release a new version, update the version field in package.json. npm follows Semantic Versioning (SemVer):

• Patch: Bug fixes (1.0.0 → 1.0.1)

• Minor: New features, backward-compatible (1.0.0 → 1.1.0)

• Major: Breaking changes (1.0.0 → 2.0.0)

Instead of manually updating package.json, use:

npm version patch   # 1.0.0 → 1.0.1
npm version minor   # 1.0.0 → 1.1.0
npm version major   # 1.0.0 → 2.0.0

Then, publish the new version:

npm publish

If you accidentally publish a package and need to remove it:

npm unpublish my-awesome-library --force

⚠️ Note: You can only unpublish packages within 72 hours of publishing.

🎯 You’ve successfully published your own npm library! Now, other developers can install it using:

npm install my-awesome-library

By following Semantic Versioning, writing clear documentation, and maintaining your package, you contribute to the open-source ecosystem and make your code reusable.

How to Use Your npm Library in a React Project

Now that we’ve published our npm package, let’s see how to install, import, and use it inside a React project created with Vite. This section will guide you through the process using both npm and Yarn.

Installing Your Package

Step 1: Create a New React Project with Vite (if needed)

If you don’t have an existing React project, create one using Vite:

Using npm

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

Using Yarn

yarn create vite@latest my-react-app --template react
cd my-react-app
yarn install

Once the installation is complete, you can start the development server:

npm run dev

or

yarn dev

Step 2: Install Your npm Package

Now, install the npm library we created earlier (my-awesome-library).

Using npm

npm install my-awesome-library

Using Yarn

yarn add my-awesome-library

Importing and Using the Library in a React Component

Once installed, you can use the library inside a React component.

Open src/App.jsx and modify it as follows:

import React from "react";
import { formatDate } from "my-awesome-library";

function App() {
  const today = new Date();
  return (
    <div>
      <h1>Formatted Date</h1>
      <p>{formatDate(today)}</p>
    </div>
  );
}

export default App;

Now, run your Vite React app:

npm run dev

Or with Yarn:

yarn dev

This will display a formatted date on the webpage, confirming that our library is working!

Handling Package Updates and Versioning

To update your npm package in your project:

Using npm

npm update my-awesome-library

Using Yarn

yarn upgrade my-awesome-library

If you want to check outdated dependencies:

npm outdated

or

yarn outdated

Using a Local Version of Your Package in Development

If you’re still making changes to your npm package and want to test it in your React project before publishing, you can use npm link or yarn link.

Step 1: Link Your Package Locally

Go to your package’s project folder:

cd ~/path-to-my-awesome-library
npm link

or

yarn link

Step 2: Use It in Your React Project

Navigate to your React app and link the package:

cd ~/path-to-my-react-app
npm link my-awesome-library

or

yarn link my-awesome-library

Now, when you import and use my-awesome-library, it will use the local version instead of the published one.

Publishing an Update to Your Package

If you’ve made changes to your package and want to publish a new version:

1️⃣ Update the version number in package.json (use npm version patch for small updates).
2️⃣ Run npm publish to upload the new version.
3️⃣ Run npm update my-awesome-library in your React project to get the latest version.

Final Thoughts on Using npm Libraries in React (Vite Edition)

By now, you should have a fully functional npm package and know how to install, use, and update it in a React project using Vite.

✔️ Vite is faster than Create React App and provides better performance for development.
✔️ npm and Yarn make dependency management easy.
✔️ npm link allows local testing before publishing.
✔️ Keeping dependencies updated ensures stability.

This workflow is essential for developers looking to create, maintain, and distribute reusable React components or JavaScript utilities.

Best Practices for npm and Yarn Libraries

Now that you've created, published, and used your own npm package, it's essential to follow best practices to ensure your package is reliable, maintainable, and easy to use. This section will cover key principles and techniques to make your npm library as professional as possible.

Write Meaningful Documentation

A well-documented library helps other developers understand how to use it effectively.

What to Include in Your Documentation

📌 Installation instructions
📌 Usage examples
📌 API reference (functions, parameters, return values)
📌 Versioning and update history
📌 Contributions guide (if open-source)

For example, a simple README.md file for my-awesome-library:

# my-awesome-library

A simple npm package for formatting dates.

## Installation

### Using npm
```sh
npm install my-awesome-library

Using Yarn

yarn add my-awesome-library

Usage

import { formatDate } from "my-awesome-library";

console.log(formatDate(new Date())); // Outputs: 2025-02-04

Follow Semantic Versioning (SemVer)

Versioning helps maintain compatibility and informs users of changes. npm follows Semantic Versioning (SemVer):

MAJOR.MINOR.PATCH

💡 To bump versions automatically, use:

```sh
npm version patch   # Small bug fix
npm version minor   # New feature added
npm version major   # Breaking changes

Then, publish the new version:

npm publish

👉 Use proper versioning to prevent breaking projects that depend on your library.

Keep Dependencies Up to Date

Regularly updating dependencies improves security, performance, and compatibility.

Check for outdated dependencies:

npm outdated

or

yarn outdated

Update dependencies:

npm update

or

yarn upgrade

Write Unit Tests for Your Library

Testing ensures your package works correctly before publishing updates.

Install a Testing Framework (Jest)

npm install --save-dev jest

Create a Test File (index.test.js)

const { formatDate } = require("./index");

test("formats a date correctly", () => {
  expect(formatDate(new Date("2025-02-04"))).toBe("2025-02-04");
});

test("throws an error if input is not a date", () => {
  expect(() => formatDate("not a date")).toThrow("Invalid date");
});

Run Tests

shCopyEditnpm test

👉 You can use CI/CD (for example, GitHub Actions) to run tests automatically on every push.

Using CI/CD for Automated Publishing

Automate Publishing with GitHub Actions

Create a .github/workflows/publish.yml file:

ymlCopyEditname: Publish to npm
on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          registry-url: "https://registry.npmjs.org/"
      - run: npm install
      - run: npm test
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

1️⃣ Create an npm token:
Run:

shCopyEditnpm token create

Copy the token and add it to GitHub Secrets (NPM_TOKEN).

2️⃣ Push code to GitHub → Auto-publish on npm!

👉 Automating publishing prevents human errors and ensures quality control.

Ensure Cross-Platform Compatibility

• Use ES modules (import/export) for modern compatibility.

• Include CommonJS (require/module.exports) support for older environments.

• Test with different Node.js versions using CI/CD.

Example package.json for dual compatibility:

jsonCopyEdit"type": "module",
"main": "index.cjs",
"exports": {
  "import": "./index.mjs",
  "require": "./index.cjs"
}

👉 This ensures your package works everywhere (Node.js, React, Next.js, and so on).

Conclusion

Congratulations! 🎉 You’ve successfully learned how to create, publish, and use your own npm package, while also understanding the benefits of both npm and Yarn for package management.

Throughout this guide, we covered:

✔️ What npm is and why it’s important
✔️ How to use npm and Yarn to manage dependencies
✔️ How to create a reusable npm package
✔️ How to publish and update your package on npm
✔️ How to integrate your package into a React project with Vite
✔️ Best practices for writing, testing, and maintaining your library

By following these steps, you've taken an important step toward open-source development and modular programming, making your code reusable for both yourself and the developer community.

In this article, we’ll talk about npm packages along with their benefits and pitfalls. I'll equip you with the tools and knowledge to help you decide when to use npm packages.

What We'll Cover:

1. What's the Deal with NPM and NPM Packages?
2. Advantages of using NPM Packages
3. The Danger of Over-reliance on NPM Packages
4. Striking a Balance with NPM Packages
5. What to Consider When Choosing an NPM Package
6. Efficient Approach to Using npm Packages – When to Use npm Packages
   – When Using a Package May Not Be Necessary
7. Conclusion

What's the Deal with Npm and Npm Packages?

Npm, short for Node Package Manager, plays a crucial role in the JavaScript community. It serves as both a repository and a manager for open-source Node.js packages.

Through npm, developers gain access to many tools, enabling them to install, share, and manage dependencies within their projects.

Think of npm packages as building blocks for coding. They range from simple utilities to elaborate frameworks, streamlining development efforts. Instead of starting from scratch for every challenge, you can leverage these components from your digital toolkit to help accelerate your projects.

Advantages of Using NPM Packages

NPM brings with it a large number of advantages such as:

Efficiency Boost: Rather than spending hours figuring out a solution from scratch, npm packages offer a shortcut. They're like little time savers that allow you to implement features and functionalities with just a few lines of code.

Wide Range of Options: From basic utilities to advanced frameworks, there's a package for almost anything. Need to add a slick carousel to your website? There's a package for that. Tired of the peace that code-formatters like Prettier bring and want to embrace violence? You guessed it—there's a package for that too! Heck, need to check if a value (number) equals 13 😂? NPM can help.

With npm, the possibilities are virtually endless, giving you access to a world of pre-built solutions at your fingertips.

Community Collaboration: One of the great things about npm is the strong sense of community it creates. Developers from around the globe actively add to the npm ecosystem by creating and sharing packages. This means you're not just depending on your skills – you're benefiting from the collective knowledge and experience of many developers.

If you run into a problem with a package, you can simply check out forums or GitHub repositories where someone else may have encountered the same issue and can help out. It's like having a team of experienced experts ready to lend a hand whenever you need it.

Modularity and Code Reusability: NPM packages encourage a modular approach to development, which is like organising your code into neat little building blocks. This makes your codebase more maintainable, scalable, and easier to debug. Plus, it promotes code reusability, allowing you to leverage existing packages in multiple projects.

Streamlined Development Workflow: With npm packages, you can streamline your development workflow and focus on what you do best—building awesome stuff.

Instead of getting bogged down in the nitty-gritty details of implementation, you can quickly integrate existing solutions and move on to the next task. This allows you to iterate faster, meet deadlines more efficiently, and ultimately deliver better results to your clients or users.

The Danger of Over-reliance on NPM Packages

So, here's the deal: while npm packages can be like a magical fix for coding difficulties, they also come with some downsides. Let me share a story from my time learning with my mentor, let's call him Hihi.

Wink meme

Hihi was all about building strong coding skills from the ground up. He often said, "Packages are handy shortcuts, but if you rely on them too much, you might end up stuck."

I remember how he'd challenge me to build UI components like dropdown menus, sliders, animations and so on without using any packages. It was tough, but it taught me a lot about how things work behind the scenes.

Hihi had seen firsthand how relying too much on packages could trip up developers. He'd tell me about people he knew who struggled to implement features when they didn't have their trusty packages to lean on. It wasn't just about being a coding genius—it was about understanding the fundamentals and learning to think outside the box.

And you know what? Hihi was right. Building stuff from scratch pushed me to understand the code and solve my problems when things got tricky.

Why You Shouldn't Overuse NPM Packages

Dependency Overload: Adding each npm package to your project also means adding its dependencies. This can lead to a mess of dependencies that become tricky to handle and keep up to date.

Plus, updating a package can sometimes cause unexpected issues, potentially breaking your application's functionality.

Security Risks: Not all npm packages are created equal. Some may contain vulnerabilities or even malicious code (often seen in the terminal right after installing a package), putting your projects at risk. Relying too heavily on packages without vetting them properly can leave your projects vulnerable to attacks.

Maintenance Burden: When you rely on npm packages for essential functionality, you're at the mercy of the package maintainers. If a package gets deprecated or stops receiving updates, you're left scrambling to find a replacement or fix the issue yourself.

Loss of Creativity: Over-reliance on npm packages can stifle our creativity as developers. Instead of thinking critically and problem-solving independently, you may default to using packages as a crutch. This can hinder your growth and development as a programmer, limiting your ability to tackle new challenges and innovate.

Increased Bundle Size: Integrating each npm package into your project adds to the overall bundle size, and depending on various factors, some packages (Looking at you, styled-components 😒😂) can bulk up significantly.

This can pose a notable challenge, particularly if speed and performance are important for your application. Larger bundles may result in sluggish load times, which negatively affect user experience and even your search engine rankings.

Overhead of Unused Code: NPM packages often come with a lot of extra code that you may not need for your project. This unused code adds unnecessary overhead to your application, bloating the file size and slowing down performance.

Compatibility Concerns: Mixing and matching npm packages can sometimes lead to compatibility issues, especially when different packages are written in different programming languages or use conflicting versions of dependencies.

For example, if one package is written in JavaScript and another in TypeScript, they may play poorly together, leading to errors and unexpected behaviour.

Striking a Balance with NPM Packages

Now hold on a minute, I don’t want you to think that NPM is all bad. NPM packages can be super helpful and you shouldn't fear them.

Rather, I want you to cultivate the rationale behind your decision-making when choosing npm packages.

Choosing the right npm packages can be a bit like navigating a maze—you want to find the shortest, most efficient path to your destination without getting lost along the way.

So how do you balance leveraging the benefits of npm packages and avoiding the potential pitfalls? Let's break it down.

What to Consider When Choosing an NPM Package

• How Much of the Package You'll Use: Consider how much of the package you'll use in your project. If you only need one or two features, building those features yourself may be more efficient.
• Package Size: Larger packages contribute to increased bundle size, which can impact performance. Opt for smaller, more lightweight packages whenever possible.
• Complexity of Functionality: Evaluate whether the functionality provided by the package is fairly complex to implement from scratch. If so, using the package may save time and effort.
• Project Time Estimate: Consider the timeline of your project. If you're working on a tight deadline, using npm packages can speed up development and meet project milestones more quickly.
• Maintenance and Support: Prioritize packages with ongoing maintenance and strong community support. Opt for those with dedicated maintainers and an active community, as they are more likely to receive prompt updates and assistance when needed.
• Compatibility: Ensure that the package is compatible with your project's tech stack, including programming languages, frameworks, and dependencies.

To better guide you, here’s a flowchart of how your decision-making process can go.

How to decide which npm packages to use - and whether to use them.

As seen in the graph above, each step is built on the next, aiding you in making a sound choice when picking a package.

Efficient Approach to Using npm Packages

While packages can be incredibly useful for streamlining development and adding advanced features, it's important to consider when you should use them and when it might not be necessary.

When to Use npm Packages

• Routing: If your web app needs complex navigation, grabbing a battle-tested routing library like React Router can make your life a lot easier. These packages handle dynamic route matching, nested routes, and more, saving you time and headaches.
• Form Validation: Save yourself the headache of reinventing the validation wheel. To streamline your form validation process, utilize specialized form validation libraries like Formik for React or VeeValidate for Vue.js. These libraries ensure consistent validation behavior across your forms, without the hassle of building it from scratch.
• Animations: Want to dazzle your users with smooth and engaging animations? You can use animation libraries like Framer Motion or GreenSock (GSAP). These libraries provide an array of tools to help you achieve complex animations with minimal effort, whether it's animating components, transitions, or scroll-based effects.
• Styling: When it comes to styling, CSS-in-JS libraries like styled-components or Emotion can be powerful allies. While they may not be necessary for simple styling needs, they shine in projects requiring dynamic styling, theming, or responsive design. These libraries offer powerful styling capabilities and component-level encapsulation, making styling a breeze.
• UI Components: Building custom UI components from scratch can be time-consuming, especially for complex components like date pickers or data tables. Integrating well-designed UI component libraries such as ShadCN, Ant Design, or Tailwind CSS can accelerate development and ensure a consistent look and feel across your application.

When Using a Package May Not Be Necessary

• Basic Utility Functions: For simple utility functions or helper methods, writing them yourself may be more efficient rather than adding an additional dependency. It also keeps your codebase lightweight and avoids unnecessary dependencies.
• Custom Business Logic: If your project requires highly specialized or domain-specific logic, relying on generic npm packages may not be suitable. Building custom solutions tailored to your project's unique requirements can offer greater flexibility and control over functionality.
• Performance Optimization: While npm packages can provide convenient solutions, they may also introduce overhead and impact performance. For performance-critical aspects of your application, consider optimizing code internally rather than relying on external dependencies.
• Learning and Skill Development: Building features from scratch offers valuable opportunities for learning and skill development. Consider tackling certain challenges without relying on packages to deepen your understanding of underlying concepts and enhance your problem-solving abilities.

Conclusion

Remember, npm packages are like tools in a toolbox—useful when needed, but not always necessary.

Before reaching for a package, consider whether it aligns with your project's goals and whether you could achieve the same result with a custom solution.

So next time you're tempted to grab a package, pause and ask yourself: "Do I need it? Do I really need it? Do I…?" You get the idea.

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Coffee Tom

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

According to its creator, Zoltan Kochan, pnpm "allows you to save gigabytes of disk space."

Many popular projects including Next.js, Vite, Svelte, and even freeCodeCamp use pnpm. So now is a great time try out this tool if you haven't yet. I'm sure your time will not be wasted.

In this article, I won't go into details of why pnpm is faster and more efficient than npm. You can check out the official documentation if you want to know more about that.

The goal of this article is to quickly get you started with pnpm so you can perform your day to day tasks that you previously did with npm or yarn. Grab your favorite cup of tea or coffee ☕️, and let's dive right in! 🚀

How to Install pnpm

I assume you already have a modern version of Node.js installed on your machine. These modern versions come with a command called corepack. It let's you manage your Node package managers.

Yes you read that right! It's an experimental feature of Node but it works pretty well.

So to start using it, you first need to enable it by entering the following command from your terminal, which has the effect of installing pnpm (and also yarn) on your system:

corepack enable

It's that simple. Now if you run pnpm --version you will see the version you have just installed. But this might not be the latest version of pnpm. If this is the case, you can install the latest version of pnpm using this command:

corepack prepare pnpm@latest --activate

Keep in mind that there are many ways to install pnpm on your system, and you can read about all of them in the installation docs. My favorite is the corepack formula I've shown above.

How to Configure your Shell for Efficiency (Optional)

Well, you now have pnpm installed. But the default command line experience can be improved to save you some effort.

Note that this section is optional. If you want you can skip to the next section. But if you are serious about setting it up so that the CLI experience is pleasant, let's learn how to do it.

pnpm is Hard to Type – So Set Up an Alias

If you find pnpm hard to type like I do, you can set up an alias to to save you some effort. If you're on Linux or MacOS, just put the following in your shell config (.bashrc, .zshrc, or config.fish):

alias pn=pnpm

If you want to set up your alias in Powershell (Windows) you can see this doc.

How to Setup Tab-Completion

There are two ways you can do this in pnpm. Both have their pros and cons.

First I will share with you my favorite method. It's a shell plugin called pnpm-shell-completion and is available for zsh, fish shell, and Powershell core. It only covers the most commonly used commands. If you are Arch Linux and zsh user, you can install it with any AUR helper. For example, if you use yay, run the following command to install it:

yay -S pnpm-shell-completion

Then add the following line in your .zshrc file to load it:

source /usr/share/zsh/plugins/pnpm-shell-completion/pnpm-shell-completion.zsh

Now it should work. If you use any other supported shell, follow the plugin's doc to learn how to install it.

The second method comes built-in with pnpm. To setup this style of auto-completion, run the following command:

pnpm install-completion

And then follow the steps it gives you. This method covers more commands than the first approach. But it has some limitations – for example it can't auto-complete your package.json scripts. It also, for example, can't auto complete any dependency name that you want to uninstall.

How to Use pnpm

Now, you should have pnpm installed with an alias and tab-completion. No more delay – let's see how to use pnpm.

How to Initialize a New Project using pnpm

To get the default package.json in the current directory, run the following command:

pnpm init

Unlike npm, it will not create it interactively and you don't need to specify the -y flag for this.

How to Install a Package

To install a package as a dependency, the syntax is:

pnpm add <pkg>

To install a package as a dev dependency, you have pass the -D (or --save-dev) flag:

pnpm add -D <pkg>

To install a package globally, use the -g flag:

pnpm add -g <pkg>

How to Install All Dependencies

Suppose you cloned a project from GitHub. It does have a package.json file but no node_modules (you should not track node_modules with Git). Now to install all the dependencies in that package.json, the command is very similar to npm:

pnpm install

or

pnpm i

How to Run a package.json Script

This process is also very similar to npm. The explicit way to do it is to use the run command. If you have a script named build, you can execute it with this command:

pnpm run build

You can also use pnpm build to do the same thing. This is a shorthand format that can do other things as well. We'll learn more about shorthand very soon in this article.

How to Run Commands that Come with Dependencies

You can run commands that come with dependencies using pnpm exec.

When you install a package, if it has commands specified by the bin field in its package.json, you will get an executable of the same name in your node_modules/.bin directory. Its purpose to execute the corresponding file.

pnpm exec prepends ./node_modules/.bin to the PATH (that is, PATH=./node_modules/.bin:$PATH) and then executes the given command.

The following is an example that shows installing typescript as a dev dependency and then running the tsc command to create a tsconfig.json file:

pnpm add -D typescript
pnpm exec tsc --init

Similar to the pnpm run command, you can also omit exec and just use pnpm tsc to do the same thing. This works when you don't have a conflicting tsc script in your package.json. In the next section we will take a close look at this shorthand syntax.

Note that since pnpm exec has access to all commands resolved by the paths specified in PATH, you may have access to many system commands for example rm, ls, and so on.

How pnpm <command> Works

pnpm <command> works like this:

• If <command> is a pnpm command (that is add, install and so on), execute that command.
• Else if <command> is a script found in package.json, execute pnpm run <command>.
• Else execute pnpm exec <command>.

So pnpm <command> serves as a convenient shortcut where pnpm exec and pnpm run are explicit commands without fallback.

How to Update Packages

To update packages to their latest versions based on the specified range in package.json, run this command:

pnpm up

To update all dependencies to their latest versions, ignoring ranges specified in package.json, run this:

pnpm up --latest

How to Remove a Package

To remove a package from both node_modules and your package.json, you can use pnpm rm. For example if you installed express, you can remove it using:

pnpm rm express

To remove a globally installed package, use the -g flag. Below is an example of removing the globally installed package nodemon:

pnpm rm -g nodemon

Is There an npx Alternative?

Yes – it's the pnpm dlx command. It's very similar to npx. It downloads the specified package from the registry without installing it as a dependency and then runs whatever default command binary it exposes.

For example, you can run the command that cowsay package exposes like below to print ASCII art of a cow saying a string that you pass:

pnpm dlx cowsay hi freeCodeCamp

Now you might be wondering, if a package exposes multiple command binaries, what command pnpm dlx chooses as the default? Or how can you explicitly specify a command binary?

Let's see how the default command binary is determined first:

• If the bin field of package.json has only one entry, then that is used.
• Else if there is a command name in the bin field of package.json that matches the package name, ignoring the scope part if any, then that command is used.
• Else pnpm can't determine the default command and throws an error with a helpful error message that most likely will answer the second question.

To explicitly specify a particular command, you will need to install the package first using the --package option and specify that command after dlx.

For example the package typescript exposes to command binaries tsc and tsserver. Now if you want to run tsc --init to create a tsconfig.json file without having typescript in your node_modules or package.json, you can use pnpm dlx like below:

pnpm --package=typescript dlx tsc --init

Conclusion

In this tutorial, you've learned what pnpm is and how to install it. We've also covered several common pnpm commands that you will most likely need on a daily basis.

I hope this article helped you get up and running with pnpm. Check out the documentation of pnpm to learn more about it.

If you want you can follow me on LinkedIn and Twitter where I share useful coding related things.

Happy coding!

Developers publish packages on NPM to share their code with others. And organisations also use NPM to share code internally.

In this article, you will learn how to create a package. And you will also learn how to publish your package on NPM so others can download and use it.

Let's get started!

How to Choose a Name For Your NPM Package

The first thing you need to do before creating your package is to choose a name. This is important because your package needs to have a unique name. You should choose a name that has not been used already.

When you decide on a name, go to the NPM registry and run a search. Be sure there's no exact match to the name you chose (or a match that is too similar).

For example, if there's a package called hellonpmpackage and you decide to call yours hello-npm-package, NPM will throw an error when you attempt to publish it.

If there's already a package in the NPM registry with the same you want to use, then you have two options.

1. You can choose a different name.

2. You can publish your package as a scoped package (see the section "Publishing scoped packages" below).

How to Create a NPM Package

Follow the steps below to create your package.

1. Install Node

If you do not already have Node installed, you should go ahead and install it. You can visit the official website to download and install Node.js. NPM comes pre-installed with Node.

2. Initialize a Git Repository

Create a new project folder for your package and navigate into the folder. Then, run the following command in your terminal:

git init

This will help you track the changes you make to your package. Also, make sure you have a remote version of your repository on GitHub (or your preferred hosting service).

3. Initialize NPM in Your Project

To do this, navigate to the root directory of your project and run the following command:

npm init

This command will create a package.json file. You will get prompts to provide the following information:

• package-name: As you learned earlier in this tutorial, the name of your package must be unique. Also it must be lowercase. It may include hyphens.

• version: The initial value is 1.0.0. You update the number when you update your package using semantic versioning.

• description: You can provide a description of your package here. Indicate what your package does and how to use it.

• entry point: The entry file for your code. The default value is index.js.

• test command: Here, you can add the command you want to run when a user runs npm run test.

• git repository: The link to your remote repository on GitHub.

• keywords: Add relevant keywords that will help others find your package on the NPM registry.

• author: Add your name.

• license: You can add a license or use the default license (Internet Systems Consortium (ISC) License).

See the screenshot below for an example of how to answer the prompt questions:

Creating a package.json file

Note: I left the test command blank because there is no test command for the package in this tutorial.

4. Add Your Code

Now, you can go ahead and add the code for your package.

First, you need to create the file that will be loaded when your module is required by another application. For this tutorial, that will be the index.js file.

Inside the index.js file, add the code for your package.

For this tutorial, I will be creating a simple package called first-hello-npm. This package returns the string "Hello NPM!".

//index.js

function helloNpm() {
  return "hello NPM"
}

module.exports = helloNpm

After creating your function, you should export it like in the example above. That way, anyone who downloads your package can load and use it in their code.

If you have been following along, you should now have your package created. But before you publish, you need to test your package. Testing your package reduces the chances of publishing bugs to the NPM registry.

How to Test Your NPM Package

Testing ensures that your NPM package works as expected. There are many ways to test your package. In this tutorial, you will learn one of the simplest ways of testing.

First, navigate to the root of your package project. Then, run the following command:

npm link

This will make your package available globally. And you can require the package in a different project to test it out.

Create a test folder. And inside that test folder, add a script.js file.

Example of a test folder with a script.js file

In the example above, the test folder contains only the script.js file. It does not yet contain the package. To add the package you created to your test folder, run the command below:

npm link <name-of-package>

In the case of the test folder for this tutorial, I will run the following command:

npm link first-hello-npm

This will create a node-modules folder. And it'll add all the files and folders from your package – see the screenshot below:

In the script.js file, you can now require your package and use it for the test.

// test/script.js

const helloNpm = require('first-hello-npm')

console.log(helloNpm())

The first-hello-npm package is expected to return the string "hello NPM!". As you can see from the screenshot below, the package works as expected when I run the script.

Test result for first-hello-npm package

After testing your package and ensuring it works as expected, you can now publish it on the NPM registry.

How to Publish Your NPM Package

To publish your package on the NPM registry, you need to have an account. If you don't have an account, visit the NPM sign up page to create one.

After creating the account, open your terminal and run the following command in the root of your package:

npm login

You will get a prompt to enter your username and password. If login is successful, you should see a message like this:

Logged in as <your-username> on https://registry.npmjs.org/.

You can now run the following command to publish your package on the NPM registry:

npm publish

If all goes well, you should get results similar to the screenshot below:

Notice indicating that the package is published successfully.

If you have been following along, then congratulations! You just published your first NPM package.

You can visit the NPM website and run a search for your package. You should see your package show up in the search results.

For example, from the screenshot below, you can see the first-hello-npm package is now available on NPM.

The first-hello-npm package is now available on NPM

How to Publish Scoped NPM Packages

If an existing package has the same name you would like to use, the workaround is to publish a scoped package.

When you publish a scoped package, you have the option to make it public or private. If it's private, you can choose who you want to share the package with.

How to Create a Scoped NPM Package

To create a scoped package, first navigate to the root of your package directory.

Then, run the npm init command and pass your username as the value to the scope flag:

npm init --scope=@your-username

Respond to the prompts to create a package.json file. For your package name, the format should be @your-username/package-name.

For example @benjaminsemah/first-hello-npm.

You can now add the code for your package and test it. The process is the same as already explained above.

Then, to publish your scoped package, run the following command in your terminal.

npm publish --access public

You can change from public to private if you don't want to make the package available for public use.

You should see a response similar to this.

Scoped package published successfully.

Congratulations if you followed along. You've published your scoped package. You should see your scoped package on NPM if you search for it. For example in the screenshot below, you can see the scoped package I created in this tutorial.

Scoped package is now available on NPM

Conclusion

Packages helps developers work faster. And they also improve collaboration. When you figure out a smarter way of doing things, one way you can share with the community is to create and publish your solution as a package.

In this article, you learned what packages are and why they are useful. You also learned how to create and publish packages on the NPM registry. The developer community awaits all the beautiful packages you will create and share.

Thanks for reading. And happy coding!

In this tutorial, you will learn what node modules are. You will also learn about the three types of node modules. And we'll go over the right way to use them in your applications.

What is a Module in JavaScript?

In simple terms, a module is a piece of reusable JavaScript code. It could be a .js file or a directory containing .js files. You can export the content of these files and use them in other files.

Modules help developers adhere to the DRY (Don't Repeat Yourself) principle in programming. They also help to break down complex logic into small, simple, and manageable chunks.

Types of Node Modules

There are three main types of Node modules that you will work with as a Node.js developer. They include the following.

• Built-in modules

• Local modules

• Third-party modules

Built-in Modules

Node.js comes with some modules out of the box. These modules are available for use when you install Node.js. Some common examples of built-in Node modules are the following:

• http

• url

• path

• fs

• os

You can use the built-in modules with the syntax below.

const someVariable = require('nameOfModule')

You load the module with the require function. You need to pass the name of the module you're loading as an argument to the require function.

Note: The name of the module must be in quotation marks. Also, using const to declare the variable ensures that you do not overwrite the value when calling it.

You also need to save the returned value from the require function in someVariable. You can name that variable anything you want. But often, you will see programmers give the same to the variable as the name of the module (see example below).

const http = require('http') 

server = http.createServer((req, res) => { 
    res.writeHead(200, {'Content-Type': 'text/plain'}) 
    res.end('Hello World!')
})

server.listen(3000)

You use the require function to load the built-in http module. Then, you save the returned value in a variable named http.

The returned value from the http module is an object. Since you've loaded it using the require function, you can now use it in your code. For example, call the .createServer property to create a server.

Local Modules

When you work with Node.js, you create local modules that you load and use in your program. Let's see how to do that.

Create a simple sayHello module. It takes a userName as a parameter and prints "hello" and the user's name.

function sayHello(userName) {
    console.log(`Hello ${userName}!`)
}

module.exports = sayHello

First, you need to create the function. Then you export it using the syntax module.exports. It doesn't have to be a function, though. Your module can export an object, array, or any data type.

How to load your local modules

You can load your local modules and use them in other files. To do so, you use the require function as you did for the built-in modules.

But with your custom functions, you need to provide the path of the file as an argument. In this case, the path is './sayHello' (which is referencing the sayHello.js file).

const sayHello = require('./sayHello')
sayHello("Maria") // Hello Maria!

Once you've loaded your module, you can make a reference to it in your code.

Third-Party Modules

A cool thing about using modules in Node.js is that you can share them with others. The Node Package Manager (NPM) makes that possible. When you install Node.js, NPM comes along with it.

With NPM, you can share your modules as packages via the NPM registry. And you can also use packages others have shared.

How to use third-party packages

To use a third-party package in your application, you first need to install it. You can run the command below to install a package.

npm install <name-of-package>

For example, there's a package called capitalize. It performs functions like capitalizing the first letter of a word.

Running the command below will install the capitalize package:

npm install capitalize

To use the installed package, you need to load it with the require function.

const capitalize = require('capitalize)

And then you can use it in your code, like this for example:

const capitalize = require('capitalize')
console.log(capitalize("hello")) // Hello

This is a simple example. But there are packages that perform more complex tasks and can save you loads of time.

For example, you can use the Express.js package which is a Node.js framework. It makes building apps faster and simple. To learn more about NPM, read this freeCodeCamp article on the Node Package Manager.

Conclusion

In this article, you learned about what Node modules are and the three types of node modules. You also learned about how to use the different types in your application.

Thanks for reading. And happy coding!

In this article, you will learn about Node.js. You will learn the following:

• What is Node.js?

• How the Node.js environment differs from the browser.

• Why you should learn Node.js.

• How to get started with Node.js.

• Resources to help you learn Node.js.

What is Node.js?

"Node.js is an open-source and cross-platform JavaScript runtime environment." - Nodejs.dev Docs

This sounds like a cool, straightforward answer. But for a beginner, this definition might raise further questions. So let's break it down and understand what it means.

Node.js is open-source: This means that the source code for Node.js is publicly available. And it's maintained by contributors from all over the world. The Node.js contribution guide shows you how to contribute.

Node.js is cross-platform: Node.js is not dependent on any operating system software. It can work on Linux, macOS, or Windows.

Node.js is a JavaScript runtime environment: When you write JavaScript code in your text editor, that code cannot perform any task unless you execute (or run) it. And to run your code, you need a runtime environment.

Browsers like Chrome and Firefox have runtime environments. That is why they can run JavaScript code. Before Node.js was created, JavaScript could only run in a browser. And it was used to build only front-end applications.

Node.js provides a runtime environment outside of the browser. It's also built on the Chrome V8 JavaScript engine. This makes it possible to build back-end applications using the same JavaScript programming language you may be familiar with.

Differences Between the Browser and Node.js Runtime Environments

Both the browser and Node.js are capable of executing JavaScript programs. But there are some key differences that you need to know. They include the following.

Access to the DOM APIs

With the browser runtime, you can access the Document Object Model (DOM). And you can perform all the DOM operations. But Node.js does not have access to the DOM.

Node.js exposes almost all the system resources to your programs. This means you can interact with the operating system, access the file systems, and read and write to the files. But, you do not have access to operating systems and file systems from the browser.

Window vs Global object

JavaScript has a built-in global object. The JavaScript global object for the browser is called the window object. In Node.js, the global object goes by the name global.

The window object contains methods and properties available only in the browser environment.

Control over runtime versions

With Node.js, you can choose which version to run your server-side application on. As a result, you can use modern JavaScript features without worrying about any version-specific inconsistencies.

Contrast this to the browser runtime environment. As a developer, you have no control over the version of browsers your clients use to access your app.

Loading modules (import vs require keywords)

Node.js offers out-of-the-box support for CommonJS and ES modules. You can load modules using the require keyword (CommonJS syntax) and the import keyword (ES syntax).

Some modern browsers support ES modules. This means you can use import ES modules. But you will still need to create bundles to cater to older browsers that do not support ES modules.

How Much JavaScript Do You Need to Get Started with Node?

If you are an absolute beginner to JavaScript, I recommend that you start with the basics.

Become familiar with basic JavaScript concepts first. Then, you can move on to learning to build server-side applications with Node.js.

There's no way you'll ever exhaust all there is to learn about JavaScript. So, how to determine when you know enough JavaScript to get started with Node.js?

The Node.js documentation provides a list of JavaScript topics to learn before diving deep with Node.js.

Once you have a grasp of JavaScript basics, then you can get started with Node.js

How to Get Started with Node.js

Let's see how you can create your first Node.js application. This section will show you how to run Node.js scripts from the command line.

How to download and install Node.js

First, you need to download and install Node.js. There are different ways you can do that. If you are a beginner, I would suggest that you download Node.js from the official website.

Screenshot of the official Node.js website

Official packages are available on the website for all major platforms (Windows, macOS, and Linux). Download and install the appropriate package for your system.

How to check the Node.js version

To check the Node.js version, run the command node --version in your terminal.
If the installation was successful, you will see the version of Node.js you installed. You should get a response like the screenshot below.

How to run Node.js from the command line

Let's build a simple Hello World app.

Create a new project folder. You can call it my-project. Open the project in your code editor. Inside the folder, create an app.js file.

Add the following code to app.js

As you can see, this is JavaScript code.

You can run the script in the command line by running the command node <fileName>. In this case, the file name is app.js.

Run the following command in your terminal to execute the Hello world. program:

node app.js

You should see the string "Hello world." logged in your terminal like so.

Congratulations! You just ran your first Node.js application.

Should You Learn Node.js?

Here are some reasons why you should consider learning Node.js

Node.js allows you to write JavaScript on both client and server.

One of the advantages of Node.js is that it allows you to work on both the front-end and back-end of your application. And you use one programming language – JavaScript – to do so.

This is good news for front-end developers who work with JavaScript. If you want to start working on the server side, it's easier compared to learning a new back-end language from scratch.

Node has a vibrant community.

As I mentioned earlier in the article, Node.js is open-sourced. It is actively maintained by developers from all over the world.

There is a vibrant community surrounding Node.js. You can find excellent tutorials and solutions to problems when you get stuck.

Node is built on top of Google Chrome's V8 engine.

Node.js is built on top of the Chrome V8 JavaScript engine. This is significant because the V8 engine powers some of Google's in-browser applications like Gmail. As such, Google invests heavily to ensure it offers high performance.

Demand in the market

Many big names like Netflix, Uber, Paypal, and LinkedIn, and others use Node.js. Apart from the big names, many startups also use Node.js in developing their applications.

Learning to work with Node.js will make you a desirable candidate in the job market.

The NPM library

The NPM library is one of the excellent resources that comes with Node.js.
The library contains a registry of over a million packages. A package is a reusable piece of code.

You can create a package for a recurring task or problem and share the code with others via the registry.

You can also download packages that others have shared. For many tasks that developers perform regularly, there are packages available for that.

Resources to Learn Node

If you are curious about learning how to build Node.js applications, I recommend the following resources.

• 8-Hour Node.js and Express.js Course on freeCodeCamp YouTube Channel.

• The freeCodeCamp Backend Development and APIs curriculum

• Nodejs.dev Documentation

Also, below is a link to a video of Ryan Dahl when he first presented Node.js.

Ryan Dahl: Original Node.js presentation at JSConf 2009

Conclusion

A single blog post like this is not enough to learn all there is to know about Node.js. The purpose of this article was to give you an overview of what Node.js is.

If you were not sure what Node.js is, I hope this article addressed your concerns and cleared your confusion.

Thanks for reading. And happy coding!

All valid URLs follow certain patterns. So if you know those patterns, you can determine whether a URL is valid or not in your program and give feedback, throw an error, and so on.

In this tutorial, you will learn three methods to check if a string in JavaScript is a valid URL:

• How to Use the URL Constructor to Validate URLs

• How to Use npm Packages to Validate URLs

• How to Use Regex to Validate URLs

How to Use the URL Constructor to Validate URLs

When you pass a string to the URL constructor, it returns a new URL object if a string is a valid URL. Otherwise, it returns an error:

const fccUrl = new URL("https://www.freecodecamp.org/");
console.log(fccUrl);

The following is what you get when you log fccUrl to the console:

A URL object in JavaScript

This object means that the string you passed to the URL constructor was a valid URL.

Now let's see what you get when you pass an invalid URL string:

const fccUrl = new URL('freecodecamp');
console.log(fccUrl);

The string 'freecodecamp' is not a valid URL. Thus, you get the following TypeError:

Invalid URL

To recap:

1. When you pass a valid URL string to the URL constructor, it returns a new URL object.

2. When you pass an invalid URL string to the URL constructor, it returns a TypeError.

With this knowledge, you can create a custom function to check the validity of a given URL string.

How to Create a URL Validator Function with the URL Constructor

By using the URL constructor and a try...catch statement, you can create a custom isValidUrl function:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

The isValidUrl function returns true when the string you pass as an argument is a valid URL. Otherwise, it returns false:

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://mail@freecodecamp.org')); // true
console.log(isValidUrl('freecodecamp')); // false

How to Validate Only HTTP URLs with the URL Constructor

Sometimes, you may want to check if the string is a valid HTTP URL, and reject other valid URLs like 'mailto://mail@freecodecamp.org'.

If you look closely at the URL object, one of its properties is protocol:

The URL object has a protocol property.

In the example above, the value of the protocol property is 'https:'.

To check if a string is a valid HTTP URL, you can use the protocol property of the URL object:

function isValidHttpUrl(string) {
  try {
    const newUrl = new URL(string);
    return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://mail@freecodecamp.org')); // false
console.log(isValidHttpUrl('freecodecamp')); // false

The difference here is that you're not returning true after the new URL object is created. Instead, you're checking if the protocol property has a value equal to 'http:' or 'https:' and returning true if it is and false if not.

How to Use npm Packages to Validate URLs

There are two NPM packages you can use: is-url and is-url-http.

These packages are the simplest way to check if a string is a valid URL. All you need to do is pass in a string as a parameter, and they will return true or false.

Let's see how both of these packages work.

How to Validate URLs with the is-url Package

You can use the is-url package to check if a string is a valid URL. This package does not check the protocol of the URL passed to it.

To use is-url, first install it using the command below:

npm install is-url

Then import it and pass your URL string to it as an argument:

import isUrl from 'is-url';

const firstCheck = isUrl('https://www.freecodecamp.org/');
const secondCheck = isUrl('mailto://mail@freecodecamp.org');
const thirdCheck = isUrl('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // true
console.log(thirdCheck); // false

The is-url package returns true for strings that have valid URL formats and false for strings that have invalid URL formats.

In the example, both firstCheck (with the https: protocol) and secondCheck (with the mailto: protocol) return true.

How to Validate HTTP URLs with the is-http-url Package

You can use the is-url-http package to check if a string is a valid HTTP URL.

Install the package with the following command:

npm install is-url-http

Then import it and pass the URL string to it like so:

import isUrlHttp from 'is-url-http';

const firstCheck = isUrlHttp('https://www.freecodecamp.org/');
const secondCheck = isUrlHttp('mailto://freecodecamp@mail.org');
const thirdCheck = isUrlHttp('freeCodeCamp');

console.log(firstCheck); // true
console.log(secondCheck); // false
console.log(thirdCheck); // false

In this example, only firstCheck returns true. The is-url-http package is not only checks that the string is a valid URL, it also checks if it's a valid HTTP URL. That is why it returns false for secondCheck, which is not a valid HTTP URL.

How to Use Regex to Validate URLs

You can also use regex, or a regular expression, to check if a string is a valid URL or not.

All valid URLs follow a particular pattern. They have three main parts, which are:

• Protocol

• Domain name (or IP address)

• Port and path

Sometimes a query string or fragment locator follows the path.

You can learn more about URL patterns from this freeCodeCamp article on the structure of URLs.

Knowing the pattern URLs are made of, you can use regex to check for the existence of such patterns in a string. If the patterns exist, then the string passes the regex test. Otherwise, it fails.

Also, using regex, you can check for all valid URLs, or only check for valid HTTP URLs.

How to Validate URLs with Regex

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://www.freecodecamp.org/')); // true
console.log(isValidUrl('mailto://freecodecamp.org')); // true
console.log(isValidUrl('freeCodeCamp')); // false

The regex in the isValidUrl function above checks if a string is a valid URL. The protocol check ^([a-zA-Z]+:\\/\\/)? is not limited to just https:.

This is why the second example with the mailto: protocol returns true.

How to Validate HTTP URLs with Regex

To use regex to check if a string is a valid HTTP URL, you need to edit the protocol check.

Instead of ^([a-zA-Z]+:\\/\\/)?, you should use '^(https?:\\/\\/)?':

function isValidHttpUrl(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidHttpUrl('https://www.freecodecamp.org/')); // true
console.log(isValidHttpUrl('mailto://freecodecamp.org')); // false
console.log(isValidHttpUrl('freeCodeCamp')); // false

Now only the first example which has a valid https: protocol returns true. Note that URL strings with http: work, too.

Wrapping up!

In this article, you learned how to check the validity of URLs in JavaScript. You now know the following three methods for doing so.

• How to Use the URL Constructor to Validate URLs

• How to Use npm Packages to Validate URLs (is-url and is-http-url)

• How to Use Regex to Validate URLs

It's up to you to choose which method you're comfortable working with.

Thanks for reading. And happy coding!

In this article, I’m going to show you how to fix the error.

Why the "Error: cannot find module" Occurs

This error occurs because of the following reasons:

• you’re trying to import an item from a module you don’t have installed in your project directory
• you’re importing some things from an outdated package
• you’re pointing to a file that does not exist

In the screenshot below, you can see that I’m getting the error:

I’m getting the error because I’m trying to import the freeCodeCamp icon from the react-icons package, which I don’t have installed.

import { FaFreeCodeCamp } from "react-icons/fa";

How to Fix the "cannot find module" Error

If you get this error, the solution is always in the error. The module (package) not found is always specified in the format "Module not found: Error: Can't resolve 'package name' in 'project directory".

In my case, I got it like this "Module not found: Error: Can't resolve 'react-icons/fa' in 'C:\Users\user\Desktop\Projects\Address Locator\address-locator\src'".

To fix the error, you need to install the package that is absent in your project directory – npm install package-name or yarn add package-name.

In my case, I need to install the react-icons package so the freeCodeCamp icon can be resolved. I’ll do that by running yarn add react-icons.

Once I install the package and run the app, everything should successfully compile:

If you install the package but you still get the error, then follow the steps below:

• delete the node modules folder by running rm -rf node_modules
• delete package.lock.json file by running rm -f package-lock.json
• clean up the NPM cache by running npm cache clean --force
• install all packages again by running npm install

That should fix the error for you.

Conclusion

When you get the “cannot find module” error, or “module not found”, it means you’ve not installed the package you’re trying to use.

If the error occurs even if you have the package installed, then the fixes suggested in this article can help you out.

Thank you for reading.

In addition, if you are making an NPM package, you might need to test it with different versions of Node.js. This is why you should have NVM installed.

NVM, short for Node Version Manager, is a command line tool for managing and switching to different versions of Node.js.

In this article, I will show you how to download and install NVM on Windows 10 – even though there’s no “NVM” for Windows.

I will also show you how to set up and use different versions of Node.js and NPM on your Windows computer.

What We'll Cover

• How to Download and Install Node Version Manager in Windows 10
  • Follow the steps below to download nvm-windows
• How to Use NVM on Windows 10
  • How to Install Different Versions of Node.js and NPM with NVM
• Recap

How to Download and Install Node Version Manager in Windows 10

As I mentioned earlier, there’s no “NVM” for Windows, as NVM is only supported on Linux and Mac.

What you will be using on your Windows machine is “nvm-windows”. nvm-windows is similar to NVM, but not identical to it.

N.B.: If you have Node.js installed already, you need to uninstall it so it doesn’t lead to errors when using different versions of Node and installing packages from the NPM registry.

Restart your PC after that, open the command prompt or PowerShell, and run node -v to confirm Node has been uninstalled.

In addition, if you have yarn installed, uninstall it and reinstall it after installing NVM. You don’t want to get weird errors while installing and using packages from the NPM registry.

Follow the steps below to download nvm-windows

• Step 1: Head over to the nvm-windows repository and click on Download Now!”

You’ll be taken to a page containing different versions of nvm-windows.

• Step 2: Click on the latest version to download it. For now, it is the April 28, 2022 version.

• Step 3: Locate the installer on your computer and open it. Follow the installation wizard to install it.

• Step 4: Open up PowerShell or Command Prompt and run nvm -v to confirm the installation.

If you get the same message I got above, then nvm-windows has been successfully installed. Congrats!

How to Use NVM on Windows 10

To use NVM, you need to open PowerShell or Command Prompt as an admin. You can also use Git bash.

• To open PowerShell as admin, right-click on Start and select “PowerShell (Admin)”.

• To open Command Prompt as admin, search for “cmd” and select “Open as Administrator” on the right.

How to Install Different Versions of Node.js and NPM with NVM

The superpower NVM gives you is the ability to have multiple versions of Node.js installed on your machine.

To install the latest version of Node, run nvm install latest.

It is always better to install the long-term support (LTS) version of Node because it is less buggy.

To install the LTS version of Node, run nvm install lts.

To install a specific version of Node, you need to run nvm list available first so you can see the versions of Node that are available.

To install that specific version, run nvm install node-version-number. For example, nvm install 14.20.0.

N.B.: Once you install a version of Node, the corresponding version of NPM is installed for you. So you don’t need to install NPM separately.

If the version of NPM you want to use is not available, run npm install @npm version-number -g to install it.

Now, to see the list of Node versions you have installed on your Windows machine, run nvm list.

To use a specific version of Node, run:

• nvm use latest to use the latest version
• nvm use lts to use the long-term support version
• nvm use version-number to use any other version you have installed

Recap

This article showed you how to install NVM on Windows 10 (nvm-windows) and how to use it to install and manage different versions of Node.

As a reminder, here are the common commands you’ll be using with nvm-windows:

• nvm install node-version – install a version of Node
• nvm list – see the versions of Node you have installed on your machine
• nvm use node-version – use a specific version of Node

Thank you for reading and keep coding :)

Dependencies can become outdated over time due to bug fixes, new features, and other updates. The more project dependencies you have, the harder it is to keep up with these updates.

Outdated packages can pose a threat to security and can have negative effects on performance. Up-to-date packages prevent vulnerabilities. This means that periodic dependency checks and updates are important.

How to Keep Dependencies Up-To-Date

Now, you could go through each individual package in package.json one by one to change the version and run npm install <package>@latest to get the latest version. But this isn't going to be the most efficient method.

Imagine if you had 20 or more packages that could use a version bump. Instead, you should develop a workflow to periodically check for new versions before the number of outdated dependencies grows and it becomes increasingly harder to upgrade.

Here's a workflow that helps me stay on top of updates: first, discover which packages need to be updated and how far behind the versions are. Next, choose to update packages individually or together in a batch. Always test out the updates to ensure breaking changes haven't occurred.

I prefer to perform major version updates individually. With major updates, you're likely to encounter breaking changes. It's much easier to undo or address code changes in relation to one package compared to many.

In this article, I will go over methods to inspect and upgrade dependencies in detail.

How to Use the npm outdated Command

npm outdated

This command will check every installed dependency and compare the current version with the latest version in the npm registry. It is printed out into a table outlining available versions.

It is built into npm so there are no additional packages required to download. npm outdated is a good place to start for an overview of the number of dependency updates required.

• Current is the current version installed.
• Wanted is the max version of the package according the semver range.
• Latest is the version of the package tagged as latest in the npm registry.

With this method, to install updates for every package, you just need to run:

npm update

Keep in mind that with npm update it will never update to a major breaking-changes version. It updates the dependencies in package.json and package-lock.json. It will use the "wanted" version.

To obtain the "latest" version append @latestto individual installs, for example npm install react@latest.

How to Use npm-check-updates

For an advanced and customizable upgrading experience, I'd recommend npm-check-updates. This package can do everything npm outdated and npm upgrade can do with some added customization options. It does require a package installation, however.

To get started, install the npm-check-updates package globally:

npm install -g npm-check-updates

Then, run ncu to display packages to upgrade. Similar to npm outdated it will not apply any changes.

ncu
Checking package.json
[====================] 12/12 100%

 @testing-library/user-event    ^13.5.0  →  ^14.2.1
 @types/jest                    ^27.5.2  →  ^28.1.4
 @types/node                  ^16.11.42  →  ^18.0.1

Run ncu -u to upgrade package.json

To upgrade dependencies, you just need to run:

ncu --upgrade

// or 
ncu -u

Resource: npm-check-updates

• Red = major
• Cyan = minor
• Green = patch

This updates dependencies in only the package.json file and will select the latest version even if it includes a breaking change. With this method, npm install is not run automatically so be sure to run that afterward to update package-lock.json.

To choose your preferred version type, run ncu --target [patch, minor, latest, newest, greatest].

How to Use Interactive Mode with npm-check-updates

ncu --interactive

// or 
ncu -i

Interactive mode allows you to select specific packages to update. By default, all packages are selected.

Navigate down through each package and use space to deselect, and enter when you are ready to upgrade all of the selected packages.

Resource: npm-check-updates

There are several ways to elevate the interactive npm-check-updates experience.

ncu --interactive --format group

This command groups and organizes packages into major, minor and patch releases.

Resource: npm-check-updates

npm-check-updates provides other useful tools such as doctor mode which installs upgrades and runs tests to check for breaking changes.

I highly suggest taking a look at the documentation overall to learn more about all this package has to offer. The project is well-maintained along with a climbing weekly download rate of ~294,467 at the time of writing this article.

Summary

Getting in the habit of regularly updating your dependencies will help your apps' security and performance.

Both npm outdated and npm-check-updates are useful tools to check for packages that could use a version bump.

I suggest trying both of these out to see which provides a better developer experience.

I hope these methods help along the path of updating!

Node is a runtime environment that allows developers to execute JavaScript code outside the browser, on the server-side.

NPM, on the other hand, is a package manager for publishing JavaScript packages (also known as Node modules) to the npm registry. You can also use it to install packages to your applications.

To install Node, you have to go to the Nodejs website to download the installer. After downloading, you can run the installer, follow the steps, agree to the terms and conditions, and have the installer on your device.

When you install Node, you also get the npm CLI which you can use to manage packages in your applications.

However, Node and NPM can be updated separately to their latest versions, and in the rest of this article, I'll show you how.

How to Update Node

1. Use NPM to Update Your Node Version

To update Node with NPM, you will install the n package, which will be used to interactively manage node versions on your device.

Here are the steps:

Clear the NPM cache

When you install dependencies, some modules are cached to improve the speed of installation in subsequent downloads. So first, you want to clear the NPM cache.

Install n

npm install -g n

You'll need to install this package globally as it manages the Node versions at the root.

Install a new version of Node

n lts
n latest

The two commands above install the long-term support and latest versions of Node.

Remove previously installed versions

n prune

This command removes the cached versions of the previously installed versions and only keeps the latest installed version.

2. Use NVM to Update Your Node Version

NVM stands for Node Version Manager, and as the name implies, it helps you manage your Node Versions. With NVM, you can install Node versions and specify the version of Node that a project uses.

NVM makes it easy to test projects across various Node versions.

To update a Node Version with NVM, you have to install NVM first.

Here is the installation guide for NVM.

When installed, you can install packages with:

nvm install [version]

You can install the latest version with:

nvm install node

And uninstall other versions with:

nvm uninstall [version]

With many versions installed, you may also want to specify the version to use at a particular time. One way to do this is by setting a default alias like this:

nvm alias default [version]

This way, Node executions will run with the specified version.

3. Download Updated Node Binaries

And you can also get the latest versions from the Node.js website. On it, you can find the latest and long-term support versions for your device.

Node.js downloads page

Downloading the latest version also gives you the latest version of NPM.

How to Update NPM

Just as you use NPM to update packages, you can use NPM to update itself. Here's the command to achieve this:

npm install -g npm@latest

This command will install the latest version of NPM globally.

On Mac, you may have to pass the sudo command before NPM, as this installs NPM at the root of your device, and you need privileges to do that.

Conclusion

In this article, we've seen how to update Node and NPM to their latest versions.

To reiterate, when you install Node, you automatically get NPM. If you also update Node by installing the binaries from the website, you get an updated NPM.

We also saw other ways to update Node and NPM globally on your device.

This article will show you all you need to get started with package managers like NPM and Yarn.

But why exactly do we need a package manager in our development workflow? Let's find out.

Why Do You Need a Package Manager?

Suppose there were no package managers. In that case, you would have to do the following manually:

• Find all the correct packages for your project
• Verify that the packages don't have any known vulnerabilities
• Download the packages
• Install them at the appropriate location
• Keep track of new updates for all your packages
• Upgrade each package whenever there is a new release
• Remove the packages you no longer need

Manually managing tens or hundreds of packages is a tiresome and time-consuming endeavor.

Therefore, package managers—such as NPM, pNPM, Bower, and Yarn—help automate and eliminate the tedious process of managing all your packages manually.

Keep in mind that a package manager is not the same as a package registry. So, let's find out the main difference.

Package Manager vs. Package Registry – What's the Difference?

A package manager is a tool developers use to automatically find, download, install, configure, upgrade, and uninstall a computer's packages.

NPM (Node Package Manager) and Yarn (Yet Another Resource Negotiator) are two popularly used package managers.

A package registry is a database (storage) for thousands of packages (libraries, plugins, frameworks, or tools).

In other words, a package registry is the place packages get published to and installed from.

NPM registry and GitHub Packages are two popularly used package registries.

So, now that we know what a package manager is and why it is needed, we can discuss how to use the two popular ones—NPM and Yarn.

Note that there are numerous NPM vs. Yarn debates out there – so we will avoid them here because the best package manager is the one that works best for you.

Therefore, this article will show you how NPM and Yarn work rather than tell you which package manager is best. It is then up to you to decide which you prefer.

Alternatively, you can choose to use NPM for a specific project and Yarn for another—depending on which manager you believe is best suited for the job.

So, without any further ado, let's begin by learning how to install the two managers.

How to Install Node Package Manager (NPM)

NPM gets installed automatically while installing Node.

Therefore, to get NPM installed on your system, go to the NodeJS website and get Node's latest LTS or the current version.

How to Install Yarn

It is best to install Yarn through NPM. So, first, install NPM from the Node.js website.

Once you've installed NPM, proceed to install Yarn like so:

npm install -g yarn

How to Check the Installed Node Version

To check the Node.js version installed on your system, run:

node -v

The -v flag in the snippet above is a shorthand for --version.

How to Check the Installed NPM Version

To check the NPM version installed on your system, run:

npm -v

How to Check the Installed Yarn Version

To check the Yarn version installed on your system, run:

yarn -v

How to Upgrade Node Package Manager

Update to the latest NPM version by running:

npm install npm@latest -g

How to Upgrade NodeJS

Suppose you wish to upgrade your Node.js installation. In that case, you have two options:

Option 1: Upgrade via the NodeJS website

One way to upgrade your NodeJS installation is to manually download and install the latest version from the Node.js website.

Option 2: Upgrade via a version management tool

Another way to upgrade your NodeJS installation is to use a version manager such as NVM, n, or nvs.

How to Upgrade Yarn

Update to the latest Yarn version by running:

yarn set version latest

So, now that we have NPM (or Yarn) on our computer, we can start using the installed manager to find, install, configure, and remove our project's packages.

But what exactly is a package? Let's find out.

What Exactly Is a Package?

A package is a directory (or project) that has a package.json file used to record information about it.

Note: You can only publish packages (a project described by a package.json file) to the NPM registry.

How to Install Packages

There are two ways to install a package: locally or globally.

Local package installation

A locally installed package is one that you can use only in the project in which you've installed it.

To install a package locally, do the following:

1. Navigate to the root directory of your project from the command line.
2. Install your package using the NPM or Yarn installation command below (depending on the package manager you've chosen to use for your project).

Note: You must have Node and NPM installed on your system for the NPM (and Yarn) installation commands below to work. You can get both by installing the latest LTS or the current version from the Node.js website.

NPM installation command

npm install package-name --save

Note that the --save command above instructs NPM to save package-name in the package.json file as one of the packages on which the project depends.

Suppose you wish to install an exact version of a package. In such a case, add a @[version-number] after the package's name like so:

npm install package-name@4.14.1 --save

Alternatively, if the package you are installing is for development and testing purposes, use:

npm install package-name --save-dev

The commands above will cause NPM to download three items into your project's root directory: a node_modules folder, a package.json file, and a package-lock.json file. We will discuss these items in detail later on in this article.

Yarn installation command

yarn add package-name

Suppose you wish to install an exact version of a package. In such a case, add a @[version-number] after the package's name like so:

yarn add package-name@4.14.1

Alternatively, if the package you are installing is for development and testing purposes, use:

yarn add package-name --dev

The commands above will cause Yarn to download three items into your project's root directory: a node_modules folder, a package.json file, and a yarn.lock file. We will discuss these items in detail later on in this article.

So, now that we know how to install a package locally, we can discuss the global package installation.

Global package installation

A globally installed package is a package that you can use anywhere on your system.

To install a package globally, run the code below on your terminal:

npm install package-name -g

Alternatively, you can use Yarn like so:

yarn global add package-name

Note that you can run the commands above from any location on your system.

Local vs. global package installation

Generally, it is better to install a package locally. Below are some of the differences between a local and global installation.

Difference 1: Installation location

A locally installed package gets installed in the directory where you executed the npm install package-name (or yarn add package-name) command.

Specifically, you will find a project's locally installed packages in its node_module directory.

In contrast, a globally installed package gets installed in a single location on your system. The exact location depends on your system's configuration.

Difference 2: Package versions

Suppose you installed your package locally. Then, you can use different versions of the same package for multiple app development.

However, you are forced to use the same package version for all your apps when you install globally.

Difference 3: Updates

A local installation allows you to choose the project's packages you wish to upgrade to the latest version. This makes it easier to manage upgrades that break compatibility with other packages.

However, upgrading a globally installed package updates the package for all projects—which can cause maintenance nightmares if the upgrade breaks compatibility with other packages.

Difference 4: Usage recommendation

Global installation is best for packages you intend to use only on your command line—especially when they provide executable commands reusable across projects.

However, local installation is best for packages you intend to use in your program—through the import statement or require() function.

Difference 5: Examples

NPM, React Native CLI, Gatsby CLI, Grunt CLI, and Vue CLI are well-known examples of global packages.

Common examples of local packages are Webpack, Lodash, Jest, and MomentJS.

Note:

• You can do both local and global installation of packages you intend to use both on the command line and in your project. Typical examples of such packages are ExpressJS and CoffeeScript.
• Your package manager does not execute an installed package. NPM (and Yarn) only install packages to the node_modules directory. And if you had specified the --save command, your manager would add details about the package to the package.json file.
• To execute (run) any executable package, you must explicitly do so yourself. We will discuss how in a later section of this article.

But what exactly are the node_modules folder, package.json file, package-lock.json file, and yarn.lock file? Let's find out.

What Is a node_modules Folder?

The node_modules directory is the folder where NPM places all the packages it downloads locally for your project.

What Is a package.json File?

A package.json file is a JSON document that package managers—like NPM and Yarn—use to store information about a specific project.

In other words, a package.json file is a project's metadata file.

Advantages of a package.json File

A package.json file:

• makes it possible to publish your project to the NPM registry
• makes it easy for others to manage and install your package
• helps NPM manage a module's dependencies easily
• makes your package reproducible and shareable with other developers

How to Create a package.json File

Go to your project's root directory and initialize the creation of a package.json file by running:

npm init

Or, if your package manager is Yarn, run:

yarn init

Once you've executed the initialization command above, your package manager will walk you through creating the package.json file by asking a few questions about your project.

If you wish to skip the questionnaire, you can create a default package.json file. Let's see how.

How to Create a Default package.json File

Suppose you prefer to skip the questionnaire prompted by the npm init (or yarn init) command. In such a case, go to your project's root directory and run:

npm init -y

Or, if your package manager is Yarn, run:

yarn init -y

The command above will use default values extracted from the current directory to create your project's package.json file.

Note: The -y flag is a shorthand for --yes.

Once your package manager finishes its initialization process, your project's package.json file will contain an object with a set of properties.

Here's an example:

{
  "name": "codesweetly-project",
  "version": "1.0.0",
  "main": "index.js"
}

You can see that the package.json file above contains the name, version, and main fields. Let's learn more about these properties below.

The package.json's Fields

The package.json's properties make your project usable to package managers and end-users.

Suppose you wish to publish your package to the NPM registry. In that case, your package.json file must have the "name" and "version" fields.

However, if you do not intend to publish your package, in that case, all fields—including the "name" and "version" properties—are optional.

Let's learn more about the commonly used fields in a package.json file.

name

The "name" field is a property used to record a project's name.

The "name" property's value must be:

• a single word
• lowercase lettering
• and less than or equal to 214 characters

Note that you can join words together with hyphens and underscores.

Here's an example:

{
  "name": "code_sweetly-project"
}

version

The "version" field indicates a project's current version number.

The "version" property must be in the form of a major.minor.patch format. It must also follow the semantic versioning guidelines.

Here's an example:

{
  "version": "1.0.0"
}

description

The "description" field is a property containing a brief description of a project's purpose.

NPM recommends having a "description" property to make your package easier to find on the NPM website.

Your description will be one of the things that's shown when people run the npm search command.

Here's an example:

{
  "description": "A brief description about this package (project)"
}

main

The "main" field indicates a project's entry point.

In other words, when someone runs the require() function, Node will resolve the invocation to require(<package.json:main>).

Here's an example:

{
  "main": "./src/index.js"
}

private

The "private" field lets package managers know whether they should publish your project to the NPM registry.

Here's an example:

{
  "private": true
}

If you set your package.json's "private" property to true, package managers will not publish your project.

Therefore, setting the property is an excellent way to prevent accidental publication of your package.

scripts

The "scripts" field defines the script commands you want to run at various times in your project's lifecycle.

Here's an example:

{
  "scripts": {
    "test": "jest",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build" 
  }
}

The "scripts" field above contains five properties whose values are the commands we want our package manager to run whenever we invoke the property's key.

So, for instance, running npm run dev will execute the "webpack --mode development" command.

keywords

The "keywords" field specifies an array of keywords that can help people discover your package.

Here's an example:

{
  "keywords": [
    "drag",
    "drop",
    "drag and drop",
    "dragndrop",
    "draggable" 
  ]
}

The "keywords" property is part of the information shown when people run the npm search command.

author

The "author" field lists a project's author's details.

Here's an example:

{
  "author": "Oluwatobi Sofela <oluwatobiss@codesweetly.com> (https://www.codesweetly.com)"
}

You can also write the snippet above as:

{
  "author": {
    "name": "Oluwatobi Sofela",
    "email": "oluwatobiss@codesweetly.com",
    "url": "https://www.codesweetly.com"
  }
}

Note that the "email" and "url" properties are optional.

dependencies

The "dependencies" field lists all the packages a project depends on in production.

Here's an example:

{
  "dependencies": {
    "first-package": "^1.0.4",
    "second-package": "~2.1.3"
  }
}

So, whenever a user installs your project from the NPM registry, the dependencies property ensures package managers can automatically find and install the packages listed.

Note that you can add a package to the "dependencies" field through either of the following ways:

• Manually add the name and the semantic version of each package your project depends on in production.
• Run the npm install package-name --save-prod command on your terminal. Or yarn add package-name if Yarn is your package manager.

devDependencies

The "devDependencies" field lists all the packages a project does not need in production—but requires for its local development and testing purposes.

Here's an example:

{
  "devDependencies": {
    "first-dev-package": "^5.8.1",
    "second-dev-package": "3.2.2—4.0.0"
  }
}

Note that the packages listed in the "devDependencies" field will be available in the project's development environment but not on its production server.

Suppose a user installs the project through the npm install (or yarn add) command. In such a case, the package manager will find and download all the listed devDependencies to the project's node_modules directory.

Keep in mind that you can add a package to the "devDependencies" field through either of the following ways:

• Manually add the name and the semantic version of each package on which your project depends for its development and testing purposes.
• Run the npm install package-name --save-dev command on your terminal. Or yarn add package-name --dev if Yarn is your package manager.

homepage

The "homepage" field specifies the URL to your project's homepage.

Here's an example:

{
  "homepage": "https://codesweetly.com/package-json-file-explained"
}

So, now that we know what a package.json file is, we can discuss package-lock.json.

What Is a package-lock.json File?

The package-lock.json file is a document NPM uses to record the exact version of all the packages you've installed locally to your project's node_modules directory.

A package-lock.json file makes an app 100% reproducible in the exact way you published it to the NPM registry.

So, suppose a user clones your app and runs the npm install command. In such a case, package-lock.json ensures that the user downloads the exact version of the packages you used to develop the application.

For instance, let's say a user cloned your app containing no package-lock.json file, and a dependency used in the app has a newer version.

Suppose the dependency's version number in the package.json file has a caret sign (for example, ^2.6.2). In that case, NPM will install the latest minor version of the dependency—which might cause the app to produce erroneous results.

However, suppose the user cloned your app containing a package-lock.json file. In that case, NPM will install the exact version of the dependency as recorded in the package-lock.json file—regardless of whether a newer version exists.

Therefore, users will always get your app the precise way you published it to the NPM registry.

In other words, NPM uses the package-lock.json file to lock your package's dependencies to the specific version numbers you used for the project's development.

Note: NPM will update the packages recorded in the package-lock.json file whenever you run the npm update command.

What Is a yarn.lock File?

The yarn.lock file is a document Yarn uses to record the exact version of all the packages you've installed locally to your project's node_modules directory.

The yarn.lock file is comparable to NPM's package-lock.json lockfile.

We earlier mentioned that your package manager does not execute an installed package—you must explicitly do so yourself. Let's discuss how.

How to Run an Executable Package

There are several ways to run an executable package. Below are the standard techniques.

Manually locate and execute the package

One way to run an executable package is to type its local path on your command line like so:

./node_modules/.bin/package-name

Add the package to the package.json's scripts field

An alternate way to execute a package is to first add it to the "scripts" field of your project's package.json file like this:

{
  "name": "your_package",
  "version": "1.0.0",
  "scripts": {
    "desired-name": "name-of-package-to-execute"
  }
}

Afterward, you can run the package like so:

npm run desired-name

Note that the command above is shorthand for npm run-script desired-name.

Alternatively, you can execute the package with Yarn like so:

yarn run desired-name

Here's an example:

{
  "name": "codesweetly-app",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
  }
}

The snippet above added webpack to your package.json's "scripts" field. So, we can now execute webpack on the command line like this:

npm run build

Or, if your package manager is Yarn, you can run webpack like this:

yarn run build

Use NPX

A faster way to run an executable package is to use NPX like so:

npx package-name

With NPX, you no longer need to add your package to the "scripts" field of your project's package.json file.

NPX (Node Package Execute) is a Node package runner that automatically finds and executes a specified package.

Here's an example:

npx webpack

The command above will automatically find and execute webpack. So, we do not need to add the "build": "webpack" property to the "scripts" field of our package.json file.

Note: NPX automatically gets installed when you install Node 8.2/NPM 5.2.0 or higher.

You can also run some code using your preferred Node.js version. Let's find out how.

How to Run Code Using Your Preferred Node.js Version

You can use the @ character and the node npm package to specify the Node.js version you wish to use to execute your code.

Here's an example:

npx node@7 index.js

The snippet above tells NPX to run index.js with the latest version of Node from version 7 major.

Using the node@ command is a helpful way to avoid using Node.js version management tools like nvm to switch between Node versions.

Suppose you wish to confirm the Node version NPX will use to run your code. In that case, run:

npx node@7 -v

The snippet above will display the latest Node version from version 7 major that NPX will use to run your code—for example, v7.10.1.

How to Check for Outdated Local Packages

To determine if any of your project's packages are outdated, run:

npm outdated

If the command outputs nothing, it means all your project's packages are up to date.

Otherwise, see this npm-outdated article for a detailed explanation of the command's output.

Alternatively, you can use Yarn like so:

yarn outdated

Note: To check a specific package's outdated status, add the package's name after the outdated keyword—for example, npm outdated lodash.

How to Check for Outdated Global Packages

To confirm which global package is outdated, run:

npm outdated -g --depth=0

How to Check for Locally Installed Packages

Here are three ways to check for locally installed packages:

Locally installed packages and their dependencies

npm list

Or use Yarn like so:

yarn list

Locally installed packages—without their dependencies

npm list --depth=0

Or,

yarn list --depth=0

Check if a specific package got installed locally

npm list package-name

How to Check for Globally Installed Packages

Here are three ways to check for globally installed packages:

Globally installed packages and their dependencies

npm list -g

Or use Yarn like so:

yarn list -g

Globally installed packages—without their dependencies

npm list -g --depth=0

Or,

yarn list -g --depth=0

Check if a specific package got installed globally

npm list -g package-name

How to Update Packages

Here's how to update packages with NPM and Yarn:

How to update a specific package to its latest version

npm update package-name

Or, for projects managed with Yarn, run:

yarn upgrade package-name

How to update all of a project's locally installed packages

npm update

Or,

yarn upgrade

How to update a specific globally installed package

You can update a globally installed package like this:

npm update package-name -g

How to update all your system's globally installed packages

npm update -g

How to Uninstall Packages

Here's how to uninstall packages with NPM and Yarn:

How to uninstall a package from a specific project

First, navigate to the project's root directory from the command line and run:

npm uninstall package-name

Note:

• Add the -S (or --save) flag to remove references to the package in the dependencies field of the project's package.json file.
• Add the -D (or --save-dev) flag to remove references to the package in the devDependencies field of the project's package.json file.

For projects managed with Yarn, run:

yarn remove package-name

Note: The yarn remove command will automatically update the project's package.json and yarn.lock files.

How to uninstall a global package

npm uninstall package-name -g

Note that it is best practice not to remove packages manually from the node_modules folder as such action can affect other modules depending on it.

But what exactly is a module in NodeJS? Let's find out below.

What Exactly Is a Module in NodeJS?

A module in NodeJS is any file in the node_modules folder that the computer can load through Node's require() function.

Here's an example:

const myModule = require("./codesweetly.js");

Suppose the computer successfully used the require() function to load the codesweetly.js file. In such a case, it means codesweetly.js is a module—assigned to the myModule variable.

Keep in mind that a module may also be a package—but not always.

A module is not a package if it does not have a package.json file used to record information about it.

Also, note that for a module to be loadable by the require() function, the module must be one of the following:

• A package—whose package.json file contains a "main" field.
• A JavaScript file.

How to Publish Your Project to the NPM Registry

NPM is a free registry for public package authors.

So, you can use it to publish any project (folder) from your computer that has a package.json file.

Below are the steps required to share your package with the world.

Step 1: Sign in or sign up

Go to the NPM website and sign in (or sign up if you do not yet have an account).

Note: make sure that you verify your email after creating a new account. Otherwise, you will get a 403 Forbidden error while publishing your package.

Step 2: Log in

Login to your NPM account from the command line like so:

npm login

Note: You can use the npm whoami command to check if you are currently logged in.

Step 3: Publish your package!

Go to your project's root directory and publish it like so:

npm publish

Make sure that your package's name does not currently exist on NPM. Otherwise, you will get an error while publishing.

You can use the npm search command (or the NPM website's search bar) to search if the name you wish to use already exists on NPM.

Suppose all the suitable names for your package are already taken. In that case, NPM allows you to publish your project as a scope.

In other words, you can publish your package as a sub-section of your username. Let's see how below.

How to publish your package as a scope of your username

Open your package.json file and prefix your package's name with your username.

Here's an example:

{
  "name": "@username/package-name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

NPM's default setting assumes that a scoped name package is a private project. So, you will get an error if you use the npm publish command to share a scoped name package.

Therefore, to publish your package as a scope of your username, add the --access=public flag to the npm publish command:

npm publish --access=public

Note: You can make your project a scoped package during the initialization process by using the npm init --scope=username command instead of npm init.

Overview

This article discussed what a package manager is. We also looked at how two popular package managers (NPM and Yarn) work.

Thanks for reading!

And here's a useful ReactJS resource:

I wrote a book about React!

• It's beginners friendly ✔
• It has live code snippets ✔
• It contains scalable projects ✔
• It has plenty of easy-to-grasp examples ✔

The React Explained Clearly book is all you need to understand ReactJS.

When you start working with JavaScript and discover that you can not only work with it in the frontend but also in the backend, a new world of possibilities seems to open up before you.

To begin with, you realize that you don't need to learn another language to have the backend of your applications up and running. Second, Node.js is simple to install and works in all development platforms we are used to: Mac, Linux, and Windows.

In this article, I'll show you how to install Node on Windows with a step-by-step guide so you're ready to use it.

You will also be happy to know that package management is made even easier, as npm (the Node Package Manager) comes with the installation of Node.

With it, you will be able to have access to an almost unending number of community-made dependencies. You can simply install these in your app so you don't have to reinvent the wheel time and again.

So let’s install Node on Windows and start playing with it a bit.

How to Install Node on Windows

The first thing to do is to access Node’s official site.

Node site front page

The website is intelligent enough to detect the system you are using, so if you are on Windows, you will most likely get a page like the one above. Right in the middle of it, two buttons show you the most common possibilities of download – also the latest ones.

If you are curious about all the most recent features Node has to offer, go with the button on the right. For most people, however, the site itself recommends using the Long-Term Support version, which leads you to the button on the left.

At the moment of writing this article, the LTS version is version 16.14.0.

When you click on any of them, an .msi file gets downloaded to your computer. The next step is to click on it and the installation will begin. The wizard opens and the following window appears:

Node installation wizard's initial page

Click Next. On the following window, you'll read (you do read it, right?) Node’s EULA, accept its terms, and click Next again. The next window is the one where you select the destination folder for Node.

Windows normally recommends that the programs be installed in the Program Files folder, in a folder of their own (in our case, we are installing Node.js, so the nodejs folder is our go-to place).

For the sake of simplicity, let’s follow the wizard’s suggestions and use C:\Program Files\nodejs\ as the destination folder.

The following window is the one where you can customize your installation. Unless you have disk space problems or have a clear idea as to what you are doing, I recommend keeping the options as they are and just pressing Next again.

One thing I would like to point out on this window is the third option you see. That’s the option that allows you to have npm installed along with Node on your computer. This way, if you still intend to change the setup in this page somehow, keep that option as is and npm will be installed for you at the end of the process.

The next window deals with the automatic installation of “Tools for Native Modules”. Again, unless you are sure you need them, I recommend keeping this checkbox unmarked and just pressing Next once more.

We’ve reached the final pre-install window. As it says, from here, you just have to click Install to begin the installation, so let’s do it.

Notice the shield beside the word Install? That means Windows will ask you to confirm if you really want to go through the installation process as soon as you click that button. Assuming this is the reason why you are reading this article, just click Yes and let the installer do its thing.

We finally got to the window we were hoping for, telling us that Node has successfully been installed on our Windows computer. Click Finish and let’s check if everything is ok.

How to Check Your Node Installation

In order to check if Node (and npm) were properly installed on your computer, you can choose to open either Windows Powershell or the Command Prompt.

We’ll go with the first. Click on the search bar beside the Start Menu button and type powershell. Click Enter and Windows Powershell will open up in a window for you.

In any folder (like C:\Users, for instance), you can type node -v to check for the version of Node you are using. As I mentioned above, the latest version as I write this article is version 16.14.0 and that’s exactly what we see on Powershell above.

As a side note, you may be asking yourself why we can check this in any folder. One of the options in the custom setup (that we left as is) was to add Node to PATH. By doing so, we are able to access it from anywhere while navigating through the folders.

It is also possible to check for the npm version. To do so, type npm -v and press Enter. In our case, latest version is version 8.3.1, so we can pretty much say we are up to date.

How to Use npm

Ok, but you did not go all this way reading just to finish here after installing Node and npm, right? You want to see both in action. Let’s do it, then.

To learn how to start a project with Node and install packages with npm, we’ll use Visual Studio Code.

We'll create a folder named Node_Test, where we’ll put both Node and npm to work a little.

Let’s start simple. Inside the Node_Test folder, right click inside the folder and click Open with Visual Studio Code. This will make VS Code open in this empty folder automatically.

Inside VS Code, if you haven’t yet, open a new terminal by pressing Ctrl+Shift+' (single quote).

Click on the terminal and, on the command line, type npm init -y. This will start a Node project automatically for us without us needing to worry about the initial configuration (the -y flag will do that on its own). This creates a package.json file within the Node_Test folder.

Next, let’s install Express as a dependency. You can find it and a list of other possible dependencies of npm on https://www.npmjs.com/.

Another side note: every time you open npm’s web site, on the top left, you will see what appears to be a meaningless combination of three words. If you look at the initials, though, you will see that it is a brand-new sequence with the acronym npm.

Right, now let’s install Express with this Nifty Purring Manticore. Back on VS Code and the terminal, type npm i express and press Enter. Express will be installed. You can do the same with any other dependency you can think about.

To make sure that Express is installed, open package.json. Scroll up to the list of dependencies and you will see Express there.

Wrapping Up

That’s pretty much it. In this article, you saw how to install Node and npm on Windows.

I hope this has been useful to you. For more tutorials like this, check out freecodecamp.org/news and browse for the topic you would like to learn about.

Happy coding! 😊