Sharing Laravel Homestead Sites

Providing external access to your Laravel Homestead sites is pretty darn easy.


So you’re working on one of your many sites running inside Laravel Homestead, but you want to get some feedback from a collegue and would like them to access your site. Or you are working with an external API that requires access to your development environment to work.

Out of the box you have access to use Vagrant Cloud by using the vagrant share command. Unfortunately this only really works with single-site setups.

Enter ngrok — the free service that makes our day!


Requirements

  • Mac OS/X (Yosemite assumed, but should work on other versions)
  • Node Package Manager (NPM)

Installation

  1. We are using NPM to make the installation process easier for us: http://nodejs.org. Simply click the Install button and run the downloaded installer. Also, you are likely to already have this installed if you are running tools like Grunt.
  2. You should now have access to NPM. Verify this by entering:

3. Now lets install ngrok via NPM, then verify that it exists:


Configuration

Now that we made it past the hard part, lets configure things:

  1. Sign up at ngrok.com and create an account (it’s free, at least as of this writing).
  2. Run the provided example with your auth-token to get things started. You will get a screen like this:

3. Copy your unique URL and paste it into your browser. (You should now see something like “It works!” if you don’t have any sites running on your Mac localhost.) You will not need to include your auth token in future requests, unless you clear its cookie through uninstalling, or similar.

4. You can now close the connection by pressing CTRL-C.

5. Open the homestead YAML configuration file (either by opening the file directly for Homestead 1.x, or typing homestead edit for Homestead 2.x).

6. Come up with a unique sub-domain for your test site and add it to the respective entry, for example:

7. Reprovision homestead (either through vagrant provision or homestead provision).


Execution

Now that everything is installed, let’s take it for a spin:

  1. Enter ngrok -subdomain purple-turtles 8000 in your terminal.
  2. Open your browser to http://purple-turtles.ngrok.com, and you should see your dev site!

As a bonus, you can track all requests to your ngrok’d site in your browser here: http://127.0.0.1:4040 while the connection is open. This can be immensely helpful when testing external API calls.

Oh, and don’t forget to close your connection when you are done. You don’t want to leave that connection open, just to be safe, as well as preserve system resources.


Sources

Special thanks to @keithdamiani for helping troubleshoot issues along the way!


If you you found this article helpful or interesting, please “Recommend” it below. This helps others find it and provides me with feedback for future articles. If you have comments or thoughts, please share them below as well!