320 reads

I Built a VSCode Extension: ngrok for VSCode

by Phil NashApril 25th, 2020

Too Long; Didn't Read

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. The code is all open source and you can find it on GitHub. The extension is simple so far, but I wanted to keep the scope small and get it released. I would love for you to try the extension out, especially if you are already a VSCode user.

Companies Mentioned

featured image - 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.

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.