Frontend developers like myself often get bullied by backenders when working in a team.
I’m sure that there’s never a time when backenders wait for frontend developers to get work done, but the reverse is usually the case for frontend developers.
This was exactly why I started to learn Express & Nest.js to write server-side logic on my own.
From my experience, it sounds a bit silly, but definitely a wise thing to do as it makes you become more valuable.
Uh… Okay, maybe you do not have the time to learn to be a backender only because of that.
There is a much simpler way to create and mock an endpoint without writing any server-side logic.
And.. that’s exactly what I’m going to be talking about in the rest of this article.
You should have worked with a JSON file in the past.
(I like to pronounce it as JSON; other of my friends say that it’s Jay-Sawn. I’m unsure, but please leave the correct pronunciation in the comments).
Well, if you do not know what it is, it’s basically a file that has a .json extension, and inside the file, you create objects or even an array of objects with data inside the objects.
Introducing JSON-SERVER
JSON-SERVER is an npm package that was built specificly for this this effect. it is light weight and has over 300k weekly downloads.
The stats that i just provided are (in the time of writing this, this might grow even more in the future.)
It has a lot of built in functionalities (e.g making get, post, update, and delete request), and even sorting based on a search query.
How to use
You can get started with using json-server in 3 simple steps.
- Install the package from a terminal using your favorite package manager.
Personally, i do not use npm, but it’s pretty popular. we’d be using npm, so that it’s just very easy to understand by everyone!
npm install json-server
2. After that, you can create a json file that you want to transform into a server. as we’ve discussed previously, it should be an object with data inside of it (the data structre would most likely be in your preferred format, but if you work in a team, then you should create one based on the database schema).
Let’s assume you’re working on an e-commerce project, and you were tasked to develop the product catalog feature, this should be the structure for the object in the json file.
{
"products": [
{
"id": 1,
"name": "Product A",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"price": 19.99,
"category": "Electronics",
"image": "https://example.com/product-a.jpg"
},
{
"id": 2,
"name": "Product B",
"description": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"price": 29.99,
"category": "Clothing",
"image": "https://example.com/product-b.jpg"
},
{
"id": 3,
"name": "Product C",
"description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"price": 39.99,
"category": "Home & Kitchen",
"image": "https://example.com/product-c.jpg"
}
]
}
Now, you can create a simple script to transform the json file to a server using the json-server package:
"server": "json-server -- watch path/to/your/json-file -- port your_favoite_port
you should replace the placeholders that i provided with the real values.
🎉 And voila, your server would be running on localhost with the specified port.
So.. let’s assume we specify the port to be 8080, our server would be running on http://localhost:8080 , this would then be the homepage for the server that provides a link to all the keys in the object.
(more about this in the next step).
3. The json-object is made up of a key:value pair. that means that you can add other objects asides the one you already have inside of the json-file.
To get the data for a specific key, you need to append the key to the end the url that the server is running on.
Wait.. does that sound confusing? here’s what i mean.
Since we decided to set our key to “Products”, we can access the data avaliable for the Products at https://localhost:8080/products.
Otherwise, it should show you the homepage from which you can click on each of the keys to see the data avalilable for it.
If you made it up to this point, then congratulations 👏
You’re in the top 5% of Frontend developers may never have to wait for a backend developer to create endpoints for you to start working on your tickets.
If you found this helpful, please consider following me on Linkedin, reacting to this post, leaving a comment, or support me by buying me a coffee here.
Whenever you’re ready to launch your startup, I can help you:
ShipFast: The #1 NextJS boilerplate to ship startups in days and not weeks. it’s loved and trusted by 1300+ developers. some of its core features are custom components, Authentication with NextAuth.js, Automatic emails with Mailgun, Payments with Stripe, and many more 🚀 …