---
title: "How to access localhost anywhere with ngrok"
author: "Yaroslav Shmarov"
date: "2024-02-12"
canonical_url: "https://blog.superails.com/ngrok"
markdown_url: "https://blog.superails.com/ngrok.md"
description: "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."
tags: ["ngrok"]
license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL."
video_url: "https://www.youtube.com/watch?v=veRsh8TYEDw"
---

# How to access localhost anywhere with ngrok

[Ngrok](https://ngrok.com/) 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](https://dashboard.ngrok.com/get-started/setup/macos).

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

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

![run ngrok](https://blog.superails.com/assets/images/ngrok-run.png)

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](https://blog.superails.com/assets/images/ngrok-you-are-about-to-visit.png)

When you click "Visit site" in a Rails app, you might get a **`blocked hosts` error**

![Rails blocked hosts error](https://blog.superails.com/assets/images/ngrok-blocked-hosts.png)

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

```diff
# 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](https://blog.superails.com/assets/images/ngrok-public-onetime-url.png)

You can also visit `http://127.0.0.1:4040/inspect/http` to view the "Inspector tool"

![ngrok inspector](https://blog.superails.com/assets/images/ngrok-inspector.png)

### 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):

```ruby
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](https://blog.superails.com/assets/images/ngrok-edge-create.png)

Run the edge

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

Visit the URL

![ngrok edge run](https://blog.superails.com/assets/images/ngrok-edge-run.png)

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](https://www.localcan.com/) over ngrok. Nicer interface. @aviflombaum

> Have you considered alternatives such as [zrok.io](https://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](https://theboroer.github.io/localtunnel-www/)