JSON Server Setup with W3Schools

Introduction

In the world of web development, JSON (JavaScript Object Notation) has become a vital standard for data interchange. It’s lightweight, easy to read and write, and supported by most programming languages. For developers looking to create a quick API for testing or prototyping purposes, JSON Server offers an efficient way to handle data in a mock RESTful API format. In this tutorial, we will explore how to set up JSON Server using W3Schools as our reference point.

What is JSON Server?

JSON Server is a simple tool that allows you to set up a full fake REST API with zero coding, just in a few minutes. It is based on a JSON file that acts as a database and lets you perform CRUD operations (Create, Read, Update, Delete) to manipulate data as you would with a real server.

Installation

Before you can use JSON Server, you’ll need to install it. You can do this using either npm (Node Package Manager) or yarn (an alternative package manager). Below are the steps for both installation methods.

Using npm

To install JSON Server using npm, follow these steps:

npm install -g json-server

This command installs JSON Server globally on your machine, allowing you to use it from anywhere.

Using yarn

If you prefer to use yarn, run the following command:

yarn global add json-server

Similar to npm, this installs JSON Server globally, enabling you to access it easily.

Creating a JSON File

Once you have JSON Server installed, the next step is to create a JSON file to act as your database. Here’s how you can do it:

Create a file named db.json in your project directory and add some sample data to it:

{
  "posts": [
    { "id": 1, "title": "First Post", "author": "John Doe" },
    { "id": 2, "title": "Second Post", "author": "Jane Doe" }
  ],
  "comments": [
    { "id": 1, "body": "Great post!", "postId": 1 },
    { "id": 2, "body": "Thanks for sharing!", "postId": 2 }
  ]
}

Starting the JSON Server

To start the JSON Server, navigate to the directory where your db.json file is located and run the following command:

json-server --watch db.json

This command will start the JSON Server and watch your JSON file for changes. By default, the server runs on http://localhost:3000.

Accessing the API

Now that the server is running, you can access your API endpoints using the following URLs:

Resource	Endpoint
Posts	GET http://localhost:3000/posts
Comments	GET http://localhost:3000/comments

CRUD Operations

Now, let’s dive into performing CRUD operations on our JSON Server to effectively manage our data.

Creating Data

To create a new post, you can make a POST request to the `/posts` endpoint. Here’s how you might do it using Fetch API in JavaScript:

fetch('http://localhost:3000/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'New Post', author: 'John Smith' })
})
.then(response => response.json())
.then(data => console.log(data));

Reading Data

To fetch all posts, use a GET request:

fetch('http://localhost:3000/posts')
.then(response => response.json())
.then(data => console.log(data));

Updating Data

To update an existing post, use a PUT request:

fetch('http://localhost:3000/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'Updated Post', author: 'John Doe' })
})
.then(response => response.json())
.then(data => console.log(data));

Deleting Data

To delete a post, you can send a DELETE request:

fetch('http://localhost:3000/posts/1', {
  method: 'DELETE'
})
.then(() => console.log('Post deleted'));

Conclusion

Setting up JSON Server is a straightforward process that can significantly enhance your development workflow. By following the steps outlined in this article, you can quickly create a mock RESTful API and perform various operations to test your applications. JSON Server is especially useful for front-end developers who need a quick and reliable way to simulate server behavior without having to set up a back-end.

FAQ