Share a Local App Over the Public Network with ngrok and Nanobox

ngrok is an awesome tool that exposes a locally running server to the internet. When combined with Nanobox, you can share your local development apps with others over the public network.

ngrok and Nanobox

Download/Install ngrok & Nanobox

If you haven't already, download and install ngrok. Also, create a free Nanobox account and download the Nanobox installer.

Add a DNS Alias to Your Local App

In order for ngrok to successfully proxy to your local Nanobox dev environment, you need to add a DNS alias to your dev app. You can use whatever domain you want, but I'm just going to use myapp.dev.

From the root of your project directory run:

# add a DNS alias to your local app
nanobox dns add local myapp.dev

Start Your Local App

I'm assuming your project is already configured to work with Nanobox. If it's not, the Nanobox guides will walk you through it.

Pass your app's start command into nanobox run to fire up your dev environment and start your app.

# start your dev environment and run your app
nanobox run start-command

Start ngrok

In another console, start ngrok and pass your DNS alias with the port on which your app listens as a host-header rewrite. For example, my DNS alias is myapp.dev and my app listens on port 3000, the command looks like this:

# start ngrok and forward to your running dev app
ngrok http -host-header=rewrite myapp.dev:3000

In the ngrok output, you'll see the ngrok subdomain (http://xxxxxxx.ngrok.io) that forwards to your running app. You can also setup custom ngrok subdomains or white-label domains.

Session Status      online                                              
Version             2.2.4                                              
Region              United States (us)                                
Web Interface       http://127.0.0.1:4040                                              
Forwarding          http://xxxxxxx.ngrok.io -> myapp.dev:3000                  
Forwarding          https://xxxxxxx.ngrok.io -> myapp.dev:3000

That's it! Use the provided url to access your locally running app from the public network.

Posted in Nanobox, ngrok