DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Set Up & Deploy Fake REST API Server Using JSON Server?
Eshank Vaish
Eshank Vaish

Posted on • Originally published at javascript.plainenglish.io

How to Set Up & Deploy Fake REST API Server Using JSON Server?

If you have ever worked on integrating any frontend application with the under-development backend APIs, you must be aware of the various issues faced while integrating the APIs. It can be either the API not being ready for the frontend app to consume or a number of bugs with the endpoints that end up blocking your whole frontend team on their work.

In this article, I’m going to cover how to set up a Fake REST API server using the popular npm library json-server and deploying to Vercel.

1. Initialize the Repository

You would be required to create a new directory and execute the yarn init command to initialize a Node.js project. You would be required to answer a set of questions, post which your project would be initialized.

Initialize a Node.js project

2. Install JSON Server

To setup json-server, let’s install the package to our project using the command mentioned below:

yarn add json-server
Enter fullscreen mode Exit fullscreen mode

3. Add Database File

Once the package is installed, you would be required to create a JSON file that would be used for storing the contents of the database. Let’s create a db.json file and add the following sample data to it:

touch db.json
Enter fullscreen mode Exit fullscreen mode

4. Use the Project as a Module

Since we need to add support for deployment as well, we would use the project as a module along with Express. Since we are using the db.json file for maintaining the database, it can’t be updated directly in the deployed environment due to permission issues. So we have modified the setup such that if the node environment is production, the requests won’t be making any updates to the database file. You need to create a server.js file with the following contents:

We can customize the same file if we want to add any authentication, validation, or any other behavior to our server.

5. Start the Server

To start the server, you would be required to add the start script to the package.json file such that the content of the file would be something similar to:

{
  "name": "template-json-server",
  "version": "1.0.0",
  "description": "Template for creating a backend using JSON Server",
  "main": "server.js",
  "license": "MIT",
  "scripts": {
    "dev": "NODE_ENV=development node server.js",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "clone": "^2.1.2",
    "json-server": "^0.17.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now once you run yarn run dev , the backend server should be up and running.

JSON Server Running

You may try hitting http://localhost:8000 and you will get an output similar to the one in the attached screenshot.

JSON Server Landing Page

Feel free to play around with the configuration to customize the setup as per your needs.

6. Add the Vercel Configuration

In order to get the routing in place post-deployment, you would need to add a vercel.json file with the contents added below. You can skip this step if you intend to use the server in local environments only.

7. Deployment to Vercel

Now that you set up the JSON server, we can move on to the deployment part.

  • Sign Up or login into Vercel.

Vercel Login Page

  • From the Vercel Dashboard, click Create a New Project and then Import your repository by providing the necessary permissions.

Create a New Project

Import Project

  • On the Configure Project screen, leave everything default and click Deploy.

Vercel Configuration Page

  • Wait until deployment is done, and your own JSON server is ready to serve.

Deployment Successful

  • Vercel supports automatic deployment when a new commit is pushed to the project’s default branch. So you need not worry about deployment when new changes are added.

JSON Server on Deployed Instance

Conclusion

You have your Fake REST API server up and running using json-server it being deployed to Vercel. You can configure the API Base URL in your frontend app to point to json-server and update the database file as per your requirements as per their documentation.

As always, here is the link to the complete code on Github

Thanks for reading. Do let me know your thoughts on setting up JSON Server for Fake Rest APIs. If you found this article useful, please do consider following me on Dev!

Want to connect? Reach out on Twitter, LinkedIn or in the comments below!

References

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.