Custom Live Link Solution (NGROK Reserved domains)

Hi Community,

After some try and catch i found a solution to get Custom Live Links (NGROK Reserved domains).

Requirements

  • NGROK Basic/Pro/Business (paid) plan
    – Setup reserved subdomains with your choise of region ( i used EU )
    ---- ngrok - Online in One Line
    ----- Example reserved URL: flywheel-local-test.eu.ngrok.io
  • Download NGROK and install
  • Don’t use Live Link in FlyWheel Local
  • Install WP plugin (ONLY IN LOCAL): Relative URL
    Relative URL – WordPress plugin | WordPress.org
  • You must ensure that Wordpress understands that it is meant to serve itself from your tunneled hostname. You can configure Wordpress to do that by modifying your wp-config to include the following lines:
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

Steps Todo

  1. Install NGROK ngrok - download and follow the steps on this page ( install your auth token)
  2. After you installed NGROK, you have a configuration file called ngrok.yml its somewere here C:\Users\XXXX\.ngrok2\
  3. We need to create for each site in your “FlyWheel Local” a Tunnel configurion in this file ngrok.yml
  4. My file contains the following global settings

authtoken: [YOUR AUTHTOKEN]
region: eu

It’s important you setup here the correct region, otherwise it will assign a wrong URL.

After region you will setup the Tunnels for each site in your local, i created an example with the above settings.
Each tunnel have a unique name, in my case it is flywheeltest and flywheeltest-https, as you can see you need to setup 2 tunnels per site, HTTP and HTTPS. Always use uniquename-https to connect these 2 tunnels together.

host_header is the local url thats also in your flywheel site.
subdomain is the reserved subdomain in ngrok - Online in One Line ( so only the subdomain and dont include here region and .ngrok.io, in my case it is: flywheel-local-test

authtoken: [YOUR AUTHTOKEN]
region: eu
tunnels:
flywheeltest:
addr: 80
proto: http
host_header: dev.flywheel-local-test.local
subdomain: flywheel-local-test
flywheeltest-https:
addr: 443
proto: tls
host_header: dev.flywheel-local-test.local
subdomain: flywheel-local-test

With the above configuration we can start a LiveLink for 1 site but manual and not through Flywheel Local but outside of it. If you want more sites add more tunnels inside the “tunnels:” and add HTTP and HTTPS for each site.

Now the last part is how do you start a livelink for this site. I created a .bat, so i not have to write each the command to start a NGROK livelink, this is usefull if you have multiple sites.

My .bat file contains following small code:

@ECHO OFF
ECHO Starting NGROK Connection for flywheeltest
“C:\Users\XXX\Downloads\ngrok-stable-windows-amd64\ngrok.exe” start flywheeltest
PAUSE

Change the path to your downloaded ngrok.exe path and save it somewere. Create for each site a .bat file and change the last part after start (flywheeltest) to the correct tunnel unqiue name.

Now start your website in Flywheel Local and open the .bat file and it will start a CMD Prompt with the NGROK information and you will see something like this.

If you close this prompt, the livelink will be down :slight_smile:, if you open again the .bat file it will be back up again. If you have basic you can start 1 NGROK process, if you have pro or business you can open 2 NGROK processes.

Hopefully this helped you guys!

More information about configuration:

2 Likes