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

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

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: