How to effectively perform CRUD operation on an ExpressJS app using PostMan
Tags: webdev, database, javascript, programming
Published: 2023-02-13 20:23:01

In this article, we will build a basic web app using ExpressJS and learn how to perform **CRUD** (create, read, update, delete) operations.

By the end of this article, you should be able to :

* Read information from a server
    
* Post information to the server
    
* Update posted information
    
* Delete information from the server
    
* Use Postman as an HTTP client
    

## Prerequisite

Before starting this article, you should be familiar with the following:

* [Understand the NodeJS and the ExpressJS web framework](https://dev.to/efkumah/how-to-quickly-get-started-building-web-app-with-express-js-2g03)
    
* [Know how to set up an ExpressJS development environment](https://dev.to/efkumah/how-to-effortlessly-set-up-an-express-development-environment-15mm)
    

## Introduction

There are two parts to a web application: the **front end** and the **back end**. The front end represents what users see in the browser. The backend (also known as server-side) is everything that happens "under the hood".

Backend components include servers and databases. Servers control how users access files and databases are organized collections of data.

When building a web app, the preferred method is to use a framework to speed up development. ExpressJS is a web framework that enables backend developers quickly build robust web applications.

It enables developers to set up a server, connect it to a database, and provide an API to allow front-end developers to build the client side of the web application.

APIs enable you to develop all kinds of web applications having all possible CRUD (create, retrieve, update, delete) operations.

We perform these CRUD ( **Create, Read, Update, Delete)** operations whenever the client (eg. web browser) sends HTTP requests with varying HTTP methods ( `GET`, `POST`, `PUT` etc.) to the server.

In this article, we will learn how to perform CRUD operations without building a separate front-end app to handle the requests.

## The Approach

Generally, server-side apps wait for `HTTP` requests from the web browser (or other clients). On receiving the request, the application determines the action to take based on the URL pattern and perhaps any information contained in the `POST` data or `GET` data.

The app may read or write information to the database or execute required tasks based on the requests. The application then returns a response to the client.

Typically, we need a front-end app to help send HTTP requests to the server, hence most developers are aligned to building the front-end of the web app as well.

Instead of building the front end, we can use a tool called [**Postman**](https://www.postman.com/) to send the request, receive the request, and post data to the server.

In this tutorial focuses on using **Postman** as an HTTP client to initiate requests and perform **CRUD** operations on the server.

Generally, CRUD operations are performed on top of a Database Management System (a tool that stores databases) like MySQL, MongoDB, PostgreSQL, etc. However, for this tutorial, we will not use a DBMS yet, we will define an array of items in a `data.js` file (to serve as our database) and use it for the CRUD tasks.

Now, let's learn how to create a web server

## Creating a basic Express app

The code below creates an Express app and listens for a connection to the app

```javascript
const express = require("express"); //require express
const app = express(); //create the app

app.get("/", (req, res) => {
  res.send(`Hello World`);
}); // send a response to the client

app.listen(8000, () => {
  console.log("App has started and running ");
}); // listen for connection to the app
```

## Understanding the Express Code

The below explain the code snippet above:

* The `require()` module import the express module to enable us to create an Express app
    
* Calling the `express()` function returns an `object` typically named `app`. This object has methods for **routing HTTP requests**, **setting up middleware**, **rendering HTML views**, and **registering a template engine.**
    
* The `app.get()` specifies a route definition with `path` and `callback function` passed as `arguments`
    
* The `callback` will be invoked whenever a client initiates a `HTTP GET` request
    
* The `callback` accepts a `request` and `response` objects as arguments.
    
* The `response` object has a `send` method (i.e `res.send()` ) that enables us to return a response to the client. In this scenario, it returns the string `Hello World`.
    
* Lastly, the `app.listen()` listens for a connection to the server.
    

Whenever the server is run, we can go to `localhost:8000` using the web browser to view the returned response.

## Understanding the CRUD Principle

Web apps keep track of data. These data could be customer data, login account details, payment details, health data, etc. The data is typically organized into a database

**CRUD** is an acronym for (**Create, Read, Update, and Delete**). It represents the operations used in web apps that have an underlying database to **perform specific operations on the database from the front-end**

* The `Create` allows users to **create a new record in the database**
    
* The `Read` allows users to **search and retrieve specific information from the database**
    
* The `Update` is used to **modify existing data in the database**
    
* The `Delete` allows users to **delete specified data in the database**
    

Consider a scenario where you have been tasked to build a web app that displays the product catalog for an eCommerce store.

The application would have a front-end **admin functionality** enabling the logged-in user to do the following:

* **Add a new product to the catalog**
    
* **Delete an out-of-stock product from the catalog**
    
* Modify the details of a specified product
    
* Request for the details of a product
    

Each `product` is an `object` with the following details

```javascript
"product":{
  id: <Integer>,
  name: <String>,
  price: <Number>,
  desc: <String>,
  image: <String>
}
```

In building this app, the admin needs to send requests to the server in order to perform the CRUD operations:

* `Create` : add a new product to the catalog
    
* `Read`: view all products in the catalog
    
* `Update`: modify the details of a single product
    
* `Delete`: remove a product from the catalog
    

## An introduction to Postman

Because we would not be developing any frontend for this project, that means we don't have access to a web browser to send HTTP requests, we need a client that will enable us to post, update, delete, and read data from our backend.

[Postman](https://www.postman.com/) is a `REST` client that enables us to send requests, inspect responses and perform other `HTTP` methods (`GET`,`POST`, `PUT`, `PATCH`, `DELETE`, etc). It can be likened to a browser that doesn't render `HTML`.

We will use it to initiate requests to the Express app and ultimately perform the `CRUD` operations.

## Project Structure

Below is a guide on how your project folder should look like


![Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1jbc3xuebvmvs0uu2nh.png)

* We created a `crud_app` directory
    
    * `app.js` represents the `Express` app
        
    * `data.js` will contain all the data required to perform the crud operations.
        
    * `package.json` is the initialized file containing all the dependencies.
        

The `data.js` file contains the `products` arrays that will be exported to be used in the `app.js`

The content of the `data.js` file is as below, it is an array of product items

```javascript
//data.js
//sample products
const products = [
  {
    id: 1,
    name: "albany sofa",
    image:
      "https://dl.airtable.com/.attachments/6ac7f7b55d505057317534722e5a9f03/9183491e/product-3.jpg",
    price: 39.95,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
  {
    id: 2,
    name: "entertainment center",
    image:
      "https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg",
    price: 29.98,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
  {
    id: 3,
    name: "albany sectional",
    image:
      "https://dl.airtable.com/.attachments/05ecddf7ac8d581ecc3f7922415e7907/a4242abc/product-1.jpeg",
    price: 10.99,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
  {
    id: 4,
    name: "leather sofa",
    image:
      "https://dl.airtable.com/.attachments/3245c726ee77d73702ba8c3310639727/f000842b/product-5.jpg",
    price: 9.99,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
];

module.exports =  products ;
```

## Relationship between frontend and backend.

Frontend and backend **communicate with each other - via HTTP requests**.

The backend is the code that runs on the server and receives requests from the client. Whenever the client sends requests to retrieve or modify resources, the server receives the request and contains the logic to send the appropriate data back to the client.

The backend also includes the **database**, which will continuously store all of the data for the application. CRUD operations are performed on the database at the backend

## Understanding the back-end logic

At the backend, develops write logic on how to respond to requests based on the `HTTP` request method (`GET`, `POST`, etc) and the `URI` originating from the HTTP client

### What is routing?

***Routing*** refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, PUT, etc).

With routing, you are matching incoming request paths (eg. **https://localhost/api/products**) from the web client(eg. web browser) to a resource in the database.

Each route can have **one or more handler functions, which are executed when the route is matched.**

In other words, the application “listens” for requests from the client that match the specified route(s) and method(s), and when it detects a match, it calls the specified callback function ( handler function)

At the back-end, we define routing using methods of the Express `app` object that matches the HTTP methods; for example, `app.get()` to handle GET requests and [`app.post`](http://app.post) to handle POST requests.

The syntax for route definition is as below:

```javascript
app.method(path, handler)
```

Where:

* `app` is an instance of `express`.
    
* `method` represents the HTTP request method used
    
* `path` : represents a path on the server where we can access a resource
    
* `handler` : It is a function that executes specified tasks whenever the route is matched.
    

## Defining the logic for retrieving resources

Let us examine how to `READ` data from a server when a route matches.

We will first define a route to allow the client to request information from the server.

Because we want to retrieve a resource, we will use the `GET` method, we will also define the **URI** (path) the client needs to enter, and lastly the **function** that will be executed when the route matches


![Crud 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsnwzr5jtys732vxondr.jpeg)

The code is as below:

```javascript
//route to read data
app.get("/api/products", (req, res) => {
//code to be executed
  const newProduct = products.map((product) => {
    const { id, name, price } = product;
    return {
      id,
      name,
      price,
    };
  });
  res.json(newProduct);
});
```

* `GET` is the default `HTTP` method a web browser uses to fetch data from a server. Hence on our server, we used the `app.get()` method to indicate that a request from the client to the app will use the `HTTP GET` method
    
* The `api/products` represents the `path` the client will enter in the `URL` in order to read information from our server.
    
* Once the `http` method and the `path` specified by the client matches the `route` defined on our server, we execute the `callback` function.
    
* Note that by default, anytime you enter the `URL` in the web browser to access a resource from a server, you are using the `GET` method.
    

The code snippet below indicates the logic we define in the callback function


![Callback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swr3ikjg1cqmfqekwcj3.png)

The details of the logic are as below:

* Use the `array.map()` method to iterate over each `product` item
    
* Access the `id`, `name` and `price` for each item
    
* Return a `newProduct` object with the following values the `id`, `name` and `price`
    
* Finally, use the `res.json ()` method to send the appropriate response to the client
    

**Note:** The `products` array is from the `data.js` file and is included in our app using the snippet below:

```javascript
//import the products array into the app.js
const { products } = require("./data");
```

## Retrieving a resource from the server using Postman.

As mentioned, Postman will act as a web browser to enable us to initiate requests to the server without the need for a front-end application.

Because we want to access information from the server, we will use the HTTP `GET` method to send the request.

The steps to accomplish that are as below:

* Enter the request URL in the field provided
    
* Set the `http` method at the default selection (i.e `GET`)
    
* Click on the `send` button to initiate a request to the server
    
* Whenever the server receives the request, it executes the callback function, and sends the response to Postman
    
* The requested data will display in the "Body" tab of Postman
    

See the screenshot below:


![Crud4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g0t0olx006ikk9u4xgy.png)

## Defining the logic for Inserting data

In this section, we will learn how to insert or post data to our server. Sending data to the server is commonly referred to as **Create** in the CRUD acronym

The syntax to send data to our Express app is as below:

```javascript
app.post(path, handler)
```

At the backend, we define the logic to handle `Post` requests when the route entered by the client matches that on the server.

To post data to our Express app, we utilize `express.json()` middleware. It parses incoming requests and converts the request body to `JSON`

The `express.json()` middleware returns an `object`, this object will contain the data we are posting to our server.

We define this middleware in our app as below:

```javascript
//app.js
//parse json 
app.use(express.json());
```

The logic for posting data to the server is as below:

```javascript

app.post("/api/products/new", (req, res) => {
//accessed the data using the req.body
  res.send({ success: true, data: [...products, req.body] });
});
```

* We used the `app.post` method routes the `HTTP` `POST` request to the specified path and with the specified callback function.
    
* The `api/products/new` specify the `path` the client will enter to post data. For instance, if the domain is **www.example.com,** then the full path to enter in the address bar will be **www.example.com/api/products/new**
    
* Whenever the request is initiated, the form data can be accessed using the `req.body` method
    
* The **res.send()** function basically sends the HTTP response. The body parameter can be a String or a Buffer object or an object or an Array.
    
* The `res.send()` method sends the HTTP response. The body parameter can be a `String`, `Object` or an `Array`.In our scenario, we sent an `object` with `success` and `person` keys.
    
* We assign `true` to the `success` to indicate a positive response.
    
* The value of the `data`key is an array. We copied all the existing products into that array and included the submitted data using the `req.body` method.
    

Now that we defined our backend logic, let's make a `POST` request to [http://localhost:8000/api/products/new](http://localhost:8000/api/products/new) using Postman.

## Sending data to the server using Postman

Postman defaults to a `GET` method that does not contain the request body. To submit data, we need to change the request method to `POST`.

The action is highlighted in blue in the screenshot below:


![Crud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65y0c1ss8p5ozyt07001.png)

Follow the steps below to send data

* **Set the** `http` **method to** `POST`
    
* In the **Enter request URL** field, enter the URL to send the request to
    
* Enter the request body. This is the data we want to send to the server
    
    * Click on the "**Body**" tab
        
    * Click on the "**raw**" radio button, this will display a field to enter the required data
        
    * Click on the "**Text**" tab and select "**JSON**" from the dropdown menu
        
    * In the provided text area, enter the information to send. The body content can be any valid `JSON` object. For instance:
        
        ```javascript
        {
           "FirstName": "Peter",
           "LastName" : "Piper",
           "UserName" : "ppiper",
           "Email"    : "ppiper@example.com"
         }
        ```
        
    * In our scenario, each data is an `object` with the following `key-value` pairs
        
        * `id`, `name` , `image`, `price` and `desc` hence we enter it like below:
            
            ```javascript
            {
            "id": 5, 
            "name":"TV set",
            "image": "http:dl.airtable...",
            "desc": "Smart TV"
            }
            ```
            
* Click on the "**Send**" button to initiate a request
    


![Crud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tqbcnddn1tldol0vf5h.png)

### Viewing the response on Postman

Postman has a response section for viewing responses sent by the server.

See the screenshot of the section below:


![crudapp 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2qkeeniclcshajryf3c.png)

The screenshot of the response returned by the server is as below:


![crudaa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohm249t7yp67qe8rh1qn.png)
Examining the response will indicate a new data has been added to our dataset.

See the code below:

```javascript
//entire response from Postman
{
    "success": true,
    "data": [
        {
            "id": 1,
            "name": "albany sofa",
            "image": "https://dl.airtable.com/.attachments/6ac7f7b55d505057317534722e5a9f03/9183491e/product-3.jpg",
            "price": 39.95,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 2,
            "name": "entertainment center",
            "image": "https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg",
            "price": 29.98,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 3,
            "name": "albany sectional",
            "image": "https://dl.airtable.com/.attachments/05ecddf7ac8d581ecc3f7922415e7907/a4242abc/product-1.jpeg",
            "price": 10.99,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 4,
            "name": "leather sofa",
            "image": "https://dl.airtable.com/.attachments/3245c726ee77d73702ba8c3310639727/f000842b/product-5.jpg",
            "price": 9.99,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 5,
            "name": "TV set",
            "image": "http:dl.airtable...",
            "desc": "Smart TV"
        }
    ]
}
```

## Defining the logic for Updating data

We have covered how to `CREATE`, and `READ` data. In this section, we will `Update` the data on the server.

The syntax for updating data is as below:

```javascript
app.put(path, handler)
```

* Use the `PUT` method to update or modify a resource on the server
    
* The `path` indicates the route to the resource. Because we will be updating specific data, we need to provide the `id` of the item to update. In our scenario, we will define the path as `api/products/:id`.
    

The logic is defined below:

```javascript
app.put("/api/products/:id", (req, res) => {
  //get the id of the item to update
  const { id } = req.params;
  //get the value in the request body
  const { name } = req.body;

  //updating the item
  const updatedProducts = products.map((product) => {
    if (product.id === Number(id)) {
      product.name = name;
    }
    return product;
  });

  res.send({ success: true, data: [...updatedProducts] });
});
```

* The `app.put()` method routes the `HTTP` `PUT` request to the specified path and with the specified callback function.
    
* The `api/products/:id` represents the path.
    
* The `:id` is a placeholder, it allows for dynamic routing based on whatever parameter was added to the `api/products` path
    
* The `req.params` is an object that gets populated with the value from the parameter.
    
* Using gain access to the parameter using
    
    ```javascript
    const {id} = req.params
    ```
    
* The `req.body` enable us to access whatever is in the request's body
    
* We used the `.map()` method to iterate over each item in the array. If the id of the item equals that receives from the `req.params` , we update the name of the item with the value received from the `req.body` and return the item
    
* We used the `res.send()` method to send a response to the client
    

## Updating data using Postman

To update data, we change the `HTTP` request method to `PUT`

Follow these steps to update information

* **Set the** `http` **method to** `PUT`
    
* In the **Enter request URL** field, enter the URL to send the request.
    
* In this scenario, because we want to update the first data with an **id of 1**, the URL will be: [localhost:8000/api/products/1](http://localhost:8000/api/products/1)
    
* Enter the request body. This is the data we want to send to the server to modify with an id of 1
    
    * Click on the "**Body**" tab
        
    * Click on the "**raw**" radio button, this will display a field to enter the required data
        
    * Click on the "**Text**" tab and select "**JSON**" from the dropdown menu
        
    * In the provided text area, enter the information to send.
        
    * In this example, we will modify the **name** of the first item in our array to the below:
        

```javascript
{
"name":"House"
}
```

Click on the **Send** button to initiate the request


![Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s01wta78zl0tnrt6bgu3.png)
## Defining the logic for deleting data from the server

We have covered how to **Create, Read and Update** data from our server.

Finally, let's examine how to delete data from our app.

The syntax for deleting data is as below

```javascript
app.delete(path, handler)
```

Deleting data follows a similar approach as posting data.

We specify the id of the item to delete and use the `filter()` method to filter out all the items with an **id key that does not match the specified id.**

Lastly, we return the response as `JSON` to the client

The code is below:

```javascript
// deleting the item
app.delete("/api/products/:id", (req, res) => {
  const { id } = req.params;

  const filteredProducts = products.filter(
    (product) => product.id !== Number(id)
  );
  return res.json({ success: true, data: filteredProducts });
});
```

## Deleting data from the server using Postman

Follow these steps to delete a resource from the server

* **Set the** `http` **method to** `DELETE`
    
* In the **Enter request URL** field, enter the URL to send the request.
    
* In this scenario, because we want to delete the first data with an **id of 1**, the URL will be: [localhost:8000/api/products/1](http://localhost:8000/api/products/1)
    
* Click on the **Send** button to initiate the request
    
* View the response in the Body. You will notice the item with an `id` of `1` has been excluded, and we now have three items
    

The screenshot is below


![delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vrc2y5t9plt8j0ilaw0.png)

Click [here ](https://github.com/emmanuelkumah/crud__app)for the complete code
## Summary

* **CRUD** is an acronym for (**Create, Read, Update, and Delete**). It represents the operations used in web apps that have an underlying database to **perform specific operations on the database from the front-end**
    
* At the backend, develops write logic on how to respond to requests based on the `HTTP` request method (`GET`, `POST`, etc) and the `URI` originating from the HTTP client
    
* [Postman](https://www.postman.com/) is a `REST` client that enables us to send requests, inspect responses and perform other `HTTP` methods (`GET`,`POST`, `PUT`, `PATCH`, `DELETE`, etc). It can be likened to a browser that doesn't render `HTML`.
    
    We used it to initiate requests to the Express app and ultimately perform the `CRUD` operations.
    

*<sup>This article is the day 8 post on the 30-day challenge I am undertaking to learn backend development. Please feel free, to drop some insights, comment, or share the post to your networks</sup>*