> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# How to use json-server as a backend for your practice apps
- URL: https://reactpractice.dev/articles/how-to-use-json-server-as-a-backend-for-your-practice-apps/
- Published: 2024-05-31T09:49:37.000Z
- Updated: 2026-06-01T01:59:20.000Z
- Author: Corina Udrescu
- Tags: Articles, #corina-2, #Import 2026-06-09 12:07

Building a custom backend for your apps can be fun and is definitely something I recommend doing at some point. But when you're in the middle of learning React and you just want to practice frontend concepts, it's great if you *don't have to* code a backend from scratch.

This is where `[json-server](https://www.npmjs.com/package/json-server?ref=reactpractice.dev)` comes in - it's a simple backend server that allows you to have a **full REST API based on just a JSON file you define locally**. You can add, edit, remove items from the json collection, and the file gets updated, acting like a local database.

Here's an example "database" for a notes app:

```
// db.json
{
    "notes": [
        {
            "id": 1,
            "title": "jane's phone number",
            "content": "555 666 777"
        },
        {
            "id": 2,
            "title": "shopping list",
            "content": "- milk\n-strawberries"
        }
    ]
}

```

When you start the `json-sever` with by calling `json-server db.json`, it will start a server at `http://localhost:3000` with a **REST endpoint dedicated to the notes**, for doing CRUD operations on them:

```
GET    /notes 
GET    /notes/:id
POST   /notes 
PUT    /notes/:id
PATCH  /notes/:id
DELETE /notes/:id

```

This is usually all you need to get started with your frontend app!

For development, I usually recommend **adding the command to start the server to your `package.json`**, so you can run it with a simple `npm run backend-server`:

```
// package.json
...
"scripts": {
    "dev": "vite",
    "test": "vitest",
    ...
    "backend-server": "json-server db.json"
  },
...

```

And what if you want to simulate a **server error**?  
The simplest way is to just stop the server with `Ctrl+C` \- then the frontend will get a `500 Server Unavailable` error.  
Another way is to use Chrome's `Network tab > throtling` to simulate being offline.

Alternatively, if you're looking to throw validation errors, you could [set up an express sever that uses json-server as a module](https://github.com/typicode/json-server/tree/v0?tab=readme-ov-file&ref=reactpractice.dev#module), but it's probably not worth the trouble for most practice apps.

I hope you find this useful!