Testing Laravel websites over local network

When developing a website you often want to (and should!) preview your masterpiece on a real mobile device. Or let a family member preview it and test it without them overtaking your laptop. Here's a quick and easy way to allow any devices on your local network to have a look at what you're building.

First, a couple of apps with the solution

One of the ways you would normally do that - is to use Ngrok. Ngrok is beatiful, it's magic, it's an HTTP/HTTPS tunnel that allows anyone to preview your website that's on your local machine without doing some more complicated Apache/Nginx configs and trying to figure out how to access your local machine on your tablet, phone, or any other device. But Ngrok has its limitations, especially for free users. It can get slow, it has a limited number of connections/requests which can easily get eaten by your numerous js/css/image/font includes.

Another software alternative is Expose by BeyondCode. It is open-source and written in PHP. The free plan is much more generous than Ngrok, and is definitely recommended.

What if I don't want any of those limited apps?

A "no software" alternative, and especially if you're only want to preview your website on devices that are on the same Local Area Network (for example, the same Wi-Fi connection), is to expose your web server and bind it to the IP of your machine on the local network.

Let's take a standard Laravel app as an example.

One way to serve it is using its bundled http server, which you can start by running this Artisan command:

php artisan serve

Now by default, it will bind to 127.0.0.1 as the host and 8000 as the port, which is all you need to access your website in the browser by simply typing http://127.0.0.1:8000 .

But you can't exactly visit it from your phone, or a tablet. If you tried going to http://127.0.0.1:8000 from your phone, the IP address would loop back to the phone itself and it would try to access port 8000 on your phone, which obviously is not bound to anything and there no internal service listening to that port to answer. So how do you access your website, running on your dev machine, through your phone?

The way you can access a website running on your dev machine is to first bind it to an IP that represents your dev machine inside the Local Area Network. In other words, you need to find the IP address assigned to your machine by your router and use that IP as the host when starting up your framework's (e.g. Laravel) http server.

Step 1 - Find your machine's local IP (MacOS)

There are two ways to do that.

a) Network settings

Open Network Settings on the Mac and you'll immediately see the local IP of your machine at the top, just below the "Status: Connected".

b) Terminal

Type in ifconfig | grep inet into terminal and you'll see various data about your current internet connection. It might be a little difficult to spot it at first. There's another way to quickly extract the exact IP address of your machine by using this terminal command instead:

ifconfig | sed -n "s/^.*inet \(192.[0-9]*.[0-9]*.[0-9]*\).*$/\1/p"

Which will then print out the IP only, without any other gibberish:

Personally I've saved this command as an alias for easier access which you can add to your own .bashrc or .zshrc :

alias localip='ifconfig | sed -n "s/^.*inet \(192.[0-9]*.[0-9]*.[0-9]*\).*$/\1/p"'

Step 2 - Bind your http server to the IP

Now that we know our dev machine's IP on the LAN, let's start up the server. Laravel makes it super easy with its inbuilt php artisan serve command as we mentioned in the beginning. We can override the host to which to bind to by adding the --host= flag, like so:

php artisan serve --host=192.168.1.29

# => Laravel development server started: 

This will start the Laravel's http server and bind it to the specified IP address (which you found from the previous step).

Note: you can also use the IP 0.0.0.0 when binding an IP to your web server - it will still become accessible within the same network. But in order to access it from another device, you'll still need to know the IP of your dev machine within the network, hence the previous steps needed to figure out what is your dev machine's network IP address.

With that, it will give us a link which we can use to visit the website both from our local dev machine, and any devices that are on the same network!

Using your phone or a tablet, just point your browser to the given URL and you'll be able to visit the website with great speeds and no limitations.

Bonus Step - Alias magic

I love aliases, and for a good reason! I utilise the terminal a lot and so having shortcuts to save time is extremely beneficial. You can learn more about them here.

Let's put these two aliases in your .zshrc or .bashrc files in your home directory:

alias localip='ifconfig | sed -n "s/^.*inet \(192.[0-9]*.[0-9]*.[0-9]*\).*$/\1/p"'
alias serve='php artisan serve --host=`localip`'

Save the file, and restart the terminal.

From now on, you can quickly find your local IP just by running localip and you can quickly start up the local dev server by running serve !

That's it, folks. I hope this has been helpful in one way or another ;)

Thanks for reading!