Share your local WordPress site.

A local host-run site does not allow us to share our development progress with others or listen to webhooks while we are working on it. Webhooks, in particular, require a reachable site link to transmit the response.

We can share our local WordPress site easily with Ngrok. Let’s dive into this

Install Ngrok (On Mac)

brew install ngrok/ngrok/ngrok

Run the above command on the terminal, It will install Ngrok on your system.

ngrok config add-authtoken your-auth-token

Run this command (Replace ‘your-auth-token’) with your actual auth-token Create an Ngrok account first. You will find it on your Ngrok Dashboard->Your AuthToken section

Configure your WordPress Site

At your wp-config.php file, paste these three lines, and save the file

$_SERVER['HTTPS'] = 'on'; // 
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']); 
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

Share your site

If your site is listening on port http://localhost:8080, run:

ngrok http http://localhost:8080
or
ngrok http 80 // will forward the site ruuning on port 80
or
ngrok http https://example.com

Now your local site running on some port will be forwarded to a shareable link.

I run the command ngrok http https:wordpress.test in my case, where https:wordpress.test is my local WordPress development site.

Then you will see something like this below.

You can see Ngrok forwarded my http://wordpress.test:80 to https://40d8-27-147-206-172.ngrok-free.app , now anybody can access your local WordPress site with the forwarded link, and you can set up webhooks with the newly created link.

Issues you might face

This issue occurs when we try to forward a port where no site is running; for example, at localhost:3000, nothing is running. get the correct port and run the command again

404 not found issue

You might get a 404 not found after visiting the forwarded link, in that case, make sure you are trying to get the correct port by accessing the nginx config file. Still, if you are not able to find the correct port, you can run this command.

ngrok http --host-header=rewrite mysite.com
or
ngrok http --host-header=rewrite mysite.com:80
// where mysite.com - your domain name. :80 - your port.

It will solve the above issues.

I’ll see you on another blog. Happy developing until then. You can reach me here