Send HTTP Requests from Visual Studio Code

I use the REST Client extension to speed up my workflow and save HTTP requests. This extension allows you to save and send HTTP requests directly from VS Code.

This article will get you set up with REST Client to test and create HTTP requests:

Installing REST Client

1. Open Visual Studio Code.
2. Click on the Extensions icon in the left sidebar (or press Ctrl+Shift+X).
3. Search for "REST Client" in the search bar.
4. Click on the "Install" button next to the REST Client extension by Huachao Mao.

Creating a Request File

To send HTTP requests, create a file with the .http or .rest extension. Let's make a file named requests.http in your project folder.

1. Right-click in the VS Code explorer.
2. Select "New File" and name it requests.http.

Writing HTTP Requests

Now that you have created the requests.http file, you can start writing your HTTP requests. Here's an example of how to structure your requests:

# Example requests

### Create item
POST http://localhost:3000/items
content-type: application/json

{
    "name": "Example item",
    "description": "This is an example item."
}

### Update item
PUT http://localhost:3000/items/66cb97690bacbe2c130643b2
content-type: application/json

{
    "name": "Example item updated",
    "description": "This example has been updated."
}

### Delete item
DELETE http://localhost:3000/items/66cb97690bacbe2c130643b2

### GET All items
GET http://localhost:3000/items

### GET item by ID
GET http://localhost:3000/items/66cb97690bacbe2c130643b2

Let's break down the structure of these requests:

1. Comments: Use # to add comments to your file.
2. Request separator: Use ### to separate different requests. You can also add a comment on the same line after the separator, like this: ### Get User Info # Retrieves user information.
3. Request line: Specify the HTTP method (GET, POST, PUT, DELETE, etc.) followed by the URL.
4. Headers: Add any necessary headers, such as content-type: application/json.
5. Body: Add the request body after an empty line for POST and PUT requests.

It's important to separate each request with ###. This delimiter allows REST Client to distinguish between different requests in the same file. Adding a comment on the same line after the ### can help you organize and describe your requests more clearly.

Sending Requests

To send a request:

1. Place your cursor anywhere within the request you want to send.
2. Look for the "Send Request" text above the request.
3. Click on "Send Request" or use the keyboard shortcut Ctrl+Alt+R (Windows/Linux) or Cmd+Alt+R (Mac).

The response will open in a new tab, showing the status code, headers, and body.

Advanced Features

Here's a few more advanced features with examples so you can see just how flexible REST Client is:

Using Variables

REST Client allows you to use variables to make your requests more flexible. In our example you probably noticed there is a lot of repetition. Here's an example of how we could clean it up:

@baseUrl = http://localhost:3000
@itemId = 66cb97690bacbe2c130643b2

### GET item by ID
GET {{baseUrl}}/items/{{itemId}}

You can define variables at the top of your file or I sometimes refer to a .env file. Here's an example of grabbing the BASE_URL and ITEM_ID from the file:

### GET item by ID
GET {{$dotenv BASE_URL}}/items/{{$dotenv ITEM_ID}}

GraphQL

REST Client supports GraphQL queries and mutations. You can send GraphQL requests just like any other HTTP request.

### GraphQL Query
POST https://api.example.com/graphql
Content-Type: application/json

{
  "query": "query { user(id: 1) { name email } }"
}

### GraphQL Mutation
POST https://api.example.com/graphql
Content-Type: application/json

{
  "query": "mutation { createUser(name: \"John Doe\", email: \"john@example.com\") { id name email } }"
}

Authentication

REST Client supports various authentication methods. Here are examples of Basic Auth and Bearer Token:

### Basic Auth
GET https://api.example.com/protected-resource
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

### Bearer Token
GET https://api.example.com/protected-resource
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

For Basic Auth, you can also use variables to store credentials:

@username = myuser
@password = mypassword

### Basic Auth with variables
GET https://api.example.com/protected-resource
Authorization: Basic {{base64 username:password}}

Request Chaining

You can use response values from one request in subsequent requests. This is useful for scenarios where you need to use data from one API call in another.

### Login and get token
# @name login
POST https://api.example.com/login
Content-Type: application/json

{
  "username": "myuser",
  "password": "mypassword"
}

### Use token from login response
GET https://api.example.com/protected-resource
Authorization: Bearer {{login.response.body.token}}

In this example, we first make a login request and then use the token from the login response in the subsequent request.

Different Environments

You can create different environment settings (e.g., dev, staging, production) and switch between them. Create a file named rest-client.env.json in your project root:

{
  "development": {
    "host": "localhost:3000",
    "token": "dev-token"
  },
  "production": {
    "host": "api.example.com",
    "token": "prod-token"
  }
}

Then, in your .http file:

@baseUrl = {{host}}

### Get user (using environment variable)
GET {{baseUrl}}/users/1
Authorization: Bearer {{token}}

To switch environments, use the REST Client: Switch Environment command in VS Code (usually found in the bottom right corner of the editor).

Hopefully you find it as helpful as I do!