Vagrant for mobile web development

The problem: You code your mobile web apps on your desktop, and it’s hard to see the changes.

Until OS X Mavericks kills the feature, you used to be able to daisy chain your local WiFi off your ethernet connection, and serve your local environment to your mobile devices via WiFi. It was a sad day when they killed it. It made development so easy. I couldn’t find any other alternative that didn’t involve time consuming network hacks. The XIP service got me close, but it was unreliable when I was at a location with high network security.

All was hopeless until I found Vagrant Share.

Now this is my workflow.

  1. I code.
  2. I save.
  3. My local browser refreshes. My iPhone refreshes.
  4. Repeat.

Vagrant Share allows you to share your Vagrant environment with anyone in the world, enabling collaboration directly in your Vagrant environment in almost any network environment with just a single command: vagrant share.

Vagrant share has three primary modes or features:
HTTP sharing will create a URL that you can give to anyone. This URL will route directly into your Vagrant environment. The person using this URL does not need Vagrant installed, so it can be shared with anyone. This is useful for testing webhooks or showing your work to clients, teammates, managers, etc.

SSH sharing will allow instant SSH access to your Vagrant environment by anyone by running vagrant connect --ssh on the remote side. This is useful for pair programming, debugging ops problems, etc.

General sharing allows anyone to access any exposed port of your Vagrant environment by running vagrant connect on the remote side. This is useful if the remote side wants to access your Vagrant environment as if it were a computer on the LAN.

The quick & dirty install.

I highly encourage you to head over to the vagrant site and check out their docs. They’re pretty detailed and it’s important to get a solid grip on what’s going on. That said, if you plug this into your machine, you’ll probably be alright.

Go here & install Vagrant.

$ mkdir vagrant_getting_started
$ cd vagrant_getting_started
$ vagrant init

This will place a vagrant file in your current directory.

$ vagrant box add hashicorp/precise32

Open up that file called Vagrantfile. Add this to the bottom.

Vagrant.configure("2") do |config|
  config.vm.box = "hashicorp/precise32"
  config.vm.provision :shell, path: "bootstrap.sh"
  config.vm.network :forwarded_port, host: 4567, guest: 80
end

Now we’ll install apache.

Create a new file called bootstrap.sh and save in the same folder as Vagrantfile

#!/usr/bin/env bash

apt-get update
apt-get install -y apache2
rm -rf /var/www
ln -fs /vagrant /var/www

The moment of truth. Local server.

$ vagrant up

Open http://127.0.0.1:4567 in a browser. You should see a web page served from your local machine. If there was any problems, you should probably go back and read through the Vagrant docs.

Hooking up to the cloud

Sign up for an account at https://vagrantcloud.com

$ vagrant login

(you will have to enter the username and password for Vagrantcloud)

$ vagrant share
...
==> default: Your Vagrant Share is running!
==> default: URL: http://frosty-weasel-0857.vagrantshare.com
...

Pop that URL on your mobile device. Behold! You should now see your local environment on your phone though the Vagrant share proxy. Sit back and enjoy how awesome that is for a second.

Category: Product #: Regular price:$ (Sale ends ) Available from: Condition: Good ! Order now!
Reviewed by on. Rating:

Comments

comments