Mock Data for Angular 9 applications with JSON Server — Part 1

Frontend technologies had grown exponentially since the inception of NodeJS and powerful frameworks like Angular. There are unlimited possibilities and opportunities to make our development setup more efficient and robust with the of right tools. In this story, I’ll discuss the steps which our team took to setup mock data using JSON Server from typicode.

Source code:

websleengur/angular-mock-data

JSON server Github url:

typicode/json-server

Step 1: Initial setup

Assuming that NodeJS, npm & angular-cli is already installed on your machine, please run the following command to create a new Angular project:

ng new angular-mock-data

Creating Angular application

Step 2: Download JSON Server

Now we’ll download JSON Server as a dev dependency in node_modules:

cd angular-mock-data

npm install json-server — save-dev

Install json-server

Step 3: Configure JSON Server

Create data.json file under angular-mock-data/mocks folder.

TIP: Don’t create mock data files under /src/assets/ or /src/app/ folder. The reason for this is to avoid Angular from keeping a watch on data files. Angular application will reload if it detects any change in the files being watched. In case if we are trying to perform any CRUD operations then the data.json file will be modified instantly which will cause the Angular application to compile and reload.

Now we’ll add the data to data.json file. You can use any api response data which you like and wrap it in an object. Just for fun I’ll be using the swapi.co api. Get the response from https://swapi.dev/api/people/ and copy it in data.json as follows:

{

“people”: response_from_api

}

data.json sample

Step 4: Running JSON Server

We can simply run “json-server — watch db.json” if json-server is installed globally but we have installed it locally, hence we’ll need to add a script in our package.json. Go ahead and add following script to your package.json file:

“mock:server”: “json-server — watch mocks/data.json”

Add mock:server task to package.json

Now we can run json-server using following command:

npm run mock:server

Running json-server

Visit http://localhost:3000 to verify if json-server is working fine. Notice that you can see two api’s under Resources section: people and db. Click on people and confirm if you can see the correct data:

People api from json-server

TIP: The data.json is being watched by json-server. Go ahead and change some data in data.json and verify if the change is reflected on browser.

BONUS: Try adding couple of more api’s which you actually need for your project.

Step 5: Game on — Setting up proxies for Angular application

We have json-server running at localhost:3000 serving all the required api’s. Now, we need to configure our Angular application to redirect the api calls from 4200(default) to 3000. Our goal is to get valid response for localhost:4200/people. Create a proxy.conf.json file in the root folder and add following script to package.json:

“start:proxy”: “ng serve — proxy-config proxy.conf.json”

Add following code to the proxy.conf.json file:

{
“/people”: {
“target”: “http://localhost:3000",
“secure”: false
}
}

Configuring proxy for /people route

Open a new terminal and run following command to start Angular application using the proxy configurations:

npm run start:proxy

Running angular app with proxy

Visit http://localhost:4200/people and verify if the response data is same as http:localhost:3000/people.

Step 6: Bonus — Use concurrently to run both the servers together

Opening two terminals and running two commands is not a good idea for everyday development. Kill any servers which are running. We can use concurrently to overcome this issue. Install concurrently as a dev dependency:

npm install concurrently --save-dev

Install concurrently

Add following script to the package.json file:

“start:proxy:mock:server”: “concurrently — kill-others \”npm run mock:server\” \”npm run start:proxy\””

Modified package.json

Run the script to start the json server following by Angular application:

npm run start:proxy:mock:server

Using Concurrently to run both servers

Conclusion: We were able to setup mock api’s using json-server. We have also routed api calls from Angular application to json-server. Also, we were able to run both the servers together using concurrently. CRUD operations are possible by default on any api using json-server.

Part 1 Github resource:

https://github.com/websleengur/angular-mock-data

Next step? Problem with multiple api calls and dataset

You must had noticed that I used a huge dataset in data.json file. I could had used a smaller dataset for demo purpose but I wanted to make a point. Real life datasets are not small and neither limited. We may have huge datasets with different variations(success, error etc.) and multiple api’s in real life application. Data.json will be too big and tedious to maintain if start keeping everything inside one file. We’ll resolve the issue in the next part of this tutorial.

Part 2: https://medium.com/@kaustubhtalathi/mock-data-for-angular-applications-with-json-server-part-2-final-427bd68005bb