How to easily make Wordpress & WooCommerce work with ngrok

Ngrok is a super useful CLI tool which enables you to expose your localhost HTTP servers to an internet-facing HTTPS endpoint, for free! You can get it here: https://ngrok.com/.

I’ve been struggling to find a good, short tutorial on how to make it work properly with my local WooCommerce store, so hopefully you will find this helpful:

1. Install the ‘Relative URL’ plugin

First off, make sure that your Wordpress website issues relative URLs by installing this plugin: Relative URL.

2. Make WP serve itself via your tunneled hostname

Add the following lines at the end of your wp-config.php file:

1
2
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

3. Instruct ngrok to rewrite the host header

Add --host-header=rewrite to your ngrok command. For example:

1
ngrok http --host-header=rewrite http://localhost:8080

Done 🎉

P.S: If you’re a WooCommerce store owner and would like to easily sync it with your Google Sheets, check-out our quick guide on how to do it.