philnash / ngrok-for-vscode

🚇 A VSCode extension to control ngrok from the command palette

⚡️ Hi, I'm Phil Nash ⚡️

Twitter • Blog • DEV • Medium • LinkedIn • Stack Overflow • Mastodon • Polywork

npx philnash

---

I'm a developer advocate and a Google Developer Expert. I write Ruby gems, Node packages and even the occasional Crystal shard.

• 🌏 I live in Melbourne, Australia
• 🔭 I’m currently working on the ngrok extension for VS Code
• 💬 Ask me about JavaScript, TypeScript
• 📫 How to reach me: @philnash
• 😄 Pronouns: he/him
• 🎧 Listening to: ska punk
• ⚡ Fun fact: I once helped build an app that collected the UK's favourite sandwich fillings

ngrok-for-vscode's Issues

Look into localisation/internationalisation for the extension

Ideas from Stack Overflow: https://stackoverflow.com/questions/56420338/how-to-localise-vscode-extension

The example i18n extenstion from Microsoft: https://github.com/microsoft/vscode-extension-samples/tree/master/i18n-sample

There was an error starting your tunnel.

Hello everything is fine?
Sorry for my bad English because I'm using Google Translate.
Well, my problem is that suddenly I can no longer use the Ngrok for VS Code extension because I get the following error in the bottom right corner of the screen: "There was an error starting your tunnel.".
I've already tried searching on the internet and other questions here on github but none of them helped me, I would like to use the extension again.
I await a response.

I use Windows 11, 64 BITS, latest version of VS Code and latest version of NGROK.

Download system specific binary on extension activation.

The current version has the Mac binary packaged that was installed when I installed the npm ngrok package. This doesn't work on other OSes.

The extension should kick off a download for the correct binary on the first activation. The ngrok package does have a postinstall download script which this could use or be based on.

Some work for this has been attempted in #5, but I wanted to raise a separate issue to capture this.

start command gives spawn ./ngrok ENOENT: Error

I use the latest version of ngrok-for-vscode as well as vscode itself.

Since yesterday from a sudden, the start command doesn't work. When I checked the logs, it gives the error below.

[2021-03-09 20:33:07.840] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:35:43.610] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:46:12.124] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:46:29.777] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:46:38.233] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:46:56.419] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:46:59.781] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:47:05.254] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:47:22.414] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:52:30.461] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)
[2021-03-09 20:52:35.216] [renderer1] [error] spawn ./ngrok ENOENT: Error: spawn ./ngrok ENOENT
	at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
	at onErrorNT (internal/child_process.js:469:16)
	at processTicksAndRejections (internal/process/task_queues.js:84:21)

Getting an error without detail in start

When I whant to launch ngrok:start and select a port : 3001 for exemple, I get an error :

From command line, ngrok tunnel --label edge=edghts_XXXXXX http://127.0.0.1:3001

All is working perfectly.

Any idea ?

Close ngrok after all tunnels are closed

When all the tunnels are closed, the ngrok process continues to run.

It would be better to kill the ngrok process once the last tunnel is closed.

The deactivate event currently kills the process too. If the process is already killed, we don't need to kill it again.

There was an error starting your tunnel.

Hello,

just tried your extension which seemed nice, but I can't get it to run.

What I do :

Ctrl+Shift+P
ngrok: start
Fill port number : 8024 for example.

A notification show a message : "There was an error starting your tunnel"

Sorry that I can't give more informations.
Do extensions give log somewhere with more explanations as to what happened?

Start NgRok - Getting error with no much details

I get the below error while starting ngrok.
Version Used: 1.10.0

Extension Logs:
2023-11-04 13:01:47.751 [error] TypeError: Cannot read properties of undefined (reading 'tunnelOptions')
at s.value (c:\Users\Poornachandra M.vscode\extensions\philnash.ngrok-for-vscode-1.10.1\dist\extension.js:1:209464)
at c.z (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:80:1902)
at c.fire (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:80:2119)
at i._fireDidAccept (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:127:114713)
at c.$onDidAccept (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:127:112942)
at i.S (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:134:10827)
at i.Q (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:134:10593)
at i.M (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:134:9683)
at i.L (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:134:8762)
at s.value (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:134:7565)
at c.z (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:80:1902)
at c.fire (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:80:2119)
at m.fire (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:14010)
at s.value (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:153:7902)
at c.z (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:80:1902)
at c.fire (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:80:2119)
at m.fire (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:96:14010)
at MessagePortMain. (c:\Users\Poornachandra M\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:153:6182)
at MessagePortMain.emit (node:events:513:28)
at MessagePortMain._internalPort.emit (node:electron/js2c/utility_init:2:367)

How can I use w/ TLS, a subdomain, and set my own port?

Hello,

I am a pro plan user of ngrok which allows me to have "End-to-End TLS Tunnels".

When I fire up ngrok to work on a project, this is the command I run from Windows Terminal (or PowerShell, or CMD)

ngrok tls -subdomain=mysubdomainname 8000

I don't see how I can call ngrok using your extension and pass along those settings.
Is it possible?
If so, can you please let me know how?

Thank you.

Bundle extension for performance

When publishing the extension, vsce tells me:

For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension

Should look into this.

Host header rewrite

I get a Invalid Host header on start which is resolved by rewriting the header. It would be nice if this could be done from this extension. Here is an example
ngrok http --host-header=rewrite 8080

Cannot set the port from the beginning...

Feature request: start/stop with arguments from other extensions

