Create a REST API with JSON Server and Axios

JSON Server and Axios can be used together to create and interact with a mock RESTful API, allowing developers to test CRUD operations without building a separate backend.

• JSON Server: Creates mock API endpoints from a JSON file to perform CRUD operations.
• Axios: Sends HTTP requests such as GET, POST, PUT, and DELETE to interact with the API.
• Backend Testing: Helps test API requests, responses, and data updates during frontend development.

Set Up the Project

1. Initialize the project and install dependencies

Run the following commands:

npm init -y
npm install json-server@0.17.4 axios

2. Create the data file

Create a users.json file containing sample user records:

{
  "users": [
    {
      "id": "1",
      "first_name": "Alen",
      "last_name": "Ryan",
      "email": "alen@example.com"
    },
    {
      "id": "2",
      "first_name": "Mark",
      "last_name": "Den",
      "email": "mark@example.com"
    },
    {
      "id": "3",
      "first_name": "Lucas",
      "last_name": "Sin",
      "email": "lucas@example.com"
    }
  ]
}

3. Start JSON Server

Run the following command:

npm install axios

The API is available at http://localhost:3000. The /users endpoint supports CRUD operations, and changes made through supported write requests are saved to the JSON file.

Perform CRUD Operations Using Axios

Create a separate JavaScript file for each operation. Each example uses the same API and sample data.

1. Retrieve All Users Using GET

A GET request retrieves all user records from the /users endpoint.

Create get_request.js:

const axios = require("axios");

axios.get("http://localhost:3000/users")
    .then(response => {
        response.data.forEach(user => {
            console.log(
                `${user.first_name} ${user.last_name}, ${user.email}`
            );
        });
    })
    .catch(error => {
        console.error("Error retrieving users:", error.message);
    });

Run the file:

node get_request.js

Output:

Alen Ryan, alen@example.com
Mark Den, mark@example.com
Lucas Sin, lucas@example.com

2. Create a User Using POST

A POST request adds a new user to the collection. JSON Server generates an ID when one is not provided.

Create post_request.js:

const axios = require("axios");

axios.post("http://localhost:3000/users", {
    first_name: "Ryan",
    last_name: "Sin",
    email: "ryan@example.com"
})
    .then(response => {
        console.log("Created user:", response.data);
    })
    .catch(error => {
        console.error("Error creating user:", error.message);
    });

Run the file:

node post_request.js

Output:

{
  "first_name": "Ryan",
  "last_name": "Sin",
  "email": "ryan@example.com",
  "id": "4"
}

The generated ID is illustrative; the actual value depends on the existing data.

3. Update a User Using PUT

A PUT request replaces the existing resource. Include every field you want to retain in the updated record.

Create put_request.js:

const axios = require("axios");

axios.put("http://localhost:3000/users/2", {
    first_name: "Alen",
    last_name: "Vin",
    email: "alen@example.com"
})
    .then(response => {
        console.log("Updated user:", response.data);
    })
    .catch(error => {
        console.error("Error updating user:", error.message);
    });

Run the file:

node put_request.js

Output:

{
  "first_name": "Alen",
  "last_name": "Vin",
  "email": "alen@example.com",
  "id": "2"
}

The user's name and email are updated, while the ID remains unchanged.

4. Delete a User Using DELETE

A DELETE request removes the specified user from the collection.

Create delete_request.js:

const axios = require("axios");

axios.delete("http://localhost:3000/users/3")
    .then(response => {
        console.log("User deleted successfully.");
        console.log("HTTP status:", response.status);
    })
    .catch(error => {
        console.error("Error deleting user:", error.message);
    });

Run the file:

node delete_request.js

Output:

User deleted successfully.
HTTP status: 200

After a successful deletion, the user with ID 3 is no longer available at /users/3.

Verify the API Changes

You can verify the results by sending a GET request to http://localhost:3000/users in your browser or API client.

• The POST request adds a user.
• The PUT request replaces the specified user's data.
• The DELETE request removes the specified user.

Note: These examples use a local mock API for development and testing. JSON Server does not provide production-grade authentication, authorization, or business-rule validation by default.