In this article, a developer discusses his recent weekend project which took the form of a VS Code extension for using ngrok.

Over the Easter weekend, a four-day weekend characterized 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?

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 favorite 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 would make it easier to use ngrok. I searched and found  one under development and one  that started a web server and ran ngrok. So, I decided to build the extension that I wanted to see in the marketplace.

What Does It Do?

With version 1 of the extension, you can start a 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.

#tutorial #typescript #extension