REST CLIENT : Portable API Collection
By: Teepob Harutaipree
Tags: Productivity, Tools, API

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

only available per file scope 2. External : .env file, process env

: file, env 3. Global : shared across all file or per defined environment

: shared across all file or per defined environment 4. Special : built in variables

1 ~ Local

Use @varName = VALUE



@name = REST CLIENT @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

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



@baseUrl =

###

// GET Request

// @names getFirst

GET {{baseURL}}/1

###

// @names getSecond

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

You can also FOLD each request block

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

Comments