Frontend development is changing day by day and we have to learn a lot more stuff. When we start learning a new framework or library, the first thing that is recommended to build a todo list which helps in doing all CRUD functions. But there is no solid backend/library available to make use of it to build a todo list.
Simulate a backend server and a REST API with a simple JSON file.
To overcome that problem json-server came into the picture. With it, we can make a fake REST api. I have used it in my app and thought of sharing it to the frontend community.
JSON Server is an npm package that you can create a REST JSON webservice. All we need is a JSON file and that will be used as our backend REST.
Installing JSON Server
You can either install it locally for specific project or globally. I will go with locally.
$ npm install -D json-server
Above is a single line command to install the json server. -D Package will appear in your devDependencies. I am not going to explain about that much here. If you want to learn more about that go through the docs for npm install.
Check JSON Server version using
As per the standard convention, I am going to name the file
db.json, you can name it
as per your needs.
"todo": "Check Todo"
"todo": "New Todo"
For simplicity I have included two elements into the
Todos array. You can add more also.
Start the JSON Server
$ json-server --watch db.json
Your JSON Server will be running on port 3000.
These are REST clients that help us run http calls.
Moving onto the CRUD operations. This is how we can access our data using RESTful routes.
[POST] http://localhost:3000/Todos post params:!
[PUT] http://localhost:3000/Todos post params:!
Testing via POSTman
Now we can see that db.json file can make REST webservice. Also we can make custom URIs with a mapping file. I will cover those area in the next article continuation of this.
I hope this article will remove each and every Frontend developers pain (banging the head) for a backend server to test with. Further, you can checkout the code in my github repo and also refer official json-server docs for more operations
If you have any queries, let me know in comments.