Prototyping idea is a crucial part of building application. You can check if your product works and meet future clients requirements. It’s easy to handle, when you are in a big team, with many developers on board. But how to handle it, when you work solo? You have to resign from some value, just to bring MVP to your client. json-server is one of the solutions, which helps you and doesn’t push you off the course.

How json-server works?

General idea behind json-server is to run REST API in a minute; And this assumption is met in 100%. Right after installation, we can just run it, by pointing some .json file (our database) and that’s it. Values from this file are mapped to endpoints and, starting from now, we can make a requests with different methods. GET, POST, PATCH, PUT, DELETE - all of them work and return or modify our data as we expect from REST API.

In addition, we can join some “tables” and get eg. blog post with its comments. All such operations has to be defined as a query parameters, like _embed or _expand depending on what and how we want to combine data.

json-server offers us also full-text search, filtering and changing order of records; Everything we need to have at the beginning of our work with application.

All data in JSON file?!

Yes. Our data are stored in .json file, they are unsecured and widely open. But my question is: Do we really need something else to proof our concept? Let’s remember our core assumption: we want to deliver working application to the very first client or tester. Keep it in mind: we don’t want to run json-server on production! We just want to check if such model will work and will be useful for other people.

When I started working on Archipanel (🇵🇱), I started from setting up json-server. I prepared all key UI pages, added data layer to my application and I worked all the time on real data from REST API, powered by this library. This is how my wife could start working with her first projects on mock-database. It was pet-project at the beginning, but now it evolved into something bigger, used by many clients… on regular database, of course!

Pimp my server

Worth to mention is that json-server is not only a simple database with REST API. We can easily extend its capabilities to simple authentication or uploading. Under the hood, json-server is a node application, based on express. And as we can put some middlewares to express, the same we can do here, by overloading starting script. Below you can find an example, how I handled uploading documents on one of my endpoints:

const jsonServer = require("json-server");
const path = require("path");
const multer = require("multer");
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path.join(__dirname, "static/uploads"));
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "-" + Date.now());
  },
});

const upload = multer({ storage });
const server = jsonServer.create();
const router = jsonServer.router(path.join(__dirname, "db.json"));
const middlewares = jsonServer.defaults({ static: "./static" });

server.use(middlewares);

server.post("/file", upload.single("file"), function (req, res) {
  res.json({ filename: `/uploads/${req.file.filename}` });
});

server.use(router);
server.listen(3004, () => {
  console.log("json-server is running");
});

We set up json-server by our own, but we also put as a middleware multer - library which handles getting files from requests and saving them into defined storage. The same we can do with almost any node.js library. We have to only consider if we really need them in PoC.

Migration after validation

When project grows and the idea is validated, we have to finally decide to move from json-server. Sometimes it’s just a matter of designing the same endpoints, but built on more stable and secure solutions (like express with some serious database). In many cases it’s sufficient. But you have to be aware that some endpoints need to be refactored, maybe deleted and these require some changes on UI too. It’s normal process of developing with json-server and you have to be prepared for this. In such case, it’s great to have some response validation system applied on the frontend side. The library I recommend is io-ts - and this is what I will write about next time!

Summary

json-server is fast solution to set up and run your project with REST API. You don’t have to think about data layer at the beginning your journey. But… is this a correct way of developing app? Not really. If you work in a team of specialists from different areas of programming, then you would probably start from conducting event storming, preparing UI/UX wireframes, focusing on the domain, designing the whole application from Backend side and preparing UI simultaneously. Yes. We do this every day. This is why in the title of this article I used “solitude”. When you develop pet project, you want to focus on what you like to do - API could not be a part of it. You want to deliver something! json-server sounds like a reasonable solution at the beginning in such situation.