Ngrok gives a public URL to your localhost. This is useful for testing from other devices, working with external APIs that require a real URL.

First, follow the official installation guide.

After installation, you can run ngrok in one tab, and your rails server or bin/dev in a second tab.

# run ngrok
ngrok http http://localhost:3000
# or
ngrok http 3000
# rails server in another tab
rails s

run ngrok

See how it gave me a public URL https://7631-2a01-cb1d-6cf-cd00-e5f4-7f3f-31e5-fb6f.ngrok-free.app. This URL will be valid until you stop the ngrok runtime. If you restart, you will be given a different URL.

When you visit the URL, you will get the “Welcome screen”.

Ngrok welcome screen

When you click “Visit site” in a Rails app, you might get a blocked hosts error

Rails blocked hosts error

Whitelist the current public URL, or better yet, whitelist any URL for development environment:

# config/environments/development.rb
require "active_support/core_ext/integer/time"

Rails.application.configure do
# whitelist current URL
+  config.hosts < "https://7631-2a01-cb1d-6cf-cd00-e5f4-7f3f-31e5-fb6f.ngrok-free.app"
# whitelist any URL
+  config.hosts = nil

Hooray, you have a public URL for your localhost!

ngrok works

You can also visit http://127.0.0.1:4040/inspect/http to view the “Inspector tool”

ngrok inspector

Get rid of ERR_NGROK_6024 - You are about to visit “Welcome screen” #

😡 I tried running these in the console, but it did not help me (I still see the Welcome screen when opening in a new browser):

curl -H "ngrok-skip-browser-warning: true" https://7631-2a01-cb1d-6cf-cd00-e5f4-7f3f-31e5-fb6f.ngrok-free.app
curl -H "User-Agent: MyCustomUserAgent123" https://7631-2a01-cb1d-6cf-cd00-e5f4-7f3f-31e5-fb6f.ngrok-free.app
ngrok http 3000 --request-header-add='ngrok-skip-browser-warning: true'

Instead, the Ngrok Edges feature solved the problem for me:

Create an edge - a persistent URL:

ngrok create edge

Run the edge

ngrok tunnel --label edge=edghts_2cG9u6S5VTParQWSRDd1l5RnrAi http://localhost:3000
# or
ngrok tunnel --label edge=edghts_2cG9u6S5VTParQWSRDd1l5RnrAi 3000

Visit the URL

ngrok edge run

Works!

💡 I like to add ngrok to the Procfile.dev when I start development. @candland

Alternative tools (I did not try them yet): #

Started using https://localcan.com www.localcan.com over ngrok. Nicer interface. @aviflombaum

Have you considered alternatives such as zrok.io? It’s open source and has a more generous free SaaS tier. @ThePGriffiths

If you own a domain, Cloudflare Tunnel is also really good! @bjarke_vad

theboroer.github.io/localtunnel-www