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

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

• Thunder Client - www.thunderclient.com
• Github page visit here

Please download the extension and let me know any feedback.

Comments

[Ibrahim Shamma]

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😔

[Ranga Vadhineni]

Hi Ibrahim, what you like to copy and paste?

[Ibrahim Shamma]

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.

[Ranga Vadhineni]

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

[Ibrahim Shamma]

The copy paste works everywhere except in thunder client unfortunately.

[Ranga Vadhineni]

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

[Ranga Vadhineni]

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

[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.

[Ranga Vadhineni]

Hi Indrajeet,

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

[Indrajeet Gour]

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.

[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.

[Ranga Vadhineni]

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.

[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.

[Ranga Vadhineni]

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?

[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 !!!

[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.

[Ranga Vadhineni]

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.

[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.

[Ranga Vadhineni]

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

[Sony Choudhary]

ok sure :) Thanks

[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

[Ranga Vadhineni]

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

[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.

[Ranga Vadhineni]

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