DEV Community: Ubaydah

Managing Dependencies in Node.js: An Overview of NPM and Yarn

Ubaydah — Sat, 18 Mar 2023 16:20:16 +0000

When developing applications, there is a need to utilize external packages to ensure the app functions properly. In software development, these external modules are called dependencies.
Managing dependencies involves ensuring all these modules are properly updated, resolving conflicts like versions and ensuring the project has the necessary tools.

In Node.js, dependencies can be managed using Node Package manager (Npm) and Yarn. Although these two are used in Node.js projects to manage dependencies and ensure the project can access needed packages and run smoothly, they have similarities and differences.
In this article, these two package managers (npm and Yarn) will be reviewed and how they can be used in projects.

Npm

Npm is a package manager for Node.js, a JavaScript runtime environment that allows developers to run JavaScript code outside a web browser. It is included with Node.js and is used to manage code packages that can be easily installed and used in Node.js projects.

It allows developers to install, update, and manage packages from a centralized repository of publicly available packages. It also enables developers to create and publish packages to the repository for other developers to use.

To use Npm in a Node.js project, you first need to initialise a new project using the command below:

npm init -y

This will create a package.json file in the root of your project and update the file with some default values. This file is used to specify the project's dependencies and other information, such as the project's name, version, and author.

Once you have a package.json file, you can use the command below to install packages and dependencies.

npm install <package-name>

For example, if you want to install a package for hashing a password, let’s say bcrypt, you will run the following command:

npm install bcrypt

For a list of available packages you can use for your projects, check https://www.npmjs.com/

Npm will automatically download the packages and save them to a node_modules directory in your project. You can then import and use the packages in your code as needed.

Npm also provides a command-line interface for managing packages, including commands for updating, uninstalling, and searching for packages in the repository. In addition, Npm allows developers to publish their packages to the repository using the command below.

npm publish

Yarn

Yarn is a package manager for Node.js and other programming languages. It was developed by Facebook as an alternative to Npm (Node Package Manager) and is now widely used in the Node.js community.
It offers some advantages over Npm, including faster package installation times, improved reliability, and better support for offline development. Yarn achieves faster installation times by using parallel package downloads and caching downloaded packages. This means that subsequent installations of the same package will be faster because the package is already cached locally.
Yarn also offers improved reliability through its lockfile mechanism, which ensures that all developers working on a project are using the same version of packages. This helps to prevent issues where different developers are using different package versions, which can cause conflicts and bugs in the code.

To use Yarn in a Node.js project, you first need to install Yarn on your computer using a package manager such as NPM by using the command below:

npm install --global yarn

The above command installs Yarn globally on your PC.

Once Yarn is installed, you can initialize a new project using the command below, which will create a package.json file in the root of your project.

yarn init

To install packages using Yarn, use the command below, followed by the name of the package you want to install.

yarn add <package-name>

For example, to install the express package, you would use the following command:

yarn add express

Yarn also provides a command-line interface for managing packages, including commands for updating, uninstalling, and searching for packages in the repository. Additionally, Yarn provides a way for developers to publish their packages to the repository using the command below:

yarn publish

In a project, using Npm and Yarn together is not advisable . Each comes with its own lockfile to manage dependencies; hence one can only stick with one in a project.

Differences between NPM and Yarn

Although both NPM and Yarn are used to manage dependencies in Nodejs, they have some differences. Let’s go over them in the table below:

Feature	NPM	Yarn
Speed	Npm is slower when installing packages for larger projects for versions less than 5.0. The versions greater than 5.0 has been improved to make it better.	Yarn is generally faster than Npm when it comes to package installation for large projects.
Security	Npm relies on a less secure mechanism that relies on package names and versions.	Yarn has a more secure dependency resolution algorithm than NPM. It uses checksums to ensure that packages are not tampered with during installation.
Offline Support	Npm requires an internet connection to install packages.	Yarn has better offline support than NPM. It has a cache that can be used to install packages without an internet connection.
User Interface	Npm has a less interactive user interface than Yarn.	Yarn has a more user-friendly command-line interface than NPM. It has more informative error messages and progress bars that make it easier to understand what is happening during package installations.
Community	NPM has a larger community and a longer history than Yarn.	Yarn has gained popularity in recent years and has a growing community of users and contributors.

