{{announcement.body}}
{{announcement.title}}

I Built a VS Code Extension: Ngrok for VS Code

DZone 's Guide to

I Built a VS Code Extension: Ngrok for VS Code

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

· Web Dev Zone ·
Free Resource

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 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 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 made it easier to use ngrok. I had a search and found one under development and one that started a web server and ran 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.

Topics:
extension ,ngrok ,tutorial ,typescript ,vscode ,web design and web development

Published at DZone with permission of Phil Nash , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}