DEV Community

Cover image for Thunder Client - Lightweight Rest API Client Extension for VS Code
Ranga Vadhineni
Ranga Vadhineni

Posted on • Updated on

Thunder Client - Lightweight Rest API Client Extension for VS Code

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 in Full Screen
  • Support VS Code Themes
  • Collections & Environment Variables
  • 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 (24)

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 on

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
ranga_vadhineni profile image
Ranga Vadhineni Author

Hi Ibrahim, found a solution for this

Please see comments here
github.com/rangav/thunder-client-s...

Let me know if that works for you or not

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 on

Hi Indrajeet,

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

Collapse
indrajeetgour profile image
Indrajeet Gour • Edited on

Yes, you are right I could able to use them as {{variable}} but how about if we have multiple environments to pick, Postman offers the drop-down for environment selection.

I got it now you have enabled the "set default" in the env option section. That's all I need. πŸ™πŸ»

Thank you a ton again for this tool.

Collapse
sj891 profile image
sj891

Such an amazing extension ever..this extension can replace all other third-party tools and in addition, Thunder Client is lightweight which is an extra benefit for those who fight with the storage problem.

Here I wanted to suggest one thing which we all need as a developer, I felt that in the response section there is a need for a copy button via a single click alike the " Clear All " button in the cookies section.

And I have one more suggestion for making it a much better extension ever.
Feel free to contact me.

Thank you Ranga Vadhineni for this gift as a lightweight and useful extension.

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author

Hi, Thanks for the feedback, will implement copy button in the next update.

Please let me know any other feedback here or on our github page.

Collapse
prabhakaran22 profile image
Prabhakaran22

Great tool !! Thank you for such a nice thing !! It would be great if importing environment variables is made much more easier. In addition to the import from file option , if it allows me to paste from clipboard in json or properties format into an environment , it would be very helpful. In my use case, I have to add 100s of env variable which are generated using script. Of course, I can write that to a json file and import it but I have to do it for 5-6 environments everyday.

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author

Hi Prabhakaran, Thanks for feedback, if your current env is .env files you can also import them.

Or is your current environments are in different format?

Collapse
prabhakaran22 profile image
Prabhakaran22

Hi Ranga, Thanks for the reply. I don't have a format and I usually generate using custom script and write the env variables into the format of the tooling. I'm currently using REST client for VSCode and trying to move to ThunderClient. REST client allows me to manage env as one big json file which is very handy for my use-case. I will also try out .env file and update you !!!

Collapse
sony_choudhary_00008c30cb profile image
Sony Choudhary

Thanks for this tool.
Recently i imported my postman collections to thunder client but it seems that my url in the api got replaced with "thunderclient.io/welcome" and so now for every api i have to again change the request url. Is there any solution to this and even my env is not getting set i have imported it is there any way to check that out too if the env was set on the url or not as in postman we can hover on the request uri and see the value set on it.

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

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author • Edited on

Hi Sony,

  1. for url issue, i think url could be empty for some requests. so its using the default url. is it for all urls or some urls the issue?

  2. When you import the env, please set required env active using set default dropdown option.

Collapse
sony_choudhary_00008c30cb profile image
Sony Choudhary

Hi Ranga,

  1. The url issue is for all the api request inside the collection
  2. Ya already did that (the env is accessible). But point 1. still persist.
Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni Author

Can you please create a bug in our github page, I will verify it.

Thread Thread
sony_choudhary_00008c30cb profile image
Sony Choudhary

ok sure :) Thanks

Collapse
aburel profile image
Aburel

Hi Ranga, great tool!

Is it possible to use variables inside URLs?
I need to provide the authentication token as part of the URL, like this:

Site/Token/GUID/GetData

where GUID is a token received using a previous authentication call.

Thanks

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author

Hi Aburel,

You can use environment variables in URL.
also you can set env variable from previous request, see details in below link
github.com/rangav/thunder-client-s...

Let me know if you have any further questions

Collapse
snehatunga profile image
Sneha Tunga

Is there any way to change the layout? I would like to switch between keeping the request and response panels side-by-side and top-bottom (like postman). Shortcut on postman is Ctrl+Alt+V for windows.

Collapse
ranga_vadhineni profile image
Ranga Vadhineni Author

Hi Sneha,

This is now implemented in v1.7.0, when you are in split view, the request view will show in top-bottom.
github.com/rangav/thunder-client-s...

Let me know if you have any further questions