Skip to content

Instantly share code, notes, and snippets.

@Choonster
Last active November 14, 2021 03:10
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save Choonster/fae5a92182c8ac58e5d61e96eb0ab081 to your computer and use it in GitHub Desktop.
Save Choonster/fae5a92182c8ac58e5d61e96eb0ab081 to your computer and use it in GitHub Desktop.
How to debug Node.js web applications running on Heroku using ngrok

Debugging Node.js web applications running on Heroku using ngrok

Introduction

Heroku only allows each dyno to send and receive external network traffic on a single port, which means you can't simply run node --debug server.js and attach your debugger to your-app.herokuapp.com:5858.

To work around this, you can use ngrok and Heroku ngrok Buildpack to tunnel to the debugger's port and access it externally.

This guide assumes your application has already been set up. If it hasn't, read Heroku's Node.js Documentaion to get started.

Setup

Step 1: Add Heroku ngrok Buildpack

Add the Heroku ngrok Buildpack to your application by following the author's instructions.

Make sure to set the AUX_PORT config value to the local port you want the debugger to run on and NGROK_COMMAND to tcp.

You can also set NGROK_OPTS to pass additional options to ngrok.

Step 2: Create the start script

Create a Bash script that will start your application in debug or release mode as appropriate. Make sure your script is marked as executable, this can be done using chmod +x start.sh on Unix-like OSs or git add --chmod=+x -- start.sh on Windows.

For debug mode, prefix the command with with_ngrok and add the --debug argument to node.

For example:

#!/bin/bash

if [ "$ENABLE_DEBUG" == "true" ]; then
	echo "Starting with debugger on port $AUX_PORT"
	exec with_ngrok node --debug=$AUX_PORT server.js
else
	echo "Starting without debugger"
	exec node server.js
fi

This allows you to start or stop debugging your application by changing the ENABLE_DEBUGGING config value to true or false with the heroku config:set command.

Step 3: Use the start script

In your Procfile or package.json, run the start script to start the application.

An example Procfile:

web: ./start.sh
worker: start-worker-process

An example package.json:

{
	"name": "my-application",
	"author": "Me",

	...

	"scripts": {
		"start": "./start.sh"
	},
	"engines": {
		"node": "0.12.x",
		"npm": "3.1.x"
	}
}

Debugging

Step 1: Find your ngrok URL

If you're not using a reserved domain or TCP address, you'll need to use the ngrok Dashboard to find the URL of your application's TCP tunnel. This will be something like tcp://0.tcp.ngrok.io:18082.

Once you have your ngrok URL, you can attach your debugger to it.

Step 2: Attach your debugger

Attach your debugger to the ngrok URL by following its documentation.

If you're using Node.js Tools for Visual Studio, follow these instructions.

Step 3: Debug!

Debug your application as normal.

@agarbund
Copy link

agarbund commented Sep 5, 2018

Great stuff @Choonster, thanks for it. There is a small mistake: start.sh script is using ENABLE_DEBUG env variable, however docs later mention ENABLE_DEBUGGING

@david1542
Copy link

Hi there! I've done all the steps properly and I have a ngrok tcp url like you mentioned. Now I don't know how to configure my visual studio code to attach to this process. Here is my configuration:

{ "type": "node", "request": "attach", "name": "Attach to Remote", "address": "tcp://0.tcp.ngrok.io:10110", "port": 9090, },

Everytime I try to run this configuration, I get the following error:
https://i.gyazo.com/2cc16c2a98c62c1948644677dbd295c4.png

I could really use some help on this guys :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment