Lando, WordPress, and ngrok…oh my

I’ve been using Lando for more than 2 years now and have grown to love it. Really, it gives me the power of Docker Compose without having to learn all about Docker Compose.

The one thing that I’ve been missing, though, with Lando is a way to share my work with others. It’s one thing to quickly spin up a local dev environment and code up a new WordPress plugin. It’s quite another thing to spin up a staging area somewhere so I can install the plugin and show it.

Especially if it’s a work in progress and not yet ready for full-blown testing. A few months ago, one of my best friends, Keith Casey, went to work for a company named ngrok, and just hearing the name made a lightbulb go off in my head. I had totally forgotten about ngrok until he mentioned it, but it is the perfect solution for this problem.

ngrok is the swiss army knife of building tunnels. Whether you want to share your dev environment like I do, test out webhooks, or build ssh tunnels, it’s the tool for the job. (Honestly, that’s just scratching the surface of what ngrok is capable of, but we don’t have time to go into it all.)

For now, let’s just make these three great tools play nice together so we can easily share local development environments.

ngrok

First, you need ngrok, and you will need a ngrok account. The free plan will do for most of us; however, if you are doing this professionally, I highly recommend the Basic plan as it gives you nice things like being able to use your own domain names. You can find out more about their plans and pricing on the ngrok pricing page.

Create an account and then download the version of ngrok for your operating system. I grabbed the Linux version since I want it installed on WSL. I’m pretty sure this will also work on macOS and I know it will work on Linux.

Once you’ve downloaded it, install it. For me this meant un-tarring the file and moving the resulting binary into /usr/local/bin.

You will also need to connect your local install to your account. You do that with the authtoken command of ngrok.

$ ngrok authtoken your_token_goes_here

Don’t worry; finding your token is dead simple; your token, along with the complete command, is on the ngrok setup page once you are logged in. All you have to do is copy and paste it. (it’s very developer-friendly and borders on management-friendly.)

Congratulations, ngrok is now ready to go.

WordPress

WordPress is a fickle beast at times, and this is one of those times. For everything to work correctly with ngrok, not only do we need to tell ngrok to pass us a host header, we also have to make sure WordPress deals with it correctly. Since the traffic won’t technically be coming from your .lndo.site domain, we need to make sure that WordPress will still work.

The easiest way I found to do this is with an abandoned plugin, WP-Ngrok-Local. There are a couple of plugins in the WordPress repo, but I had difficulty with them, and this one worked out of the box. Still, since it’s not in the plugin repository, you will have to do a little more work to get it installed. The easiest way is to simply clone the repo into your plugins dir. (if that statement didn’t make sense, you are reading the wrong article.)

Once you have that plugin installed and activated, you are ready to for the next step.

Lando

I assume you have a Lando project already spun up with WordPress installed and running. If not, check out Making Lando work inside WSL2 to get Lando up and running inside WSL. Then check out Lando’s docs on recipes to spin up a WordPress install. If you want to clone an existing WordPress site into a Lando project, check out my project wpLandoClone, which gives you the tools to do that.

Once you have a working WordPress inside Lando with the plugin listed above installed and activated, we need one more piece of the puzzle, share.sh.

share.sh is a simple bash script that will pull the needed data out of lando info, parse it, and use it to fire up ngrok.

#!/usr/bin/env bash
set -eo pipefail

#
# Share a Lando based WordPress website using ngrok
# Cal Evans <[email protected]>
#
# This script must be run OUTSIDE of the Lando environment but in the Lando dir.
# It uses the lando info command which is not available inside of the lando container.
#
# This is designed to work with a WordPress recipie. To make WordPress play nice
# you have to install the plugin at https://github.com/jonathanbardo/WP-Ngrok-Local
# Once you have that installed and activated, run this script and then visit
# the https URL that it shows.
#
# When you are done, press CTRL+C to exit.
#

#
# Check for sane environment
#
if ! command -v ngrok &> /dev/null
then
  echo ngrok is not installed.
  echo Visit https://ngrok.com/download and download the version for your OS.
  exit 1
fi

if ! command -v jq &> /dev/null
then
  echo jq is not installed.
  echo Visit https://stedolan.github.io/jq/download/ and download the version for your OS.
  echo If you have one, you can usually use your package manager to install it.
  exit 2
fi

# Get the https url from lando
#
FULL_SITE_NAME=`lando info --format json | jq '.[0].urls[-1]' | tr '"' ' '`

#
# Strip off the protocol
#
SITE_NAME=`echo $FULL_SITE_NAME | awk -F '//' {'print $2'}`
SITE_NAME=${SITE_NAME::-1}

#
# Call ngrok
#
ngrok http -host-header=$SITE_NAME $FULL_SITE_NAME

Download share.sh and put it somewhere in your Lando project’s directory. I usually have a directory /scripts just for things like this.

Then from outside of the Lando container, execute share.sh. If everything is in place, it will do the rest.

NOTE: share.sh will not work from inside a Lando container. ngrok will. You can install ngrok inside the container and manually run it and it works great. share.sh however, relies on the lando info command, so it only work from the outside.

The heart of share.sh is this line.

ngrok http -host-header=$SITE_NAME $FULL_SITE_NAME

When the variables are expanded it will look something like this:

ngrok http -host-header=dev.ucdc.lndo.site https://dev.ucdc.lndo.site

That’s the magic. Run it and you will get a screen that looks something like this.

fClose()

This solution works and it’s not too much trouble. On one of my project, I have the command to download and then activate the plugin built into my .lando.yml file so that it’s automatic any time I (re)build the project.

I did try adding it to the tooling section of the .lando.yml file. This did not work. I didn’t spend the time to investigate to figure out why it did not work; I just found out it did not work.

Honestly, the only way this could be better is if it were part of Lando itself. Lando has a lando share command, but all it does is tell you that localtunnel.me has discontinued its free service. My next Lando project is to dig into the share plugin and see if I can make it work with ngrok. I’m betting I can.

Also Published Here