Conclusion

In conclusion, managing dependencies is an essential part of developing Node.js applications, and NPM and Yarn are two popular package managers that can help simplify this process. Both tools have their strengths and weaknesses, and choosing between them ultimately comes down to personal preference and the specific needs of your project. Whether you choose Npm or Yarn, it's important to understand the basics of package management and how to use these tools effectively to ensure that your projects run smoothly and are free from dependency conflicts and bugs.

To learn more about the two, check their websites and docs below:

How To Build An Online Library In Next.js With Xata And Cloudinary

Ubaydah — Wed, 23 Nov 2022 19:38:34 +0000

Jamstack, fully known as javascript, APIs, and markup, is one of the architectures revolutionizing the way we approach building faster, scalable, and secure websites. It provides many benefits, like better performance and excellent developer experience, making it easy to serve static content dynamically.
Managing media and databases in Jamstack architecture can become cumbersome, so there is a need for products like Xata, which provides a serverless database for Jamstack products, and Cloudinary, which makes it easy to manage media easily in the application.

In this tutorial, we’ll create an online library that allows us to upload, manage and get books from others using Next.js, Chakra UI, Xata, and Cloudinary.

What Is Xata?

Xata is our go-to serverless data platform that allows us to optimize our development workflow by managing, scaling, preventing downtime, caching, and maintaining our database. At the same time, we focus on developing the client side. It provides a powerful search engine, relational database, analytics engine, and more. It works with various javascript stacks like Nextjs, Svelte js, Node js, etc.

What Is Cloudinary?

Cloudinary is a media management platform that makes it easy to manage images, files, and videos for websites and mobile apps. It covers everything from uploading, storing, optimizing, delivery, and media transformation, and it provides SDK support in various languages.

Prerequisites

To follow this tutorial, we will need to have the following:

Understanding of JavaScript, Typsecript and Es6 features
Basic knowledge of React and Next.js
Basic knowledge of Chakra UI
Nodejs and npm installed on our PC
A Cloudinary account, signup is free
A Xata account signup is free

The project currently runs on code sandbox, and you can easily fork to get started.
It is deployed live on Netlify on this link.

This a picture of what we will be building

Now let’s dive into building our application.

Project Setup

We will run npm init to initialize a new project in any directory of our choice.

Let’s go to the project directory and run the following commands to install dependencies.

cd <project_name>

# Install dependencies
npm install react react-dom next

# Install devDependencies
npm install typescript @types/node @types/react @chakra-ui/react axios bcrypt nprogress yup -D

We will create a new directory called pages and add an index.tsx file. In the index.tsx, let’s add a layout like this.


const Index = ({ }) => {
  return (
    <h1>Hello world</h1>
  )
};

We then start the development server on http://localhost:3000/ by running the command below:

npx next dev

Running this command will give us a blank page with “hello world” written.

Now, let’s set up the database of our application.

Setting up Xata and Database Schema

To get started with Xata, we will create a new database on the Xata workspace by giving it a name and selecting the region we want our database to be.

Next, let’s start building our database schema by adding new tables.

Our Schema Diagram looks like this:

We then create two tables called User and Book on Xata workspace and add the following fields in our schema above.
Xata lets us relate two tables with the type Link, so we use that when adding the field added_by and link it to the User table.

Now, let’s initialize our database in our project.

To start working with Xata on our Command line interface (CLI), we will install it globally by running the command.

# Install the Xata CLI globally
npm i -g @xata.io/cli

Then let’s run the following command to initialize the created database.

xata init --db https://Ubaydah-s-workspace-qb9vvt.us-east-1.xata.sh/db/bookly

Note: We can access our DB base URL from our workspace's configuration section. It follows the format https://Ubaydah-s-workspace-qb9vvt.{region}.xata.sh/db/{database}.

Xata prompts us and generates a new file for our Xata configuration.

During the process, it prompts our browser to open so we can create an API key for our project, which will be added to our .env file and needed too when deploying.

Codes are generated in our xata.ts file, which contains the Schemas in codes and instances of XataClient, which we will use to interact with the Xata database.

We are all set. Let’s dive into building our APIs.

Building The APIs

