Thunder Client - Lightweight Rest API Client Extension for VS Code
#api#react#vscode#javascript
Ranga Vadhineni

Ranga Vadhineni @ranga_vadhineni

About: Creator of Thunder Client - Lightweight Rest Api Client Extension for VS Code

Location:
Dublin, Ireland
Joined:
Feb 19, 2021

Thunder Client - Lightweight Rest API Client Extension for VS Code

Publish Date: Apr 9 '21
29 24

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
  • Local Storage
  • 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

Please download the extension and let me know any feedback.

Comments 24 total

  • Ibrahim Shamma
    Ibrahim ShammaApr 28, 2021

    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
      Ranga VadhineniApr 28, 2021

      Hi Ibrahim, what you like to copy and paste?

      • Ibrahim Shamma
        Ibrahim ShammaApr 29, 2021

        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
          Ranga VadhineniApr 29, 2021

          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
            Ibrahim ShammaApr 29, 2021

            The copy paste works everywhere except in thunder client unfortunately.

            • Ranga Vadhineni
              Ranga VadhineniApr 29, 2021

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

    • Ranga Vadhineni
      Ranga VadhineniJun 4, 2021

      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
    Indrajeet GourMay 15, 2021

    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
      Ranga VadhineniMay 16, 2021

      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
        Indrajeet GourMay 20, 2021

        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.

  • Sony Choudhary
    Sony ChoudharyMay 25, 2021

    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
      Ranga VadhineniMay 25, 2021

      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
        Sony ChoudharyMay 25, 2021

        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.
  • Aburel
    AburelJul 8, 2021

    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

  • Sneha Tunga
    Sneha TungaJul 10, 2021

    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.

  • Prabhakaran22
    Prabhakaran22Aug 12, 2021

    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
      Ranga VadhineniAug 13, 2021

      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
        Prabhakaran22Aug 13, 2021

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

  • sj891
    sj891Aug 13, 2021

    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
      Ranga VadhineniAug 13, 2021

      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.

Add comment