Andrew Welch
Published , updated · 5 min read · RSS Feed
Please consider 🎗 sponsoring me 🎗 to keep writing articles like this.
Mobile Testing & Local Dev Sharing with Homestead
Homestead is a fantastic local dev environment, but what about when you want to test on mobile or share your local dev environment? Here’s how
Let’s say you have set up Homestead as your local dev environment as per the Local Development with Vagrant / Homestead article. Maybe you’ve even coding like a boss with the fantastic IDE PhpStorm as per the Using PhpStorm with Vagrant / Homestead article.
But now you want to debug some tricky problem that only happens on an iPhone. Or perhaps you want to be able to share your local dev environment with a colleague, or even your client. What now?
Homestead has got your back; it’s actually very easy to do both of these things.
Once your Homestead box is up and running you just type homestead ssh to log into your Homestead box, and then type share somedomain.dev (or whatever 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 happens under the hood is a nifty tool called Ngrok is used to allow external connections to tunnel into your local dev environment’s webserver (this is incidentally the same tool that Valet uses for sharing). The share command is just an alias that Homestead places into your ~/.bash_aliases Bash config 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 display that looks something like this:
The URLs to the right of the “Forwarding” labels are publicly accessibly URLs that you can give out to anyone to see your actual local dev environment. There are two listed in the above example, because my local nystudio107.dev webserver is both http and https.
The way it works is the request goes through the publicly accessible ngrok.io which then tunnels into your local dev environment via the ssh tunnel that’s been opened up by ngrok courtesy of the share alias.
As soon as you hit Control-C to terminate the ngrok command, the tunnel is torn down, and the external 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 running via the share alias, I can give out the URLs http://2de72b58.ngrok.io & https://2de72b58.ngrok.io and anyone will be able to view the website, on any device.
So this is all pretty awesome. We now have a way to quickly and easily share our local dev with colleagues and clients.
Maybe we don’t have a staging environment set up or we just want to share something quickly without doing a deploy. But it gets even more fun testing on other devices.
Link Mobile Testing
But what if we want to do mobile testing, or debug a sticky problem that happens only on specific devices like an iPhone? There are some great tools like Browsersync to let you view local dev work on a variety of devices, but Homestead lets us do this too!
We can just take the same URL we got from running share and fire it up on our mobile device:
The cool thing about this is the person testing it doesn’t have to be on your local network. Send them the URL via text message or Slack or whatever, and away they go.
For iOS debugging, you can then use Safari on your local machine to debug the project:
And then we can just use the Element Inspector to look at things on our mobile device:
That’s all she wrote… happy sharing!