Mock your database from a JSON file to REST API

If you’re building UI’s or working on front-end development you might have stumbled accross this scenario: I would like to access this data for my component, the only problem is that the backed is still not ready.

Well, maybe there is a way to mock the data you need without hardcoding the expected values on your component in order to get a head start and test the capability to handle data from a remote request. Come with me.

Table of contents

1. The secret
   1. Installing the package
   2. Creating our JSON file
   3. Serving the “database”
   4. Documentation and help
2. Final considerations

Glossary

• UI: User Interface
• JSON: JavaScript Object Notation
• REST: Representation State Transfer
• API: Application Programming Interface
• URL: Uniform Resource Locator

The secret

For this guide we will be using npm, feel free to try it out with your favorite node dependency management tool.

The json-server npm package is a library that help you creating a REST application server from a JSON file and here is how.

Installing the package

First make sure to install the package globally so it is accessible from the command line by running:

npm i json-server -g

This command will install the json-server npm package globally.

If installing as a dependency to the project make sure to invoke it from the correct node_modules folder.

Creating our JSON file

JSON is a data-interchange format and it consists of a valid JavaScript object.

In the directory of your choice create a db.json file and add the following content to it:

{
    "users": [
        { "id": 1, "name": "First User" }
    ],
    "posts": [
        { "id": 1, "userId": 1, "title": "Post title", "content": "Post content" }
    ]
}

Serving the “database”

For serving this file as a REST API run the following from the command line:

json-server --watch db.json

You should see a confirmation that the file is being served. By default the REST facility will be provided on your localhost port 3000. There will be a list of resources based on the properties present in the db.json file you created.

Now, all you need to do is create in the db.json file the structure you need your front-end application to consume. It really is easy and simple like that.

If you need to serve a remote file, consider hosting the JSON database file on Github and using my-json-server.

If you want to not only serve a local database but also make it accessible from a public URL check out this blog post where I guide you on connecting your local development environment to a public URL so your application is accessible accross the internet.

If you need to also mock user authentication, check out json-server-auth middleware for json-server.

Documentation and help

If you need any advanced configuration such as changing the port to match the port ngrok is running in your local you can run json-server help from the command line or check out their documentation.

Final considerations

Although mocking is a code smell, it might helpful to have some fake API while prototyping user interfaces. Hope this guide was helpful. If you enjoyed it make sure you share with your peers and/or leave a comment down below.

See ya! 👋