Often you may be building a demo website, or practice project and you need some data for it. As an example, say you're building a demo fashion website and you need data to represent the items for sale. What would you do?
- You could use an existing API, but what if there is nothing suitable available?
- You could also hardcode the data, but then you'll need to change your code later if you do decide to connect an API. You might want also want to practice/demonstrate that you know how to call an API endpoint.
With JSON Server, you can create a fake API that runs locally (perfect for development or if you just need it to present a demo!) and works just like any other API!
To begin with, install JSON Server
npm install -g json-server
To act as your "database", you'll need to create a file called db.json (I usually put this in the root of my project). In here, you will create a JSON object with a key that will act as your API endpoint. Let's say I'm creating a website that sells bags. I'm just going to add 3 items here:
{
"bags": [
{
"id": 1,
"title": "Stylish Bag",
"color": "orange",
"imgurl": "https://images.unsplash.com/photo-1584917865442-de89df76afd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
"stock": 10
},
{
"id": 2,
"title": "Cool Bag",
"color": "black",
"imgurl": "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80",
"stock": 5
},
{
"id": 3,
"title": "Interesting Bag",
"color": "blue",
"imgurl": "https://images.unsplash.com/photo-1594223274512-ad4803739b7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1057&q=80",
"stock": 17
}
]
}
Once you've created your data, use the following command in the terminal:
json-server --watch db.json
Cool! You can now access your API via localhost:3000/bags!
This now behaves like any other REST API. For example, if you wanted to use this in a React app, you can call your "bags" endpoint and get the data. Here is just one example of doing that:
useEffect(() => {
axios
.get("http://localhost:3000/bags")
.then((res) => {
setData(res.data);
})
.catch((error) => {
console.log(error);
});
}, []);
Tips
Changing the port
If you don't want json-server to run on port 3000 (maybe you have your frontend running there), you can change the port like this:
json-server --watch -p 4000 db.json
Multiple Endpoints
You can have multiple endpoints! Simply add another key to your object. Here I have added "wallets":
{
"bags": [
{
"id": 1,
"title": "Stylish Bag",
"color": "orange",
"imgurl": "https://images.unsplash.com/photo-1584917865442-de89df76afd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
"stock": 10
},
{
"id": 2,
"title": "Cool Bag",
"color": "black",
"imgurl": "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80",
"stock": 5
},
{
"id": 3,
"title": "Interesting Bag",
"color": "blue",
"imgurl": "https://images.unsplash.com/photo-1594223274512-ad4803739b7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1057&q=80",
"stock": 17
}
],
"wallets": [
{
"id": 1,
"title": "Leather Wallet",
"color": "black",
"imgurl": "https://images.unsplash.com/photo-1612023395494-1c4050b68647?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80",
"stock": 10
}
]
}
Now if you run
json-server --watch db.json
again, you can access either the bags or the wallets endpoint:
Make sure to check the json-server docs to see what else you can do, and I hope you find this helpful for your projects!
Top comments (15)
There is a way to create a fake JWT to prototype the authentication?
Yes, it's an express server. You can add custom routes like any express server to generate a valid JWT for the connecting user. And add a JWT validation middleware to protect the other endpoints.
I'm pretty sure there will be but I haven't done that myself. It's something to investigate for sure!
Nice article, #Back project may help you to setup api with JWT. #Back automatically convert app database table to API endpoint, please try at
github.com/WeAreKins/BackNode/rele...
Hi, nice article. Few weeks ago I discovered DevApiService, itโs a free online tool for mockup APIs or fake APIs. Itโs very easy to use and you can mockup API in less than one minute.
Ah, very useful. I've been using
http-server
to do something similar, but this is a better fit for my needs. Thanks!This is awesome. I'll definitely try this on my upcoming project.
This is very useful. I could use a fake Api and server to a demo.
Get to know the moclojer project?
github.com/moclojer/moclojer
Is json server suitable for production environment?
no, just for practice/demo purposes
No. It's used to mock APIs. Don't use this on production
Good tutorial! I was using JSON Server a lot until I became confident using NodeJS.
Try this github.com/avin/fake-api-middleware
Thanks for this short and useful application. I dont get the page localhost:3000/ shows... Did it come with json server?