A mock server is a dummy-like server used only for testing purposes in developer’s staging environment. In production/release, the mock server is just a unicorn.

Why is it necessary?

It can be frustrating sometimes when you are coding on the frontend and backend API is not available yet. You rely purely on documentation to guesstimate the format and consumption. By the time it is ready, you get little time buffer to fix any issue and risk overrunning your delivery. Unless of course, you can do work in parallel as per se.

Take a look at the illustration below.
When you cannot run in parallel your development on frontend and backend you risk late delivery in your work.

Development delivery timeline : Work in sequential dependency

Should you be able to work in parallel,risks are much lower.

Development delivery timeline : Work in parallel dependency

That is why, having mock server/s is crucial for the frontend development. It will help you determine the data format, configuration format and allow you to predict how can the data change in the backend.
With this you can be proactive to question and spot potential issues too without trusting 100% an API document. Besides that, mock server will facilitate unit and end-to-end tests.

Let’s get started!
Final code available here.

git clone --branch feature/mock-api-server https://github.com/seanlon/demo-angular-app/

The end result should be something like this.
Screencast capture animation link

Get your angular-cli or angular-equivalent project ready.
If you don’t have one, clone here https://github.com/seanlon/demo-angular-app of develop branch.

git clone https://github.com/seanlon/demo-angular-app

The final copy of this tutorial also accessible here.

git clone https://github.com/seanlon/demo-angular-app && git checkout -t origin/feature/mock-api-server

There are alot of mock-server packages out there.
Most of them are developed from Express.
In our case, we will use npm json-server because it is simple and powerful enough for customization.

We will begin installing the package.

cd your-workspace-directory
npm i --save json-server 
npm i -g json-server 

Next, we create a file same level with package.json named mock-data.json for dummy data purpose.

  "posts": [
    { "id": 1, "activityName": "dining"  },
     { "id": 2, "activityName": "movie"  }


Then in our package.json, add the script below for convenience access with npm.

  "mock-server": "json-server mock-data.json --port 3010",


So now to test it out, we run

npm run mock-server

At this point you should see a message on the running port.
Now check if you can consume the REST API correctly to fetch,add,edit,delete its data. Run a CURL or use tool like POSTMAN ,INSOMNIA to try out the get,put,post and delete.

You will be surprised and delighted to know that, they all work without much configuration.

We verify our mock is running .

In the screens below, observe the url ,request head,body and then its response body.

We do a GET to fetch listing and then we check its details.

We do an add via POST. and see our list added.

We do an edit update via PUT and see how our list updated.

We do a delete remove via DELETE and see how our list updated.

Depending on your project requirement, you can utilize the –routes and –middlewares to do more magic.

Now we setup this mock-server, you probably wondering how you can run multiple commands at one time so you can do something like npm run development and it will run ng serve and npm run mock-server.

To do that, we will install a package named concurrently. This package allow multi process to run in async parallel and not sequential sync manner.

npm i --save concurrently
npm i -g concurrently

After installation done ,open package.json

  "development": " concurrently \"ng serve\" \"npm run mock-server\" ",

Then now you have entire working mock-server which you can customize.

npm run development

So each time , when we run npm run development in our staging local, we can automatically start the mockserver and localhost application instantaneously!

In most of the project, you will need to customize own specific routes and middleware to fit your project requirement.

Are there any caveats you faced with mock server?
Do share also if you have trust issues with API documentation during actual integration ?


Leave a Reply

Your email address will not be published. Required fields are marked *