, , ,
Share On

Claps upto fifty times for each post.

0


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


Leave a Reply

Your email address will not be published. Required fields are marked *

AKM Elias Avatar

Click to follow this author!

4 Followers


Posts by this author

Share your local WordPress site.

24 February 2024

Dynamic programming! A blog generated by ChatGPT

08 December 2022

Dynamic programming part – 1(Memoization)

30 October 2022

Recursion & Recursive Solution

12 September 2022

Programming and The Ad Hoc problems.

28 August 2022


Posts related this

Share your local WordPress site.

AKM Elias

24 February 2024

Make WordPress plugin using Vue with Vite build

Hasanuzzaman

09 October 2023

Dynamic programming part – 1(Memoization)

AKM Elias

30 October 2022

Let’s install Laravel valet on ubuntu

hasanmisbah

27 September 2022

GitHub SSH key setup takes Five minutes.

Hasanuzzaman

14 September 2022