# 5 Steps to Build a Node.js Mock Server and API With Random Data


 

As a front-end developer, you often need data from an API. But sometimes the back end 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 in talking 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.

### 1\. Dependencies

In order to work with Node, you need to have it installed on your machine. For Mac users, I highly recommend installing it with [nvm](https://github.com/creationix/nvm#installation-and-update) because it’ll make it easier to update Node.js in the future. [There’s also a version for Windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows).

Create a new folder for this project. Run `npm init -y` to initialize the folder with Node, and it’ll automatically create a `package.json` for you.

In order to create the mock server, we need two npm dependencies: `[json-server](https://www.npmjs.com/package/json-server)` and `[casual](https://www.npmjs.com/package/casual)`. We run `npm install json-server casual — save-dev` in our project.

### 2\. Base for the Mock Server

Create an `index.js`, and paste this code into 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’ll first search if there’s any default port set for a Node server; otherwise, it’ll pick port `3000`.

We include the `bodyParse` and middleware by using `server.user()`. And after that, we do a console log so you know the mock server is running.

### 3\. Generate Data for 100 Users

Create a folder called `/users`, and create an `index.js` in it.

First, include the npm package `casual` in order to use it.

For a specific language, if you don’t want the English default, type:

Then below it, we need to export a module in order to use it in the `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’ll see the array of randomly generated users.

### 4\. Create a /user Endpoint

In order to get the data for 100 users, we need to create an endpoint for the mock server. Paste the code below in the `root index.js`, right before the `server.listen()` function.

server.get(‘/users’, (request, response) => {  
 if (request.method === ‘GET’) {  
   const users = require(‘./users/index’)  
   response.status(200).jsonp(users())  
 }  
})

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’ll see the array of randomly generated users.

### 5\. Run the Mock Server

Now, we’re able to run that mock server and get the data inside our front-end application.

Run `node index.js` inside the root folder of the project. Visit `[localhost:3000/users](http://localhost:3000/users)`, and you’ll see 100 users in the user array.

I hope this tutorial formed the basis for you to generate more random data and expand your mock server.

### Read more

[**Frontend Development On A Budget: Raspberry Pi 4**  
medium.com](https://medium.com/dev-together/frontend-development-on-a-budget-raspberry-pi-4-4c917124d348 "https://medium.com/dev-together/frontend-development-on-a-budget-raspberry-pi-4-4c917124d348")[](https://medium.com/dev-together/frontend-development-on-a-budget-raspberry-pi-4-4c917124d348)

[**5 Tips For Healthier Developers**  
_Your Body And Brains Need Attention_medium.com](https://medium.com/dev-together/5-tips-for-healthier-developers-ea21d1e826f "https://medium.com/dev-together/5-tips-for-healthier-developers-ea21d1e826f")[](https://medium.com/dev-together/5-tips-for-healthier-developers-ea21d1e826f)

[**What Tech I Use in 2020 As Developer**  
_Software, Hardware and other stuff I use during my work_medium.com](https://medium.com/dev-together/what-tech-i-use-in-2020-as-developer-f3269f857f0e "https://medium.com/dev-together/what-tech-i-use-in-2020-as-developer-f3269f857f0e")[](https://medium.com/dev-together/what-tech-i-use-in-2020-as-developer-f3269f857f0e)

[**JavaScript Concepts You Need Before Starting w/ Frameworks & Libraries**  
_Don’t start before you are comfortable with them_medium.com](https://medium.com/dev-together/javascript-concepts-you-need-before-starting-w-frameworks-libraries-25a325312b5c "https://medium.com/dev-together/javascript-concepts-you-need-before-starting-w-frameworks-libraries-25a325312b5c")[](https://medium.com/dev-together/javascript-concepts-you-need-before-starting-w-frameworks-libraries-25a325312b5c)