In our pages directory, let’s create a new folder named api and two folders in the api folder named book and user.

Login And Register Functionality

Let’s create two new files in our user folder, register.ts, and login.ts.

In the register.ts file, let’s add the following code.


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
import bcrypt from "bcrypt";
import { promisify } from "util";

const hash = promisify(bcrypt.hash);
const handler: NextApiHandler = async (req, res) => {
  const { email, username, password } = req.body;
  const xata = getXataClient();
  //validate
  const emailExists = await xata.db.User.filter({ email }).getFirst();
  const usernameExists = await xata.db.User.filter({ username }).getFirst();
  if (usernameExists) {
    return res.status(400).json({ success: false, message: "Username already exists! " });
  } else if (emailExists) {
    return res.status(400).json({ success: false, message: "User with the email already exists!" });
  }
  // user doesn't exist
  await xata.db.User.create({
    username: username,
    email: email,
    password: await hash(password, 10),
  });
  return res.status(201).json({
    message: "user created",
  });
};
export default handler;

Explanation: In the code above, we created a NextApiHandler that handles creating new users in our database. We first checked if the email or username exists in the database and throw an error based on that. Then, if the user doesn't exist in the database, we hashed their passwords using the bcrypt package and created a new instance of them in the database.

Let’s add our Login API.

In the login.ts file, let’s add the following code.


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
import jwt from "jsonwebtoken";
import bcrypt from "bcrypt";
import { promisify } from "util";
import cookie from "cookie";
const { JWT_SECRET_KEY } = process.env;
const compare = promisify(bcrypt.compare);
const handler: NextApiHandler = async (req, res) => {
  const { email, password } = req.body;
  // instantiate a xata client
  const xata = getXataClient();
  const user = await xata.db.User.filter({ email }).getFirst();
  // validate
  if (!(user && (await compare(password, user.password)))) {
    return res.status(400).json({ success: false, message: "Username or password is incorrect!" });
  }
  // create a jwt token that is valid for 7 days
  const token = jwt.sign({ sub: user.id }, JWT_SECRET_KEY, { expiresIn: "7d" });
  user.update({ token: token });
  // set the jwt token as a cookie
  res.setHeader(
    "Set-Cookie",
    cookie.serialize("token", token, {
      maxAge: 24 * 60 * 60, // 1 day
      sameSite: "strict",
      path: "/",
    })
  );
  return res.status(200).json({
    id: user.id,
    username: user.username,
    email: user.email,
    token: token,
  });
};
export default handler;

Explanation: In the code above, we filtered out the user from the database, checked if the user exists and if the password entered correlated with the hashed password. If the user exists, we created a new Jwt token for the user, valid for seven days, and updated their details with the token. We then set the Jwt token as a cookie in the header, where it will expire in a day on the browser.

Adding The Database CRUD Functionality

Now, let’s write the API to create, delete, update and get books from our database.

In the api/book directory, let’s create four new files named create.ts, update.ts, get.ts, and delete.ts.

In the create.ts file, let’s add the following code:


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
const handler: NextApiHandler = async (req, res) => {
  // instantiate a xata client
  const xata = getXataClient();
  const book = await xata.db.Book.create(req.body);
  res.status(201).json({
    data: book,
  });
};
export default handler;

In the code above, we created a new entry of our book gotten from the request body in our database.

In the update.ts file, let’s add the following code:


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
const handler: NextApiHandler = async (req, res) => {
  const xata = getXataClient();
  const book = await xata.db.Book.update(req.body);
  res.status(201).json({
    data: book,
  });
};
export default handler;

In the code above, we updated an entry of our book with the request body in our database.

In the delete.ts file, let’s add the following code:


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
const handler: NextApiHandler = async (req, res) => {
  const { id } = req.body;
  const xata = getXataClient();
  await xata.db.Book.delete(id);
  res.end();
};
export default handler;

Here, we deleted an entry in the database by passing the book id gotten from the request body.

In the get.ts file, let’s add the following code:


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
const handler: NextApiHandler = async (req, res) => {
  const xata = getXataClient();
  const books = await xata.db.Book.getMany();
  res.status(200).json({
    data: books,
  });
};
export default handler;

Here, we queried the xata database to get all entries from the database.