I was wondering if it could be possible to invoke the start/stop commands provided by this extension with arguments from other extensions.

I'm currently developing an extension for starting local Kubernetes clusters with the help of K3D. I think vscode.commands.executeCommand("ngrok-for-vscode.start") could be used for invoking the start command, but I would like to pass the local IP and port as arguments. I was wondering if this could be possible now or if it could be possible to add this feature in the future...

Way to Start Multiple Tunnels Simultaneously

I'm getting an error in the extension when I try and start a tunnel when another tunnel is running. Is there a way to start multiple tunnels at once with the extension?

Accept relative/default config paths

Currently, the config path has to be absolute. If I want to use ngrok for several projects that means adding a (likely very similar) path for each project.

Instead, I'd like to either set a global config path of, say, './.ngrok.yaml' and have it be resolved per workspace to ${rootPath}/.ngrok.yaml or have a built-in default for a config file in the workspace root. Another alternative would be to parse variables like ${rootPath}, which would also allow for a global setting.

I wouldn't mind contributing a PR once one or more preferred solutions have been decided on.

Make a way to copy the ngrok URL after launch

https://twitter.com/qborreda/status/1250056364484956164

Tunnel doesn't start, no feedback

Hi Phil! Thanks for making this extension available -- I'm a fan of ngrok and VSC, so putting'em together seems like a great idea.

I just installed the extension and I'm afraid when I run ngrok: start I get absolutely no indication of anything happening. The command palette just goes away and that's it.

Versions:

• VSC: 1.44.1
• ngrok: 2.3.35
• ngrok for VSCode: 1.1.0

I do have a tunnel defined in my ngrok config file and have given the extension the path to the config file. I've confirmed that I can run the tunnel from the command line. I do get error messages if I put a malformed path to the config file. Running ngrok: dashboard from the command palette gives me an error that ngrok isn't running.

Any ideas?

Continuous Integration

It would be nice to have CI configured for the project using Actions either Azure Pipelines, so there is automating testing and building in place.

Example configurations: https://code.visualstudio.com/api/working-with-extensions/continuous-integration

Of course I can offer my help.

No option to create TCP tunnel

I see we are only able to create HTTP tunnel, but there is no option for a TCP one.
Can someone please confirm.

Using this extension inside a devcontainer

Hello,

I am using VSCode with Remote Containers : https://code.visualstudio.com/docs/remote/containers.

It seems that this extension is not working in this condition: The download of ngrok works fine but the ngrok: set auth token command seems to do nothing. Config file ngrok.yml is not created.

The workaround I have found is to manually set it by using :

root ➜ ~/.../extensions/philnash.ngrok-for-vscode-1.9.2/dist/bin $ ./ngrok authtoken <mytoken>
Authtoken saved to configuration file: /root/.ngrok2/ngrok.yml

But this is really not the way I should do it.

Any idea ? Glad to help if you need logs or something.

Update to ngrok3?

This extension uses ngrok version 2 which will be phased out of use on January 15th, 2024.

Ngrok now recommends using version 3.2 as the minimum version.

Is there any plan to update this extension to use ngrok version 3.2?

command not found

some issue with extension.

Can't update ngrok binary

I've tried so many things to get ngrok working through VSCode for a python API...

I installed the extensions and its giving me Can't update ngrok binary. The extension may not work correctly. and its not starting any ngrok tunnel...

Ngrok binary won't download

Hello,

Thanks for this extension. After activating this extension and restarting VSCode, I get the error:

Can't update ngrok binary. The extension may not work correctly.

Upon further inspection, in the debug logs, I get:

When I ll into the extension directory, I notice that the bin directory is missing. If I manually create this directory after installation, but before doing a ngrok start command (which kicks off the binary download), and THEN do ngrok start, it works!

Not sure why the bin directory is missing upon installation. I even completely wiped the extension directory and did a reinstallation and the same thing occurred.

ENV NOTES:

• OSX 11.5.2
• VS Code 1.60.0
• Extension version: 1.9.1

Don't show config error if the default config isn't found

If there's no config, it's ok!

https://github.com/philnash/ngrok-for-vscode/blob/master/src/ngrok/index.ts#L71-L73

Never starts my tunnel

I'm on a mac, arm64, latest vscode, latest ngrok, latest everything :)

Every time I run ngrok start, I get zero feedback. I have a config file in place, so I get the dropdown with my tunnels, but they don't start and it doesn't error. I've tried with both one and two tunnels in my config file and a tunnel never starts. But when I head over to my terminal, I check my procs and I see this:

/Users/skadz/.vscode/extensions/philnash.ngrok-for-vscode-1.10.1/dist/bin/ngrok start --none --log=stdout --config=/Users/skadz/Desktop/skadz-ngrok.yml

So, it looks like it TRIED to start, but didn't select a tunnel to start? The strange part to me is the --none, as it seems like its saying I did not select a tunnel. I have tried clicking, typing the whole name in, just hitting enter on the one that is selected, but this is the behavior I have seen every time.

I have tried enabling and disabling, restarting vscode, reloading vscode, but always with the same results.

My config file is rather basic (and it seem like the extension can parse it because I see the tunnels in the dropdown):

version: "2"
authtoken: AnAuthToken
region: us
web_addr: localhost:8888
tunnels:
  machine1:
    proto: http
    addr: 8000
    hostname: host1.ngrok.io
  laptop:
    proto: http
    addr: 8000
    hostname: host2.ngrok.io

Any help is appreciated. I'm happy to help debug too, just tell me the steps.