I built a VSCode extension: ngrok for VSCode
Tags: vscode, ngrok, showdev, opensource
Published: 2020-04-14 13:40:02

---
title: I built a VSCode extension: ngrok for VSCode
published: true
date: 2020-04-14 13:40:00 UTC
tags: vscode, ngrok, showdev, opensource
canonical_url: https://philna.sh/blog/2020/04/14/ngrok-for-vscode/
cover_image: https://philna.sh/assets/posts/ngrok-for-vscode/nfv-header-df3d9b0d8074f44a8a9af698c36678da177715951ee49697bc8b8347ae9cd15a.png
---

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_](https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode).

## What’s that now?

[ngrok](https://ngrok.com/) is a command line tool built by [Alan Shreve](https://github.com/inconshreveable) 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](https://www.twilio.com/blog/2015/09/6-awesome-reasons-to-use-ngrok-when-testing-webhooks.html) when I am working with Twilio applications.

[VSCode](https://code.visualstudio.com/) is my current favourite text editor, built by Microsoft and based on JavaScript (well, [mostly TypeScript](https://github.com/microsoft/vscode)).

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](https://github.com/WassimBenzarti/Ngrok-connect) and one [that started a web server as well as running ngrok](https://github.com/ceyhunkeklik/vscode-ngrok-client). 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](https://ngrok.com/docs#config). 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](https://ngrok.com/docs#getting-started-inspect) 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.](https://philna.sh/assets/posts/ngrok-for-vscode/start-7cd45917e640c19e37deb6f24fa97a2a21e4a382631cee3b24014d59eb6da78e.gif)

The code is all open source and [you can find it on GitHub](https://github.com/philnash/ngrok-for-vscode).

## 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](https://github.com/philnash/ngrok-for-vscode/issues) so I can continue to improve it.

One idea I have already is to provide a [Status Bar Item](https://code.visualstudio.com/api/references/vscode-api#StatusBarItem) or [Tree View](https://code.visualstudio.com/api/extension-guides/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_](https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode) and let me know what you think [on Twitter](https://twitter.com/philnash) or via a [review on the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode&ssr=false#review-details).