Using json-server for quick databases

This time, I would like to introduce a very handy npm package for creating & using a simple JSON database called json-server. For the official documentation from the developer, you can check this site out.

---

To start off, let's install the package, first! Just like any other npm packages, you can simply install it using npm.

npm install -g json-server

Once you have the package installed, the next step is creating a json file with the name db.json with some data in it.

{
   "address": [
      "name": "Jacob Hunsaker",
      "address": "Somewhere in United States",
      "phone_num": "123-456-7890",
      "email": "[e-mail]",
      "id": 1
   ],
}

Once you have everything set up, you can now actually use json-server. You can start json-server by going to the directory that has db.json and typing the following in the console.

json-server --watch db.json

Now if you go to http://localhost:3000/address/1, you'll get the following in JSON.

"name": "Jacob Hunsaker",
"address": "Somewhere in United States",
"phone_num": "123-456-7890",
"email": "[e-mail]",
"id": 1

Now in your front-end (Vue.js & axios in my case), you'll just need to GET/POST/PUT/PATCH/DELETE the data into http://localhost:3000/address. Since we're using json, we'll also have to add the headers to your PUT/PATCH request.

const response = await fetch(
               `http://localhost:3000/address/${id}`,
               {
                  method: "PATCH",
                  body: JSON.stringify(updatedContact),
                  headers: {
                     "Content-type": "application/json; charset=UTF-8",
                  },
               }
            );

For a sample page, please check this simple Github repository using Vue.js.

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github