We can learn more about different ways of querying data in the Xata docs.

Search Functionality

In the api/book directory, let’s create a new file named search.ts and the following code:


import { NextApiHandler } from "next";
import { getXataClient } from "../../../utils/xata";
const handler: NextApiHandler = async (req, res) => {
  const xata = getXataClient();
  const books = await xata.db.Book.search(req.body.value, {
    fuzziness: 1,
    prefix: "phrase",
  });
  res.status(200).json({
    data: books,
  });
};
export default handler;

In this code, we performed a full-text search on the Book table to get entries that matched the value passed. Xata tolerates typos when searching, and this behavior is enabled with the fuzziness parameter added in the code above. The set number 1 indicates one typo tolerance, and fuzziness can be disabled by setting it to 0.

Let’s learn more in xata search docs.

After building the essential APIs, we set up the Cloudinary account to store our documents.

Setting up a Cloudinary account

We will create an account on Cloudinary and be redirected to a dashboard. Let’s copy our cloud name and store it in our .env file.

Let’s hover over the settings section and go to the upload panel to create an upload preset using the unsigned key for uploading our documents.

After, let’s go over the security section to enable PDF delivery with the account.

We are now set to use the account to upload PDFs.

Building Frontend and Consuming APIs

In the root directory, let’s create a new folder named src, we will be creating our react components and hooks here. Create new folders named components, config, and hooks. The config folder will have a config.ts file in which our Cloudinary cloud name will be stored.


const config = {
  cloudinary_name: process.env.NEXT_PUBLIC_CLOUD_NAME,
};
export default config;

In the hooks folder, let’s create a new file called useUploadImage.tsx and add the following codes:


import { useState } from "react";
const useUploadImage = () => {
  const [preview, setPreview] = useState<string>("");
  const [file, setFile] = useState(null);
  const onChange = (e: any, multiple?: any) => {
    //check if files are multiple and collect them in an array
    if (multiple) {
      const selectedFIles: any = [];
      const targetFiles = e.target.files;
      const targetFilesObject = [...targetFiles];
      targetFilesObject.map((file) => {
        return selectedFIles.push({ file: file, url: URL.createObjectURL(file) });
      });
      setPreview(selectedFIles);
    } else {
      const file = e.target.files[0];
      const reader: any = new FileReader();
      setFile(e.target.files[0]);
      reader.onloadend = () => setPreview(reader.result);
      reader.readAsDataURL(file);
    }
  };
  const image = {
    preview,
    file,
  };
  return { onChange, image };
};
export default useUploadImage;

The code above handles collecting all the files sent on the client side so we can easily send them to Cloudinary.

In the components folder, we will create a new component named BookForm.tsx , where we will handle creating and updating books and sending them to the Next.js server.

In the code above, we created some form validation using yup. We then created some initial values for our book. The useEffect gets the current user logged in and stores it on our local storage. The function that handles sending the book to the server has two parameters: the data sent out and isEdit. The isEdit helps us differentiate whether we are adding a new book or updating it. A new FormData is then created where the file and upload_preset in sent to the Cloudinary API using Axios. Our secure URL is gotten from Cloudinary response, which is sent along with other data to the API to create a new book.

View the full codes on the GitHub repository to check other implementations like the login and register form.

The code also runs on code sandbox, and it’s deployed on Netlify.

Conclusion

In this tutorial, we learned about serverless databases and how to create one using Xata. We also learned about Cloudinary and how to upload files in Cloudinary using upload presets.

Next Steps

Check out the full GitHub repository to see other implementations and components built.
We can also add extra features such as displaying the user profile, bookmarking a book to a list, and other ideas to improve the app.

DEV Community: Ubaydah

Managing Dependencies in Node.js: An Overview of NPM and Yarn

Npm

Yarn

Differences between NPM and Yarn

Conclusion

How To Build An Online Library In Next.js With Xata And Cloudinary

What Is Xata?

What Is Cloudinary?

Prerequisites

Project Setup

Setting up Xata and Database Schema

Building The APIs

Login And Register Functionality

Adding The Database CRUD Functionality

Search Functionality

Setting up a Cloudinary account

Building Frontend and Consuming APIs

Conclusion

Next Steps

Resources