How to Install JSON-Server via NPM

Understanding Developer Challenges

The biggest challenge frontend and mobile developers face is is the lack of a simple and reliable backend for testing and prototyping purposes. You may find yourself waiting for backend APIs to be developed and deployed, which can delay your progress significantly. This is where JSON-Server becomes a game changer.

JSON-Server provides a solution to this issue by enabling you to quickly create a full fake REST API with minimal effort. It allows you to mock data, test different features, and continue frontend development without waiting on backend dependencies. With JSON-Server, developers can mock up data, test different scenarios, and work on frontend development simultaneously, without being hindered by backend dependencies.

Prerequisites

Before diving into the installation of JSON-Server, it’s essential to set up the foundational elements: Node.js and npm (Node Package Manager).

Installing Node.js and npm

1. Visit Node.js Official Website: Go to Node.js’s installation instructions.
2. Download the Installer: Choose the latest version for your operating system.
3. Run the Installer: Upon following the installation, ensure that the npm is selected for installation alongside Node.js.
4. Verify Installation: Open your terminal or command prompt and type node -v and npm -v. If both commands return version numbers, the installation was successful.

Installing JSON-Server

With Node.js and npm ready, you can proceed to install JSON-Server.

Installation Steps

1. Open Terminal or Command Prompt: This will be used for inputting installation commands.
2. Install JSON-Server Globally: Execute the command npm install -g json-server. A global installation allows for easy access from any project directory.

Configuration and Usage

Setting up and starting your mock API with JSON-Server involves creating a JSON file and running the server.

Creating a JSON File

Create a db.json File: This file serves as a mock database.

Input JSON Data: Structure your mock data as required. Here are multiple examples to illustrate various scenarios:

{
  "posts": [
    { "id": 1, "title": "Exploring JSON-Server", "author": "Jane Doe" },
    { "id": 2, "title": "Advanced Mock APIs", "author": "John Smith" }
  ],
  "comments": [
    { "id": 1, "body": "Great article!", "postId": 1 },
    { "id": 2, "body": "Very informative.", "postId": 2 }
  ],
  "users": [
    { "id": 1, "name": "Alice", "occupation": "Developer" },
    { "id": 2, "name": "Bob", "occupation": "Designer" }
  ]
}

Starting the JSON-Server

1. Navigate to Your JSON File Directory: Where your db.json is saved.
2. Launch JSON-Server: Run the command json-server —watch db.json.
3. Access Your Server: The server typically starts at http://localhost:3000/.
4. Access your mock endpoints like http://localhost:3000/posts or http://localhost:3000/users from here.

Introducing Beeceptor

Following this introduction to JSON-Server, it’s worth noting how Beeceptor complements this ecosystem. Beeceptor is a tool designed to further streamline this with it’s easy to setup mock server. You can upload the JSON and the REST APIs and mock server is available instantly. With Beeceptor, you can create endpoints, inspect HTTP requests, and even simulate various API responses without writing any code.

Beeceptor is especially useful for scenarios where you need more control and flexibility than what JSON-Server offers. E.g.

1. No need to download, install or run package. Beeceptor is a hosted solution.
2. You can use templated responses to generate fake data.
3. You can upload binary files and simulate binary response in Rest APIs. This is not possible with JSON-server as it’s limited to JSON serialization only.
4. In case you have OpenAPI spec, upload it to Beeceptor and get all the API definitions as mock endpoint.

[Top]