json-server Tutorial: Fake REST API in 30 Seconds (No Code)

37 views 0 likes 0 comments 15 minutesOriginalDevelopment Tools

Build a fake REST API in 30 seconds with this json-server tutorial—no backend coding needed. As a top mock API server with 74.8k+ GitHub stars, it lets 2025 frontend teams prototype rapidly without waiting for real APIs. Accelerate your workflow with this code-free REST API solution.

#json-server tutorial # json-server REST API # fake REST API # mock API server # create mock API JavaScript # JSON server setup # Node.js mock API # rapid API prototyping # frontend mock server # REST API without code # json-server usage
json-server Tutorial: Fake REST API in 30 Seconds (No Code)

json-server Tutorial: Create a Fake REST API in 30 Seconds Without Writing Code

In modern web development, frontend teams often face delays waiting for backend APIs to be ready. This is where json-server shines—a powerful tool that lets you create a fake REST API in minutes, no backend coding required. As of 2025, this popular mock API server has earned over 74,800 GitHub stars, making it a trusted solution for developers worldwide looking to accelerate their workflow with rapid API prototyping.

What is json-server?

Developed by typicode, json-server is an open-source Node.js tool that transforms a simple JSON file into a full-featured REST API. Since its creation in 2013, it has evolved to become the go-to solution for developers needing a quick backend simulation. The magic lies in its simplicity: with just a JSON file and a single command, you get a complete API with standard REST endpoints, filtering, pagination, and more—perfect for frontend mock server needs.

Why Choose json-server for Your Mock API Server?

Compared to other API mocking solutions, json-server offers unique advantages:

  • No backend expertise required: Create a functional API without writing a single line of server code
  • Blazing fast setup: Get your API running in under 30 seconds
  • Full REST compliance: Supports GET, POST, PUT, PATCH, and DELETE requests
  • Rich query capabilities: Includes filtering, sorting, pagination, and nested resource retrieval
  • Persistent data: Changes made via API calls are saved back to your JSON file
  • Static file serving: Host your frontend files alongside your mock API

For developers who've struggled with complex mocking frameworks or waited for backend teams, json-server delivers immediate productivity gains.

json-server Setup: Step-by-Step Guide

Getting started with json-server is straightforward, even if you're new to Node.js. Here's how to set up your first JSON server:

Prerequisites

  • Node.js installed (v14 or later recommended)
  • Basic understanding of REST APIs

Installation

Open your terminal and install json-server globally (or use npx for temporary use):

bash 复制代码
npm install -g json-server
## Or use npx without global installation
## npx json-server db.json

Create Your Database File

Create a db.json file in your project root with your mock data structure. For example:

json 复制代码
{
  "posts": [
    { "id": "1", "title": "Getting Started with json-server", "author": "John Doe", "views": 350 },
    { "id": "2", "title": "Rapid API Prototyping Best Practices", "author": "Jane Smith", "views": 280 }
  ],
  "comments": [
    { "id": "1", "text": "Great tutorial!", "postId": "1", "author": "Alice" },
    { "id": "2", "text": "Thanks for sharing!", "postId": "1", "author": "Bob" }
  ],
  "users": [
    { "id": "1", "name": "John Doe", "email": "john@example.com" }
  ]
}

Start Your Mock API Server

Run the json-server command pointing to your database file:

bash 复制代码
json-server db.json

You should see output indicating your server is running, typically on http://localhost:3000.

Test Your API

Open your browser or use tools like curl, Postman, or Thunder Client to test your new API:

bash 复制代码
## Get all posts
curl http://localhost:3000/posts

## Get a specific post
curl http://localhost:3000/posts/1

Congratulations! You've just created a fully functional REST API without writing any backend code.

Key Features of json-server REST API

json-server provides a surprisingly rich set of features that mimic real-world APIs:

Complete REST Endpoints

Automatically generates standard REST routes for each resource in your JSON file:

  • GET /posts - List all posts
  • GET /posts/:id - Get a specific post
  • POST /posts - Create a new post
  • PUT /posts/:id - Replace a post
  • PATCH /posts/:id - Update a post partially
  • DELETE /posts/:id - Delete a post

Advanced Query Parameters

Filter, sort, and paginate your data with intuitive query parameters:

bash 复制代码
## Filter posts with more than 300 views
GET /posts?views_gt=300

## Sort posts by author (ascending) and views (descending)
GET /posts?_sort=author,-views

## Pagination (page 1 with 10 items per page)
GET /posts?_page=1&_per_page=10

Relationship Handling

Easily include related resources using the _embed parameter:

bash 复制代码
## Get a post with its comments
GET /posts/1?_embed=comments

## Get a comment with its associated post
GET /comments/1?_embed=post

Static File Serving

Host your frontend application alongside your mock API by creating a public directory. json-server will automatically serve static files from this folder, making it easy to develop full-stack applications without separate servers.

json-server Usage Scenarios

json-server excels in several development scenarios:

Frontend Development Without Backend

Develop and test your React, Vue, Angular, or Astro frontend while the backend API is still in development. json-server provides realistic data responses to keep your frontend development on track.

API Prototyping and Demonstrations

Quickly prototype API designs to validate with stakeholders. Modify your db.json file to test different data structures and endpoints before implementing them in production.

Automated Testing

Use json-server as a test double for your real API during automated testing. Its fast setup and predictable responses make it ideal for integration and end-to-end testing.

Educational Purposes

Teach REST API concepts without requiring students to set up complex backend environments. Focus on API consumption while json-server handles the server implementation.

Important Notes for json-server v1 (2025 Update)

The current beta version (v1) of json-server includes important changes from the stable v0.17 release:

  • IDs are now always string values and automatically generated if missing
  • Pagination uses _per_page with _page instead of _limit
  • Request delay simulation is handled through browser dev tools (Network tab throttling) instead of the --delay CLI option
  • JSON5 format support for more flexible database files (supports comments and trailing commas)

For production-critical workflows, consider using the stable version while the beta matures.

Conclusion: Transform Your Development Workflow with json-server

json-server has revolutionized how developers approach frontend development and API prototyping. By enabling you to create mock API with JavaScript (or rather, without writing any JavaScript at all), it eliminates waiting for backend teams and lets you focus on building great user experiences.

Whether you're a seasoned developer looking to speed up prototyping or a beginner learning about APIs, json-server offers an unmatched combination of simplicity and functionality. Its active community and ongoing development (as evidenced by the 2025 beta release) ensure it will remain a staple tool for years to come.

Ready to streamline your development process? Follow this json-server tutorial today and experience the power of rapid API development without the hassle of backend coding. Your frontend team will thank you.

Have you used json-server for a project? Share your experience with json-server usage in the comments below!

Last Updated:2025-09-04 09:44:19

Comments (0)

Post Comment

Loading...
0/500
Loading comments...