Faking is Good: Back-end Data and API Prototyping with Faker.js and JSON-Server

Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Search for a command to run...

Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Thanks for such an encouraging comment.. Made my Day! :)
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.

Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD

Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.

A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment

Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.

GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
We are agile! In most of our projects we are asked to develop User Interfaces in parallel to the back-end services and APIs. This gives us the challenge of Implement and Test the User Interfaces without the real and real-like data availability. Not only that, how about the APIs? Can it be faked such that,
For most of the projects where I less worry about the truthfulness of the data but, rest of it matters, I would like to use the combination of these:
Faker.js helps us building massive amount of Fake data in real quick time. Though the data is fake, you can still build the data with the required type, structure with which the User Interfaces can be tested early.
It has got various methods to provide data related to address, finance, commerce, date etc.
JSON Server helps us in getting a full fake REST API with zero coding in less than a minute! It is insanely true. The beauty of it is, it uses a JSON file as a data store which can be built easily with Faker.js.
As we have got a high level introductions to both Faker.js and JSON Server, let us see them coming together to solve the data and API prototype problem, faster.
npm initpackage.json created. npm install faker --save
npm install json-server --save
We will be creating a database(db.json) using Faker.js.
index.js at the root of the folder.user data with the properties make sense to me. const faker = require('faker');
let database = { users: []};
const threshold = 1000;
for (let i = 1; i<= threshold; i++) {
database.users.push({
id: i,
name: faker.name.firstName() + " " + faker.name.lastName(),
job: faker.name.jobTitle(),
about: faker.lorem.paragraph(),
phone: faker.phone.phoneNumber(),
userName: faker.internet.userName(),
email: faker.internet.email(),
salary: "$" + faker.finance.amount() + "M",
// You can also use faker.image.people() for image
image: "https://source.unsplash.com/1600x900/?user",
country: faker.address.country()
});
}
console.log(JSON.stringify(database));
package.json add this, "generate": "node ./index.js > ./db.json",
npm run generate
package.json add this, "server": "json-server --watch ./db.json"
npm run server
You will see the server running on the default port(3000). The API will be available @ http://localhost:3000/users
These are the API endpoints we'll be able to use via JSON REST API server:
We can use _page and _limit parameters to get paginated data as well. That is not all, there are options to search, sort, slice etc, without writing a single line of code. See here for more details.
JSON Server on Heroku, Now, Azure etc. Here is a great read on how to do it. I have deployed the users API on Heroku. Here it is: https://json-faker-server.herokuapp.com/usersHope you enjoyed reading it. That's all for now.