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 exte…


This content originally appeared on Phil Nash and was authored by Phil Nash

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.

<figure> <img src="/posts/ngrok-for-vscode/start.png" alt="An animation showing using the extension from the VSCode command palette." loading="lazy"> </figure>

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.


This content originally appeared on Phil Nash and was authored by Phil Nash


Print Share Comment Cite Upload Translate Updates
APA

Phil Nash | Sciencx (2020-04-14T00:00:00+00:00) I built a VSCode extension: ngrok for VSCode. Retrieved from https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/

MLA
" » I built a VSCode extension: ngrok for VSCode." Phil Nash | Sciencx - Tuesday April 14, 2020, https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/
HARVARD
Phil Nash | Sciencx Tuesday April 14, 2020 » I built a VSCode extension: ngrok for VSCode., viewed ,<https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/>
VANCOUVER
Phil Nash | Sciencx - » I built a VSCode extension: ngrok for VSCode. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/
CHICAGO
" » I built a VSCode extension: ngrok for VSCode." Phil Nash | Sciencx - Accessed . https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/
IEEE
" » I built a VSCode extension: ngrok for VSCode." Phil Nash | Sciencx [Online]. Available: https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/. [Accessed: ]
rf:citation
» I built a VSCode extension: ngrok for VSCode | Phil Nash | Sciencx | https://www.scien.cx/2020/04/14/i-built-a-vscode-extension-ngrok-for-vscode-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.