I’ve used many different development styles through the years. For a while I was a big fan of using Coda to develop live on the server. Recently I’m using more of Textmate and Transmit1. And, while I still like the how fast I can move while writing changes straight to the server, I don’t necessarily want to be doing anything that could potentially break a client’s website — even for a short time. The solution to this is pretty simple; run a virtual machine that acts just like the remote server. You can make your changes and when you’re sure it’s right, you can make one push up to the live site. This probably seems pretty obvious, but I’m going to talk about how I have my VM configured so that it works even on a strange network.
Goal
We want a virtual machine that has a static address that will work even if we pick up and decide to work out of a coffee shop for a day or, say, a warehouse in Northern California. It needs to act just like a production server, which means it also needs to be connected to the web.
Solution
- In Preferences, set up a VirtualBox network. Since this particular network is going to be for servers, we won’t worry about turning on a DHCP server. Screenshot
- Create a new VM in VirtualBox. I like Ubuntu, but you can use any distro you want. Use whatever specs work for you. It would be a good idea to mirror the production machine you’ll be working with as closely as possible. Don’t worry about networking on the machine yet — that’s next.
- Make sure the VM is not running and open its settings. Go to the network tab and verify that adapter 1 is still set for NAT. This is how the VM will access the internet.
- Click over to adapter 2. Check the box to enable the adapter and set it to use the network that we set up in step 1.
- Start the VM and open the network configuration file. In the current version of Ubuntu this is at
/etc/network/interfaces
. Make sure you leave eth0 as a dynamic interface and set eth1 as a static interface for your VirtualBox network. Screenshot - Restart the machine and verify that it can access the internet. Also verify that you can access the machine from your host OS on the IP address you gave it.
Something I like to do, just to make this a little easier to work with is to set that address to a local domain in my hosts
file. Something like local.dev
seems to be popular, but you can name it whatever you want. Obviously if you name it google.com
you’ll need to start using Bing or something. đ
I realize this was a pretty quick overview of the process, so if there’s anything that was unclear, let me know in the comments or shoot me an email.
- Textmate with the Transmit bundle really makes Dropsend amazing. If you don’t know what I’m talking about, look for the Transmit bundle for Textmate and check out the secrets of transmit blog post that Panic wrote a while back. ↩
Josh, thanks – turns out less is more! Been wrestling with this all day, came across your post, and was done in no time.
Josh, thanks for the quick tutorial, very informative and got me up and running super quick. I am curious how you decided to edit your files in the VirtualBox server. Did you just use Transmit/Textmate?
Ideally I want to have a shared folder between the guest and host OSes, so I can load an entire project into my IDE. Any thoughts or ideas on setting up folder sharing in Ubuntu Server/VB are greatly appreciated.
Funny you should mention that. I actually did another write up talking about sharing folders between the host and guest OS. It’s actually pretty easy and I’ve been using it all the time. http://joshbetz.com/2012/03/virtualized-development-part-2/
Josh, Using your article as a base I inserted numerous screen shots and a bit more detail on this wiki for linux: http://wiki.linuxmatter.com/index.php/Virtualbox:create_website_development_environment
Jay
Although there’s quite a bit of extra initial setup involved, you can have subdomains of your vhost automatically mapped to subdirectories.
That way, you just create a new folder called for example “amazing-prototype” and then browse to http://amazing-prototype.virtualhostname
I’ve written up a guide on how to do that here:
http://otaqui.com/blog/1652/setting-up-a-virtualbox-virtual-machine-for-web-development-with-multiple-sites-using-mod_vhost_alias-and-virtualdocumentroot/