The Ultimate Guide to Visualizing API Responses in Visual Studio via HTTP Files

Checking REST API endpoints

Building a REST API is the most common way of exposing data from a web application. It mainly exposes a CRUD to interact with a database to produce a more autonomous service.

To validate the result produced by the API, developers mainly use an external tool like Postman or Insomnia to display all the information about the response (if you do it directly inside a browser, you're crazy 😄).

On the command side, Visual Studio Code integrates a well-known extension called REST Client for testing endpoints directly from the IDE.

Grouping tools together in the IDE keeps you from spreading yourself too thin during development, and it was rather sad that Visual Studio didn't have its own.

So they did!

HTTP file

The .http syntax is quite simple:

• `#` or `//` to comment a line
• `@` to declare a variable
• `###` to separate different calls definition

Each call begins with the methods and the entire path to the endpoint as below.

@CleanArchitecture.Application_HostAddress = https://localhost:7109

Get {{CleanArchitecture.Application_HostAddress}}/customers

The host address is stored inside the variable `CleanArchitecture.Application_HostAddress` and create a GET call on the URL `https://localhost:7109/customers`

More context can be added to a query as the `Content-Type` or the request body. `POST` and `PUT` methods can integration.

@Customer_Id = 2c6a940d-3f6c-418e-8cdb-cae24163baef
Put {{CleanArchitecture.Application_HostAddress}}/customers/{{Customer_Id}}
Content-Type: application/json
Accept: application/json

{
  "name": "Jean"
}

Pay close attention to the line break between the endpoint declaration and the body declaration, it is part of the syntax.

The top part contains the request context where you can add all headers needed, and the bottom part have the body of the request.

Microsoft already planned to add features on http file as a request history, the possibility to save response body to a file and the improvment of testing.

Integration inside Visual Studio

In the latest Visual Studio 2022, the editor supports .HTTP (.REST) files. Although the REST Client's syntax isn't fully supported yet, Microsoft is striving to bridge this gap, evolving the editor into a more comprehensive tool for developers​.

Microsoft also created an Endpoints Explorer view to simplify the creation of .http file which is currently a preview feature.

The Endpoints Explorer [...] will not be included in the final public build of Visual Studio 2022 17.6, but it will be in the preview builds of 17.6 and 17.7. We are hoping to make this to the GA build soon.
– Microsoft

It's handy for seeing all the exposure points at a glance without having to get into your controllers, and above all, it avoids having to start your application to get the Swagger display.

Visual Studio allows you to generate the .http file directly from this window by right-clicking on an endpoint and selecting Generate Request. A new file named YourProject.http will be created, in this case CleanArchitecture.Application.http, which contains the first call to the API.

To obtain responses, the application must first be launched so that the client can call the API. Once this is done, you can send a request directly from the .http file using the buttons on the left.

The results will be displayed on the right with all the response information.

To give you a complete example of an .http file, here's the one I use on my application. It allows you to make all the classic CRUD requests. Enjoy!

@CleanArchitecture.Application_HostAddress = https://localhost:7109

Get {{CleanArchitecture.Application_HostAddress}}/customers

###

Post {{CleanArchitecture.Application_HostAddress}}/customers
Content-Type: application/json

{
  "name": "Dan"
}

###

@Customer_Id = f1ec6be7-2079-4804-9e8d-0db9b30465ac
Get {{CleanArchitecture.Application_HostAddress}}/customers/{{Customer_Id}}

###

@Customer_Id = 2c6a940d-3f6c-418e-8cdb-cae24163baef
Delete {{CleanArchitecture.Application_HostAddress}}/customers/{{Customer_Id}}

###

@Customer_Id = 2c6a940d-3f6c-418e-8cdb-cae24163baef
Put {{CleanArchitecture.Application_HostAddress}}/customers/{{Customer_Id}}
Content-Type: application/json

{
  "name": "Andrew"
}

Summary

Visual Studio integration of .http file simplify the way developers check response from their API. It replaces external tools of Postman for the majority of use cases.

However, integration is not yet complete, and new features will be added in future versions of the IDE.

To go further, you can read the Microsoft documentation :

Have a goat day 🐐