Andrew Welch · Insights · #devops #homestead #sharing

Published , updated · 5 min read ·


Please consider 🎗 sponsoring me 🎗 to keep writing articles like this.

Mobile Testing & Local Dev Sharing with Homestead

Home­stead is a fan­tas­tic local dev envi­ron­ment, but what about when you want to test on mobile or share your local dev envi­ron­ment? Here’s how

Let’s say you have set up Home­stead as your local dev envi­ron­ment as per the Local Devel­op­ment with Vagrant / Home­stead arti­cle. Maybe you’ve even cod­ing like a boss with the fan­tas­tic IDE Php­Storm as per the Using Php­Storm with Vagrant / Home­stead article.

But now you want to debug some tricky prob­lem that only hap­pens on an iPhone. Or per­haps you want to be able to share your local dev envi­ron­ment with a col­league, or even your client. What now?

Homestead has got your back; it’s actually very easy to do both of these things.

Once your Home­stead box is up and run­ning you just type homestead ssh to log into your Home­stead box, and then type share somedomain.dev (or what­ev­er the project is that you want to be able to share):

andrew@kotak ~ $ homestead ssh
Welcome to Ubuntu 16.04.2 LTS (GNU/Linux 4.4.0-66-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

0 packages can be updated.
0 updates are security updates.


Last login: Fri May  5 18:51:35 2017 from 10.0.2.2
vagrant@homestead:~$ share nystudio107.dev

What hap­pens under the hood is a nifty tool called Ngrok is used to allow exter­nal con­nec­tions to tun­nel into your local dev envi­ron­men­t’s web­serv­er (this is inci­den­tal­ly the same tool that Valet uses for shar­ing). The share com­mand is just an alias that Home­stead places into your ~/.bash_aliases Bash con­fig file.

function share() {
    if [[ "$1" ]]
    then
        ngrok http ${@:2} -host-header="$1" 80
    else
        echo "Error: missing required parameters."
        echo "Usage: "
        echo "  share domain"
        echo "Invocation with extra params passed directly to ngrok"
        echo "  share domain -region=eu -subdomain=test1234"
    fi
}

You’ll see a dis­play that looks some­thing like this:

The URLs to the right of the ​“For­ward­ing” labels are pub­licly acces­si­bly URLs that you can give out to any­one to see your actu­al local dev envi­ron­ment. There are two list­ed in the above exam­ple, because my local nystudio107.dev web­serv­er is both http and https.

The way it works is the request goes through the pub­licly acces­si­ble ngrok.io which then tun­nels into your local dev envi­ron­ment via the ssh tun­nel that’s been opened up by ngrok cour­tesy of the share alias.

As soon as you hit Control-C to ter­mi­nate the ngrok com­mand, the tun­nel is torn down, and the exter­nal URL no longer works.

If you want a client or colleague to look at your local dev, just fire up `share`, and give them the URL

So while ngrok is run­ning via the share alias, I can give out the URLs http://​2de72b58​.ngrok​.io & https://​2de72b58​.ngrok​.io and any­one will be able to view the web­site, on any device.

nystudio107.dev loaded via exter­nal ngrok​.io URL

So this is all pret­ty awe­some. We now have a way to quick­ly and eas­i­ly share our local dev with col­leagues and clients.

Maybe we don’t have a staging envi­ron­ment set up or we just want to share some­thing quick­ly with­out doing a deploy. But it gets even more fun test­ing on oth­er devices.

Link Mobile Testing

But what if we want to do mobile test­ing, or debug a sticky prob­lem that hap­pens only on spe­cif­ic devices like an iPhone? There are some great tools like Browser­sync to let you view local dev work on a vari­ety of devices, but Home­stead lets us do this too!

We can just take the same URL we got from run­ning share and fire it up on our mobile device:

Shar­ing with a mobile device

The cool thing about this is the per­son test­ing it does­n’t have to be on your local net­work. Send them the URL via text mes­sage or Slack or what­ev­er, and away they go.

For iOS debug­ging, you can then use Safari on your local machine to debug the project:

Debug­ging an iOS device via Safari

And then we can just use the Ele­ment Inspec­tor to look at things on our mobile device:

Ele­ment Inspec­tor in Safari

That’s all she wrote… hap­py sharing!