DEV Community

Cover image for I built a VSCode extension: ngrok for VSCode
Phil Nash
Phil Nash

Posted on • Originally published at philna.sh on

I built a VSCode extension: ngrok for VSCode

Over the Easter weekend, a four day weekend characterised by lockdowns all over the world, I decided to use the extra time I had at home to start a new project and learn a new skill. By the end of the weekend I was proud to release my first VSCode extension: ngrok for VSCode.

What’s that now?

ngrok is a command line tool built by Alan Shreve that you can use to expose your localhost server with a publicly available URL. It’s great for sharing access to an application running on your own machine, testing web applications on mobile devices or testing webhook integrations. For example, I’m a big fan of using ngrok to test my webhooks when I am working with Twilio applications.

VSCode is my current favourite text editor, built by Microsoft and based on JavaScript (well, mostly TypeScript).

As I was using VSCode last week I wondered if there was an extension that made it easier to use ngrok. I had a search and found one under development and one that started a web server as well as running ngrok. So I decided to build the extension I wanted to see in the marketplace.

What does it do?

With version 1 of the extension you can start an ngrok tunnel with either a port number or by choosing one of your named tunnels from your ngrok config file. There is one available setting, where you can set a custom path to a config file.

Once a tunnel is running you can then open the ngrok dashboard or close the tunnel.

All the commands are available from the VSCode command palette.

It’s simple so far, but I wanted to keep the scope small and get it released.

An animation showing using the extension from the VSCode command palette.

The code is all open source and you can find it on GitHub.

What’s next?

I would love for you to try the extension out, especially if you are already an ngrok user. If it’s useful then I am looking for feedback, bug reports and feature requests so I can continue to improve it.

One idea I have already is to provide a Status Bar Item or Tree View that can give more information on and control over currently running ngrok tunnels. I should probably work out how to write tests for the extension too.

What do you think?

I really am after feedback, so please install ngrok for VSCode and let me know what you think on Twitter or via a review on the VSCode Marketplace.

Top comments (7)

Collapse
 
everton_68 profile image
Everton

Nice extension , I will test in my projects.

Collapse
 
philnash profile image
Phil Nash

Let me know how you get on with it!

Collapse
 
muhammadawaisshaikh profile image
Muhammad Awais

It’s amazing man 🚀

Collapse
 
philnash profile image
Phil Nash

Thanks very much! 😊

Collapse
 
fnaquira profile image
Favio Náquira

man, this is awesome!!! really excited about your next project, greetings from Perú :)

Collapse
 
nikme profile image
Nikola

Simple and productive, good job!

Collapse
 
philnash profile image
Phil Nash

Thanks! I'm excited for people to try it. Let me know if you come across any bugs or have any feature requests.