loading...
Cover image for I built a VSCode extension: ngrok for VSCode

I built a VSCode extension: ngrok for VSCode

philnash profile image Phil Nash Originally published at philna.sh on ・3 min read

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.

Posted on by:

philnash profile

Phil Nash

@philnash

Developer evangelist for Twilio and Authy. I write JavaScript and Ruby. Probably listening to ska punk right now. console.log('🍻');

Discussion

markdown guide
 

Oooo... I'm excited to try this one. Thanks for sharing.

 

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

 

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

 

Nice extension , I will test in my projects.

 

Let me know how you get on with it!

 
 

Simple and productive, good job!