Developing and designing a custom WordPress site involves getting constant feedback from the client about the progress. If you're creating it on the client's web hosting server on a staging website, sharing it with the client is dead simple. But, for some reason, what if you're developing it on a local machine? How to share it with your remote client? There are several ways to do it. We'll look at one of the most popular methods that's easy to set up and works like charm. All you need is a stable internet connection for it to work. Let's get started and learn to share local WordPress sites with remote clients.
Although developing client sites locally is one of the options, I strongly recommend doing it on the client's web hosting server—right from day one. Sharing local sites should be the last option.
For busy developers with loads of clients, creating a dedicated machine acting as a local web server can ensure your clients can open the website, at will. If not, the method discussed below is your best bet.
Ngrok: A Tool to Facilitate Remote Sharing
We'll use an excellent tool ngrok to share a local WordPress site with remote clients. Even a non-techie can use it for sharing local resources with remote entities.
This tool creates a secure tunnel for your local dev stack. This opens a way for remote computers to access the websites (powered by your local dev stack) running on a local machine.
It's ideal for:
- Sharing local websites for testing and feedback.
- Enabling multiple collaborators to work on a local website.
Prerequisites for Using Ngrok
The requirements for using this tool are dead simple. All you need is a local dev environment for hosting and running a WordPress site. There are several popular options for the same.
- WAMP
- MAMP
- XAMPP
- Laragon
Simply pick one of them and spin up a local instance of a WordPress site. Let's move on and see how to use ngrok for sharing a locally-installed website.
Install and Configure Ngrok
Start with creating an account on the ngrok website. Its 'ngrok for development' free plan is good enough for this use case. First, download and install ngrok on your computer. Depending on the operating system you're using, the process may differ. Here's how to install it.
Installing on Windows
There are two different ways to install ngrok on a Windows machine. Let's take a look at both the methods.
# Installing ngrok through 'Chocolatey'
choco install ngrokThe first method uses the 'Chocolatey' program to install ngrok. Fire the command given above through the command prompt and you're good to go.
In the second method, simply download the 64-bit or 32-bit ngrok.exe file available in zipped form in the account's dashboard. After downloading, unzip and extract the executable in a folder, for example., D:\NGROK\. The executable itself is a completely portable application that runs independently without any dependencies.
Installing on macOS
To install ngrok on a Mac computer, use the following command:
# Installing ngrok through 'Homebrew'
brew install ngrok/ngrok/ngrokAlternatively, you can download the program executable (zipped) from the dashboard. Make sure you download the right one as both Apple Silicon and Intel versions are available.
# Unzip and move the file to the target directory
sudo unzip ~/Downloads/ngrok-v3-stable-darwin.zip -d /usr/local/binAfter downloading, open the terminal and use the command given above to extract and transfer the ngrok executable to the /usr/local/bin directory. This ensures you can run it from any directory on your Mac system.
Installing on Linux
Like Windows and Mac, Linux also supports two different methods to install the ngrok application. The first method is as follows:
# Use 'apt' to install on Debian-based distros
curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
| sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
&& echo "deb https://ngrok-agent.s3.amazonaws.com buster main" \
| sudo tee /etc/apt/sources.list.d/ngrok.list \
&& sudo apt update \
&& sudo apt install ngrokOr, you can download the zipped executable on your Linux machine. Make sure you download the correct compressed archive .tgz file matching the processor architecture of your system. After downloading, fire the following command:
# Extract and transfer the ngrok file to the target directory
sudo tar -xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/binQuite similar to the Mac platform, here too we extract the file into the /usr/local/bin directory to make it available—globally.
Authenticate Your Ngrok Account
Once ngrok is installed on your local machine, it's time to connect it with your account. For that, you need an auth token available in your account's dashboard. Keep it private and do not share it with anyone.
# Use the auth token grabbed from your account
ngrok config add-authtoken d897g983gf98789789bd797fp_3v890fOpen the terminal of your operating system and use the command given above to authenticate and connect with your ngrok account.
The auth token shown above is just a sample. Replace it with the auth token copied from your account's dashboard.
The command to authenticate your ngrok account is the same for all the operating systems. The only thing that'll differ is the auth token used as a parameter at the end of this command.
Start Ngrok and Create a Secure Tunnel
Now that ngrok is installed and configured on your local system, it's time to complete the steps to facilitate sharing of your WordPress site with remote clients.
First of all, start your local dev environment (for example, Laragon) and check if your local WordPress instance is working fine and the website is accessible in the web browser through its local URL.
Let's assume, http://localhost:8080 is the local address of your WordPress site. Here, 8080 is the port number on which the site is accessed. Make sure you know which port number is used by your local WordPress site.
If you are on Windows, open the command prompt and go to the directory containing the ngrok standalone executable. In the case of Linux or macOS, you can be in any directory.
Now use the following command:
# Create a tunnel and expose your local website to the internet
ngrok http http://localhost:8080Replace the local website URL used here with the one you are using on our system. Make sure the port number matches the one used by your WordPress site.
As you can see, ngrok creates a secure tunnel and creates a temporary URL to access the website running on your local system. Simply share this temporary URL with the remote person who wants to access this website.
Any attempt to access the website through the URL generated by ngrok results in the warning page shown in the image above. It simply makes the visitor aware of not sharing sensitive information on the website. Click the Visit Site button to open the WordPress site.
If you want to share the website with selective people, you can add an authentication wall to the tunnel. Here's an example:
ngrok http http://localhost:80 \
--oauth google \
--oauth-allow-email remote.user@gmail.com \
--oauth-allow-domain freshtechtips.comIn this example, the website can be either accessed by the email provided in the --oauth-allow-email parameter or all the email addresses ending with the domain specified in the --oauth-allow-domain parameter. In both cases, a browser-based OAuth authentication process will be executed.
Remember, the website will be accessible by remote machines only if the ngrok service is continuously running in the terminal on your local system. To stop the access, press the Ctrl + C button to terminate or close the secure tunnel.
Conclusion
Ngrok is a quick, secure way to share your local WordPress project with remote clients without the hassle of setting up a full hosting environment. Whether you’re previewing changes, collaborating with others, or debugging your site, Ngrok makes it easy to expose your local site to the web in minutes.
Now, your remote clients or collaborators can access your local WordPress site using a temporary public URL, all without moving your work to a live server.
