As a frontend developer, you often need data from an API. But sometimes the backend hasn’t been set up by your team. In order for you to continue and mock your data, it’s a good idea to not store your data structure on memory.
It’s a good idea to start as soon as possible to talk with an external API where your data comes from. In this tutorial, I want to go through a minimal setup for mocking your data. After this, you should be able to extend it with your own data as needed.
In order to work with Node, you need to have it installed on your machine. For the Mac users, I highly recommend to install it with NVM, because it will make it easier to update NodeJS in the future. (There is also a version for Windows).
Create a new folder to start for this project. Run
npm init -y to initialize the folder with Node and it will create automatically a package.json for you.
Base for the mock-server
index.js and paste this code in it.
We include the json-server in order to use it. Then we create a server instance in the
const server. With the middlewares, we can set a few options like the path to static files, CORS and a few more. But here we just use it without any specific options.
The port is very important. If you want this to run on a server it will first search if there is any default port set for a Node server, otherwise, it will pick port
We include the bodyParser and middleware by using
server.user(). And after that, we do a console log so you know the mock-server is running.
Generate data for 100 users
Create a folder
/users and create an
index.js in it.
First, include the npm package casual in order to use it.
For specific language, if you don’t want the English default:
Then below it we need to export a module in order to use it in de index.js in the root later.
In this case, we use
server.get() for a get request. But we also could choose “post”, “put”, “delete” and so on.
Inside we check if the request was a “GET” request. If so, we require our user’s script and call the function inside the response so you will see the array of randomly generate users.
Run the mock-server
Now we are able to run that mock-server and get the data inside our frontend application.
node index.js inside the root folder of the project. Visit localhost:3000/users and you will see 100 users in the user array.
I hope this tutorial formed the base for you to generate more random data and expand your mock-server. If you have any questions, please let me know in the comments.