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.
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
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
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"
}
}
Now once you run yarn run dev , the backend server should be up and running.
You may try hitting http://localhost:8000 and you will get an output similar to the one in the attached screenshot.
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.
- From the Vercel Dashboard, click Create a New Project and then Import your repository by providing the necessary permissions.
- On the Configure Project screen, leave everything default and click Deploy.
- Wait until deployment is done, and your own JSON server is ready to serve.
- 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.
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
- JSON Server Vercel: https://github.com/kitloong/json-server-vercel
Top comments (0)