DEV Community

loading...
Cover image for Thunder Client - Http Client Extension for VS Code

Thunder Client - Http Client Extension for VS Code

ranga_vadhineni profile image Ranga Vadhineni Updated on ・2 min read

This post originally posted on Medium

How Postman led me to create my own API Client called Thunder Client for VS Code.

I work for my own project localmint.com, where I need to update the location data regularly, which involves dealing with lot of Crawlers & APIs. I was using Postman to test APIs from last few years, But recently for each update the Postman desktop client is becoming slow to load and confusing UI. So I finally decided to create my own API client.

Since I use Visual Studio Code regularly for development, So i decided to develop an extension instead of separate software to download, and also there are millions of users who already use VS Code. I have set the following design targets for the new extension

Extension Design Goals

  • Lightweight API Client
  • Simple, Clean & Easy to use UI
  • Handle Large Responses & View Response in Full Screen
  • One click access to most functionality
  • Collections & Environment Variables Support
  • Scriptless Testing

Development

I started initial research on how to use VS Code Api to develop an extension for couple of days and then started developing the software. Finally able to complete development of Extension with the above target functionality. below is the screenshot of the extension

Technology

The tech used is to develop the VS Code extension are Javascript, Flexbox, Typescript, Ace Editor, Got, Nedb. No javascript or bootstrap frameworks used.

Scriptless Testing

I noticed we need to write lot of boilerplate code in Postman and other clients to do basic testing using scripting like status code equal 200. So I implemented GUI based tests, where you can select couple of dropdowns to do most standard tests very easily without any scripting knowledge. Below is the screenshot of tests.

Extension Links

Please download the extension and let me know any feedback.

Discussion (8)

pic
Editor guide
Collapse
ibrahimshamma99 profile image
Ibrahim Abushammah

Great Tool!
The only takeaway is that while it is on early stages it does not allow to copy and paste, at least in my machine😔

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author

Hi Ibrahim, what you like to copy and paste?

Collapse
ibrahimshamma99 profile image
Ibrahim Abushammah

I want to copy url and paste it in thunder client, also I need to copy request body from postman or Insomnia into the thunder but I was not able to.

Thanks a lot for your concern.

Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni Author • Edited

I just copy pasted both url and body from postman, its working for me. I also copy pasted url from browser its working.

Can you copy from postman and paste in any text editor first and see if it works.

If the issue is still there, can you create a bug in our github page with some screenshots

Thread Thread
ibrahimshamma99 profile image
Ibrahim Abushammah

The copy paste works everywhere except in thunder client unfortunately.

Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni Author

ok please create a bug in github page and your pc info, i will look into it.

Collapse
indrajeetgour profile image
Indrajeet Gour

Thanks @Ranga for the excellent tool.

I wanted to know how one can use the different same variables like a token for different environments as postman does, I tried making dev folder and added the token and used the same in the request but feels like it is not able to resolve that.

Please help with this, let me know if I am making some mistakes.

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author • Edited

Hi Indrajeet,

Create a environment in Env Tab and add variables, then you can use those variables using format {{variable}} in any request.