Mock Data for Angular 9 applications with JSON Server — Part 2(final)

In previous tutorial, we covered following:

Initial setup

Download JSON Server

Configure JSON Server

Running JSON Server

Setting up proxies for Angular application

Use concurrently to run both the servers together

Resources:

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

SWAPI - The Star Wars API

We were left with few issues which might occur in almost any applications:

1] Multiple API calls

2] Maintaining data.json with big data

We’ll also touch base on routes to configure three or four level API’s.

Step 1: Initial setup

Checkout the final repository of Part 1 and run “npm install”.

Step 2: Move content out of data.json

Create a new folder “data” inside “mocks” folder. Create a new file “people.json” and copy contents of “data.json” here. We can delete “data.json” but it is optional. We’ll be introducing a script which will generate “data.json”. Your file structure will look as below:

People.json

Step 3: Generate data.json

Install node module “json-concat” in dev dependencies:

npm install json-concat — save-dev

json-concat

json-concat

Create “concat-json.js” in “mocks” folder and add following script:

var jsonConcat = require(‘json-concat’);

jsonConcat({

src: “mocks/data”,

dest: “mocks/data.json”,

}, function(json){

console.log(json);

});

concat-json.js

Modify package json to generate data.json:

“concat:mocks”: “node \”./mocks/concat-json.js\””

Execute above script:

npm run concat:mocks

Notice that “data.json” will be generated and it will have content copied from “people.json”. You can also add this script to your mock:server script in package.json.

Step 4: Add more API’s

Create “planets.json” in “data” folder and copy response from “https://swapi.dev/api/planets/” in the same format as in people.json.

Create “starships.json” in “data” folder and copy response from “https://swapi.dev/api/starships/” in the same format as in people.json.

Run “npm run concat:mocks” and verify if “data.json” contains all the content.

data.json

Modify proxy.config.json:

{

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

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

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

}

Run the server using:

npm run start:proxy:mock:server

Notice three resources people, planets & starships

Visit http://localhost:4200/planets or http://localhost:4200/starships to verify if new resources are routed properly.

Step 5: Configure 3 level and 4 level URL’s

Let’s assume that we need to call following endpoints:

A. http://localhost:4200/starwars/people

B. http://localhost:4200/starwars/universe/planets

C. http://localhost:4200/starwars/universe/transport/starships

Above URL’s will be 404 as proper configurations are missing. Here is how to make it work:

A. http://localhost:4200/starwars/people:

Modify proxy.config.json to following:

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

B. http://localhost:4200/starwars/universe/planets

Modify proxy.config.json to following:

“/starwars/universe/planets”: {

“target”: “http://localhost:3000",

“secure”: false,

“pathRewrite”: {“^/planets”: “/planets”}

}

C. http://localhost:4200/starwars/universe/transport/starships

Modify proxy.config.json to following:

“/starwars/universe/transport/starships”: {

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

}

Also, create “routes.json” to map appropriate route. Add following entry in this file:

{“/starwars/universe/transport/starships”: “/starships”}

Modify package.json mock server script to pick up routes file:

“mock:server”: “npm run concat:mocks && json-server — routes routes.json — watch mocks/data.json”

Modified package.json

Restart the server and all the URL’s should work. :)

/starwars/universe/transport/starships

Conclusion:

We were able to configure our application to support multiple API calls in a structured manner and also handle 3 and 4 level URL routes.

Part 2 Github resources:

websleengur/angular-mock-data-part2