Tunnelling your local WordPress website

So you have a local WordPress website you want to show to your client? Or maybe you want to quickly test something on other devices. Here I present three (free) services that allow you to forward your local website to the world. For these examples, I’ll consider my local website being served at http://mywebsite.test on port 80.

localtunnel

First, I’ll start with localtunnel because it’s the one I use the most (when it works :)) and it allows defining a custom subdomain. This is very convenient if you want to have one subdomain that you can always quickly share, or access from your browser history. For installation details, visit https://github.com/localtunnel/localtunnel .

lt --local-host=mywebsite.test --port=80 --subdomain=mysubdomain

By using this command, localtunnel will expose the website http://mywebsite.test on port 80 at the following addresses: https://mysubdomain.loca.lt and http://mysubdomain.loca.lt . I use the second domain to avoid the issue with serving content with mixed protocols (assets will be blocked, so you won’t see a proper version of your page).

Additionally, in wp-config.php I have the following code:

$tunnel_host = 'mysubdomain.loca.lt';

if ( isset( $_SERVER[ 'HTTP_X_FORWARDED_HOST' ] ) && $_SERVER[ 'HTTP_X_FORWARDED_HOST' ] === $tunnel_host ) {
  define( "WP_SITEURL", 'http://' . $tunnel_host );
  define( "WP_HOME", 'http://' . $tunnel_host );
} else {
  define( "WP_SITEURL", 'http://mywebsite.test' );
  define( "WP_HOME", 'http://mywebsite.test' );
}

This will help WordPress dynamically provide the URLs based on the current host address being accessed. If you’re still having issues with the URLs, you may find that the plugin “Relative URL”, which you can download from the WordPress plugin repository, can help fix the URLs. If that still doesn’t help, because some plugins like to hard-code the URLs, you may write some custom code to capture the output of the response, and run a str_replace to fix the problematic URLs.

TryCloudflare (Cloudflare tunnels)

Another option is using the (free) TryCloudflare service to create a quick tunnel for exposing your local website. For details on how to install the cloudflared tool, see https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation/ .

cloudflared tunnel --url http://mywebsite.test:80 --http-host-header mywebsite.test

When you run this command, TryCloudflare will generate a random subdomain that you can use, something like https://successful-yoga-mats.trycloudflare.com/ or http://successful-yoga-mats.trycloudflare.com/ . Now, I believe Cloudflare offers a way to use a custom subdomain (or domain) for free for your tunnel address which you may read about here https://developers.cloudflare.com/cloudflare-one/faq/cloudflare-tunnels-faq/ .

ngrok

ngrok is another popular (free) tunnelling service that offers similar functionality. To use this service you’ll need to download and install the ngrok agent on your computer by following the instructions at https://ngrok.com/docs/getting-started . Once you have that set up:

./ngrok http mywebsite.test:80 --host-header=mywebsite.test -subdomain=mysubdomain

ngrok will generate two addresses similarly to the previous services, such as https://mysubdomain.ngrok.io and http://mysubdomain.ngrok.io . When you run this command, you will also be presented with a link to a web interface where you can monitor the incoming requests, which is pretty cool.

If you find a mistake, or if you would like to make suggestions, please leave a comment below.