Setup Ngrok with LocalWP for Public Access

Setup Ngrok with LocalWP allows you to share your local WordPress site with anyone, making it easier to collaborate, test, and develop in a real-world environment. Whether you are developing a site locally and need external access or testing webhooks, Ngrok is an essential tool.

This guide will walk you through the installation, authentication, port configuration, and sharing of your LocalWP site using Ngrok.

Installing Ngrok on Windows, Mac, and Linux

Before you can use Ngrok with LocalWP, you need to install it on your operating system.

Windows Installation (Using Chocolatey)

On Windows, run PowerShell as an administrator and install Ngrok via Chocolatey:

choco install ngrok

After installation, verify it using:

ngrok --version

Mac Installation (Using Homebrew)

If you are on a Mac, install Ngrok using Homebrew:

brew install ngrok/ngrok/ngrok

Once installed, confirm it by running:

ngrok --version

Linux Installation (Using cURL)

For Linux users, use the following cURL command to download Ngrok:

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc

Then, install using:

sudo apt update && sudo apt install ngrok

Verify installation with:

ngrok --version

Now that Ngrok is installed, you need to authenticate your account.

Creating and Authenticating Ngrok

1. Sign Up for an Ngrok Account
   • Visit Ngrok and create an account.
   • After signing up, go to your dashboard and copy your authentication token.
2. Authenticate Ngrok on Your Machine
   • Run the following command in your terminal (replace YOUR_AUTH_TOKEN with the one from your Ngrok account):
   ngrok authtoken YOUR_AUTH_TOKEN

This step links your local Ngrok installation to your Ngrok account and is required before running tunnels.

Finding the Port for LocalWP

LocalWP (Local by Flywheel) assigns random ports to your WordPress site. To make Ngrok work, you need to find the correct port number.

1. Locate the LocalWP Site Configuration File
   • Open your LocalWP installation directory and navigate to: C:\Users\YourName\AppData\Roaming\Local\sites.json (Windows) ~/.config/Local/sites.json (Mac/Linux)
   • Open sites.json in a text editor.
2. Find the Port Assigned to Your Site
   • Look for the section that contains the port number under phpVersion and environment.
   • You should see something like this: { "id": "site-id", "name": "my-localwp-site", "ports": { "80": 10005 } }
   • The port number (e.g., 10005) is the one Ngrok needs to expose.

Adding Ngrok URLs to wp-config.php

Since WordPress saves the site URL in the database, you need to update the configuration to match Ngrok’s temporary URL.

1. Open your site’s wp-config.php file.
2. Add the following lines, replacing your-ngrok-url with the Ngrok public URL: define('WP_HOME', 'https://your-ngrok-url.ngrok.io'); define('WP_SITEURL', 'https://your-ngrok-url.ngrok.io');
3. Save the file and restart your LocalWP site.

Now, WordPress will load correctly when accessed via Ngrok.

Running Ngrok and Sharing Your LocalWP Site

With everything set up, you can now run Ngrok and start sharing your site.

1. Open a terminal or command prompt.
2. Run Ngrok with the correct port: ngrok http 10005 --host-header=inblocks.local Replace 10005 with your LocalWP site’s port.
3. You will see output similar to this: Forwarding https://randomid.ngrok.io -> http://localhost:10005
4. Copy the Ngrok public URL and share it with clients or testers.

Upgrading to Ngrok’s Paid Plan for Custom Domains

By default, Ngrok assigns random URLs that change each time you restart it. If you want to use a static or custom subdomain, you need the paid version ($8/month).

Setting Up a Static Ngrok URL

After upgrading to a Pro plan, run:

ngrok http 10005 --host-header=inblocks.local --subdomain=mycustomurl

This will create:

https://mycustomurl.ngrok.io

This static URL will remain the same for future sessions.

Final Thoughts

Using Ngrok with LocalWP makes it easy to share your local WordPress site with team members, clients, or test webhooks. The free version works well for temporary links, but upgrading to Ngrok Pro ($8/month) allows you to use static and custom domains.

By following the steps above, you can install, configure, and run Ngrok with LocalWP, making WordPress development and testing much more accessible.