I’m a huge fan of Ngrok, a tool to create a secure tunnel to your laptop. It is brilliant for testing, well, anything running locally really. Someone asked me about my setup recently and I’m using a couple of config files to keep things quick and consistent, so I thought I’d share here what I shared with them.

You can use a central config file for ngrok, and/or specific config files for each project. I use both, so I’ll show you around my setup.

Main config file

The main config file for ngrok is probably the right place for most settings. When you log in, your auth token is stored here (note to self: now remove the auth tokens from the code examples in this post!). I also have my region set to eu since that’s where my servers and I are normally located; the default value here is us.

Also in this config file, I have two tunnels defined:

authtoken: Redacted
region: eu

tunnels:
    ljnexmo:
        proto: http
        addr: 8080
        hostname: ljnexmo.eu.ngrok.io
    test:
        proto: http
        addr: 8080
        subdomain: f85c1a3f

I do have tunnels configured here but I don’t always use these with ngrok. I work in multiple serverside languages and their “usual” port numbers all differ, so I’m as likely to start a tunnel with ngrok http --subdomain=f85c1a3f 3000 as to use the tunnels. The tunnel configs are very handy though, especially for a setup that needs more settings than these, or that you will need to use over and over.

A great example of a tunnel I’ve used a lot is the one in all the example for my book PHP Web Services. Books typically take months to complete and then at review stage people ask for screenshots/examples to be updated … so you must always be able to recreate individual parts of an example, or risk re-making the whole thing! Ngrok config files can only be in one region or another, so I used a separate config file for this which lives in the same directory as the code examples. It looks like this:

region: us

tunnels:
    phpwebservices:
        proto: http
        addr: 8080
        subdomain: 29baf15

In real life using per-project config like this is super helpful as it keeps things together especially if different projects want to take advantage of different regions.

To use this tunnel, my command looks like this:

ngrok start --config=ngrok-phpws.yml phpwebservices

I do tend to reserve the domains I’m using, since I have a paid account with ngrok. You can see a few places where I started using a domain and then realised I’d better reserve it!

Pro-tip: Even without a paid account you can request a specific subdomain when starting your tunnel. If it’s available then you can use it – this is super helpful when restarting tunnels during a project as it saves updating URLs everywhere!