Andrew Welch

Andrew Welch · Insights · #devops #homestead #sharing

Making the web better one site at a time, with a focus on performance, usability & SEO

· 5 min read ·

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

Homestead Sharing

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 (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:
 * Management:
 * Support:

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

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

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" ]]
        ngrok http ${@:2} -host-header="$1" 80
        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"

You’ll see a display that looks something like this:

Homestead Sharing With Ngrok

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 webserver is both http and https.

The way it works is the request goes through the publicly accessible 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 & and anyone will be able to view the website, on any device.

External Testing Homestead loaded via external URL

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:

Homestead Ios Testing

Sharing with a 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:

Iso Debugging Homestead

Debugging an iOS device via Safari

And then we can just use the Element Inspector to look at things on our mobile device:

Element Inspector Ios Safari

Element Inspector in Safari

That’s all she wrote… happy sharing!

${ category } · ${ blog.postDate }

${ blog.title }

#${ tag.title }