I’ve been using 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. Lando 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, , 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 until he mentioned it, but it is the perfect solution for this problem. Keith Casey ngrok 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 command of ngrok. authtoken $ 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 domain, we need to make sure that WordPress will still work. .lndo.site The easiest way I found to do this is with an abandoned plugin, . 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.) WP-Ngrok-Local 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 to get Lando up and running inside WSL. Then check out to spin up a WordPress install. If you want to clone an existing WordPress site into a Lando project, check out my project which gives you the tools to do that. Making Lando work inside WSL2 Lando’s docs on recipes wpLandoClone , 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 is a simple bash script that will pull the needed data out of , parse it, and use it to fire up ngrok. share.sh lando info #!/usr/bin/env bash
set -eo pipefail

#
# Share a Lando based WordPress website using ngrok
# Cal Evans <cal@calevans.com>
#
# 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 and put it somewhere in your Lando project’s directory. I usually have a directory just for things like this. share.sh /scripts Then from of the Lando container, execute . If everything is in place, it will do the rest. outside share.sh NOTE: 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. however, relies on the command, so it only work from the outside. share.sh share.sh lando info The heart of is this line. share.sh 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 file so that it’s automatic any time I (re)build the project. .lando.yml I did try adding it to the section of the 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. tooling .lando.yml Honestly, the only way this could be better is if it were part of Lando itself. Lando has a command, but all it does is tell you that 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. lando share localtunnel.me Also Published Here

2022 - HackerNoon Contributor of the Year - Career Development

2022 - HackerNoon Contributor of the Year - Hiring

2022 - HackerNoon Contributor of the Year - Job Hunting

2022 - HackerNoon Contributor of the Year - Personal Development

2022 - HackerNoon Contributor of the Year - Psychology

2022 - HackerNoon Contributor of the Year - Self Improvement

2022 - HackerNoon Contributor of the Year - Software Architecture

Check out all the great developer jobs at Gun.io!

Nominated for 2022 - HackerNoon Contributor of the Year - Career Development

Nominated for 2022 - HackerNoon Contributor of the Year - Psychology

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Nominated for 2022 - HackerNoon Contributor of the Year - Self Improvement

Nominated for 2022 - HackerNoon Contributor of the Year - Hiring

Nominated for 2022 - HackerNoon Contributor of the Year - Engineering Management

Lando, WordPress, and ngrok…oh my

Too Long; Didn't Read

Company Mentioned

@cal.evans

RELATED STORIES