How to use JSON Server with a React app?

Install JSON Server via npm, create a db.json file, and run it in parallel with your React dev server. You can then fetch data from localhost:3000 in your components. For static files, serve the build directory using the `-s` flag.

JSON Server vs Mirage JS: which is better for mocking APIs?

JSON Server is simpler and faster for REST APIs from a static file, ideal for quick prototyping. Mirage JS is more flexible for defining custom server behavior in the browser, better for complex mocking in tests. Choose based on your need for speed vs. customization.

How to simulate authentication in JSON Server?

JSON Server doesn't have built-in authentication. You can use middleware or a proxy to add mock auth headers, but it's limited. For realistic auth testing, consider tools like Mock Service Worker or setting up a custom backend with auth logic.

Can JSON Server handle file uploads?

No, JSON Server is designed for JSON data and static files. It doesn't support multipart/form-data for file uploads. You'd need to mock that separately using other tools or extend it with custom middleware.

How to persist data changes in JSON Server?

By default, changes are in-memory and lost on restart. To persist, you can write middleware to save the JSON file on write operations, or use file-watching tools, but it's not automated and requires extra setup.

Is JSON Server suitable for testing mobile apps?

Yes, it's excellent for testing mobile apps by serving the API on a local network. Ensure the server is accessible from the mobile device, and use it for prototyping and testing API calls without a live backend.

Open-Awesome

json-server

MITJavaScriptv1.0.0-beta.15

Get a full fake REST API with zero coding in less than 30 seconds by serving JSON files.

GitHub

75.6k stars7.3k forks0 contributors

What is json-server?

JSON Server is a development tool that creates a fake REST API from a JSON file. It allows frontend and mobile developers to simulate a backend server for prototyping, testing, and demoing applications without writing any server-side code. It provides realistic endpoints with full CRUD operations, relationships, and query capabilities.

Target Audience

Frontend developers, mobile developers, and QA engineers who need a quick, realistic backend for prototyping, testing UI components, or creating demos without a live server.

Value Proposition

Developers choose JSON Server for its incredible speed and simplicity—it creates a working API in under 30 seconds. It offers a more realistic and full-featured alternative to hard-coded mock data, with support for relationships, queries, and static file serving.

Overview

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Use Cases

Best For

Prototyping frontend applications before the real backend is ready
Testing UI components that require API data fetching
Creating demos or proof-of-concepts with a simulated backend
Teaching REST API concepts and frontend-backend interaction
Running integration tests without a live server
Mocking complex API responses with relationships and pagination

Not Ideal For

Production deployments requiring authentication, security, and scalability
Applications needing real-time features like WebSockets or server-sent events
Projects with complex server-side business logic beyond standard CRUD operations

Pros & Cons

Pros

Instant API Creation

Runs with a single command like `npx json-server db.json`, creating full CRUD endpoints without writing any server code, as shown in the README's usage example.

Rich Query Capabilities

Supports advanced filtering, sorting, pagination, and complex queries through URL parameters, such as `?views:gt=100` and `_where` for JSON-based conditions, detailed in the query params section.

Relationship Support

Handles relational data with embedding using `_embed`, allowing for nested resources like including comments with posts, demonstrated in the routes and query examples.

Static File Serving

Can serve static files from a public directory, making it easy to host frontend assets alongside the mock API, as mentioned in the static files section.

Cons

Beta Version Instability

The v1 documentation is labeled as beta with breaking changes, and the stable version is v0.17.4, indicating potential migration issues and instability for new users.

No Built-in Security

Lacks authentication and authorization features, which limits its use for testing secured endpoints in realistic scenarios, as it's designed purely for mocking.

Non-Persistent Storage

Data is stored in memory and changes are lost on server restart, requiring manual saving of the JSON file for persistence, a noted limitation for long-term testing.

Frequently Asked Questions

Related Projects

rxdb

A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/

Stars23,219

Forks1,163

Last commit9 days ago

Lowdb

Simple and fast JSON database

Stars22,548

Forks966

Last commit2 months ago

Lawnchair

A lightweight clientside JSON document store,

Stars2,126

Forks240

Last commit6 years ago

DuckRails

Development tool to mock API endpoints quickly and easily - NOT MAINTAINED

Stars1,710

Forks105

Last commit5 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub