How to Mock a Backend API with the Json-Server Fake API Service

Get Started with JsonServer.io

JsonServer.io Backend API Mock - Head

First of All, the Way it Works

No installation. No configuration. No waste of time. We already provide all the service you need to mock your backend API.
The only thing you have to do is to define the resources you want to receive.

How to fake backend API with jsonserver.io

1IRST. Create a Server

Create Fake API Server
  1. I

    Very Basic

    Visit the "Servers" page which you can see on the left menu at app.jsonserver.io and click on the "Create Server" button.

  2. II

    Just a name

    Name the server as you need, that's it. You have created your first Fake API Server. You can see your server in the server listing.

2ECOND. Security Token

Create Fake API Server
  1. i

    Display API Token

    At the server list page, you can display the API token for each of your server separately.

  2. !

    Copy & Paste

    You have to send this API token with each request as header parameter name "X-Jsio-Token". So copy the token and paste into your application api client configuration.

3HIRD. Saved Resource or Dynamic instead?

Create Fake API Server
  1. Icon For SD-card

    Saved Resources

    This kind of resources are defined and saved online at jsonserver.io. You can create, edit and manage all your saved resources online and request them from your application like a real API.

  2. Icon For Settings

    Dynamic Resources

    For your special needs, we're also able to deliver your fake resources without any saved resources. Just send a POST request to api.jsonserver.io with the resource schema as request body and you will get the response you want.

If you decide to use saved resource (recommended by us) then you can start to create and define your resources with the build-in code editor. Otherwise, you can start immediately with dynamic request to retrieve your fake data.

FINALLY. Request your Fake Json-Server API

Axios Fetch
Saved Resource
Dynamic Resource 

axios.defaults.baseURL = 'https://api.jsonsever.io'
axios.defaults.headers.common['X-Jsio-Token'] = JSIO_TOKEN;

// The resource "/products/*/details" has been created via
// the saved resources feature on app.jsonserver.io

axios.get(`/products/${id}/details`).then(res => {
    let productDetails = res.data
})


axios.defaults.baseURL = 'https://api.jsonsever.io'
axios.defaults.headers.common['X-Jsio-Token'] = JSIO_TOKEN;

let schema = {
    "spawn(20)": {
        "name": "product.name",
        "brand": "product.brand"
    }
}

// The requested API will generate your fake resource
// by the schema above and return 20 products

axios.post('/', schema).then(res => {
    let sdsd = res.data
})

const url = `https://api.jsonserver.io/products/${id}/details`

// The resource "/products/*/details" has been created via
// the saved resources feature on app.jsonserver.io

const response = await fetch(url, {
  method: 'GET',
  mode: 'cors',
  headers: {
    'X-Jsio-Token': 'your-api-token-here'
  }
});

const data = response.json();

const response = await fetch('https://api.jsonserver.io', {
  method: 'POST',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
    'X-Jsio-Token': 'your-api-token-here'
  },
  body: JSON.stringify({
    "spawn(20)": {
        "name": "product.name",
        "brand": "product.brand"
    }
  })
});

const data = response.json();