REST CLIENT : Portable API Collection

REST Client is a free extensions for common editor such as VSCODE and Jetbrains IDE (Intellij, Rider, Webstorm,..) that allow us to write requests in a file and manage it within the project.

Features:

Store/Send requests in an editor with syntax highlighting
Support multiple request types : cURL, GraphQL

Authentication support : SSL Client Cert, Azure, AWS

Environment support : custom variables and system environment

Auto completion : variables, HTTP Method, Header …

Generate Snippet : generate snippets in various language ( C, JS, Java, Go, PHP, Python, ...)

I will walk you through on how to setup practical working environment with REST Client within few minutes to get all the core functionality on Postman or Insomnia + All TIPS 🏂.

How to get it ?

VSCODE : Go to Extensions ( Ctrl+Shift+X ) : search REST Client

Jetbrains (Intellij,Rider,..): Go to Plugin : search REST Client

Build First Request

• First let’s create new file with .http or .rest at the end to indicate that this is our HTTP collection file.

In .http/.rest file you can define basic request with 3 parts : method, headers, body as below format:

//  1.method 
<POST/GET/DELETE> <URL>
//  2.headers 
content-type: application/json
Authorization: Bearer 123asd
//  3.body (separate by new line)
{                                  
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}

Body should be separated by newline from the header

Try this first POST request Hit Ctrl+Alt+R(Cmd+Alt+R) to send request.

You can also send request using cURL command

This two requests are equivalent

Variables

Variables can be defined and come from different source which made REST Client very flexible and manageable.

• 1. Local: only available per file scope
• 2. External: .env file, process env
• 3. Global : shared across all file or per defined environment
• 4. Special : built in variables

1 ~ Local

Use @varName = VALUE

@baseUrl = https://postman-echo.com
@name = REST CLIENT
GET {{baseUrl}}/get HTTP/1.1

Use previous response as variable

• Use response from as in the request
• Use JSONPath / XPath to retrieve JSON/XML response value

1. First to do this we have to mark the incoming response inside some named variable using # @name

# @name getContent
GET {{baseUrl}}/get?name=babara
// Example response
// { "args": {  "name": "babara" } .... }

2. Run the above request (Ctrl Shift R)

3. After run POST request should get the response with json object like the picture : See the name and userAgent from first GET Request

Returned Response : name and userAgent from first GET Request

You can also use the full response body using .*

POST {{baseUrl}}/post HTTP/1.1
Content-Type: application/json
{{getContent.response.body.*}}

2 ~ External

System Variables

• .env file — in same dir

.env file

rest file in same dir/folder

Process environment

(exports in .bashrc)

{{$processEnv MY_ENV}}

3 ~ Global

You can create multiple environments and use in all files/folders

You can either defined inside current project folder or go to User settings (personal)

Project Folder : create or edit/.vscode/settings.json

Personal settings : (Ctrl Shift P — Open Settings JSON) and append this section to existing file.

Example : two environments local and production

$shared will be a base environment for all environments (default global variables)

• You can picked the environment between defined here : local & production
• Switch the environment using Ctrl+Alt+E (Cmd+Alt+E)

Select the environment

Now you can use in any .rest/.http file without defining it again in every places

GET URL/admin
Authorization: {{token}}

4 ~ Special

These are built in variables that can be useful

{{$randomInt min max}}
{{$timestamp [offset option]}}
{{$datetime "DD-MM-YYYY" 1 y}}
{{$guid}}

Example request in variables.http file

Autocomplete

• HTTP Methods
• Variables
• Headers
• Base Template: GET/POST/DELETE/PUT/SOAP/GRAPHQL

Auto complete demo

Manage Collections

Make use of variables and comments to indicate request groups

// Variables
@baseUrl = https://google.com
###
// GET Request
// @names getFirst
GET {{baseURL}}/1
###
// @names getSecond
GET {{baseURL}}/2

• You can also FOLD each request block
• In VSCODE navigate through symbols helps a lot when we have well define name of each requests using : // @name getAllNames

Comments

# This is comments
// This is also comments

🎉 Tips

Shortcuts

R - Send Request
C - Generate Snippet
E - Switch Env
Ctrl+Alt+R (Cmd+Alt+R)
Ctrl+Alt+C (Cmd+Alt+C)
Ctrl+Alt+E (Cmd+Alt+E)

Navigate through Requests & Variables (Symbols)

Ctrl+Shift+O(Cmd+Shift+O for macOS)

Postman Comparison

Postman offers more advanced use cases with more tools : however some features require subscription…

• multiple response tabs — need to manually save
• collection sync between users/team on cloud
• options for pre and post scripts
• support testing
• visualization functionality support
• mock server

Caveat

• Variables are case sensitive
• latest declaration of duplicated variable value will be used. (bottom)

@testUrl = google
GET {{testURL}}/search ==> GET yahoo/search
###
@testUrl = yahoo

• NO Trailing comma in JSON body

🎉🎉 Have A Fun Request Shooting Experience !

Photo by Benjamin Voros on Unsplash

Source Code

brightdays/ultimate-rest-client

References

REST Client - Visual Studio Marketplace