DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Related

  • Mastering GitHub Copilot in VS Code: Ask, Edit, Agent and the Build–Refine–Verify Workflow
  • Let’s Build an End-to-End NFT Project Using Truffle Suite
  • 3 Easy Steps for a (Dev)Containerized Microservice With Jolie and Docker
  • Remote Pair Programming with IntelliJ, Eclipse and VS Code

Trending

  • DZone's Article Submission Guidelines
  • Getting Started With Agentic Workflows in Java and Quarkus
  • How to Submit a Post to DZone
  • Mastering Fluent Bit: Beginners' Guide for Contributing to Our CNCF Project Website
  1. DZone
  2. Coding
  3. Tools
  4. VS Code Extension: Ngrok for VS Code

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.

By 
Phil Nash user avatar
Phil Nash
·
Updated Jan. 02, 21 · Presentation
Likes (4)
Comment
Save
Tweet
Share
14.8K Views

Join the DZone community and get the full member experience.

Join For Free

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.

An animation showing 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 a 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 would enjoy feedback, so please install ngrok for VSCode, and let me know what you think on Twitter or via a review on the VSCode Marketplace.

Visual Studio Code Virtual screening

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

Opinions expressed by DZone contributors are their own.

Related

  • Mastering GitHub Copilot in VS Code: Ask, Edit, Agent and the Build–Refine–Verify Workflow
  • Let’s Build an End-to-End NFT Project Using Truffle Suite
  • 3 Easy Steps for a (Dev)Containerized Microservice With Jolie and Docker
  • Remote Pair Programming with IntelliJ, Eclipse and VS Code

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

  • RSS
  • X
  • Facebook

ABOUT US

  • About DZone
  • Support and feedback
  • Community research

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 215
  • Nashville, TN 37211
  • [email protected]

Let's be friends:

  • RSS
  • X
  • Facebook