Front-end development using API mocks

Updated 1 month ago by Rahul Lahiri

Mesh Dynamics supports parallel front-end and back-end API development using back-end API mocks. Mocks for back-end APIs can be created using API Studio, and the mocks can be used to respond to API requests generated by the front-end during development.

If API mocks are created for multiple versions of the back-end APIs, then the API Studio can be configured to use the mocks for the required API version.

Overview

  • The application front-end is running locally on the developer's laptop.
  • API Studio is also running on the developer's laptop.
  • API requests from the front-end (running in the developer's laptop) should be sent to the local API Studio proxy port. The default proxy port for sending the requests from the front-end is localhost:9000.
  • API Studio will intercept the requests, fetch the best matching response from the Mesh Dynamics back-end, and return the response to the front-end.

API Studio proxy port

Skip this section if you can use the API Studio default proxy port (9000).

API Studio proxy listens to the traffic coming into a localhost port. The default port is port 9000. If you have other services using that port, you can change the API Studio configuration to listen to a different port. To change the port configuration, follow the steps below.

  1. Open the API Studio configuration menu.
  2. Select the Settings menu item.
  3. Set the port you want API Studio to use for listening to incoming requests, and click Save. You should send the requests from the front-end to this port.
  4. Click on the Back button to get back to the API editor.

Sending requests to API Studio

The front-end must be running locally on the developer’s laptop to leverage the API mocking capabilities of API Studio described here.

The requests from the front-end must be sent to the localhost port where the API Studio proxy is configured to listen to. The default API Studio proxy port is 9000. The front-end must always send the requests to the API Studio proxy using a URL of the form:

http://localhost:port/api_path

We will use the normalized format URL we created earlier for example. The process is the same if you prefer to retain the original captured URL. Functionally there is no difference between the two formats. Using the simplified format makes it a little easier to maintain if you are using mocks extensively.

Request using normalized URL format

During front-end development, the request should be sent to the API Studio proxy. Here we will issue the request from the API Studio itself. However, the request is exactly the same regardless of whether it is issued from the front-end or from the API Studio.

Host

Service name

API path

Request URL

API request

http://localhost:9000

movieinfo

/minfo/listmovies

http://localhost:9000/movieinfo/minfo/listmovies

The advantage of using this format is that it is easy to understand and maintain. However you have to convert the captured url to this format.

Sending this request from the API Studio gets this response:

Using captured URL

If you prefer to use the mocks from the capture without modifying the URL, this is the request URL to mock server:

Host

Service name

API path

Request URL

API request

http://localhost:9000

localhost:8080

/MIRest/minfo/listmovies

http://localhost:9000/localhost:8080/MIRest/minfo/listmovies

Sending this request from the API Studio gets the same response as above:


How did we do?