Web Development on Windows Made Easier With Virtual Box

Let's face it. Windows just isn't great for development. You can argue against this point, but in general it just doesn't as well as it may with Linux operating systems. Even Mac OS X is somewhat better. But forget that. I don't know if there's a purpose to this tutorial, but I know that it could help somebody.

Working in a VM is tedious at times. The purpose of this is to set up a development environment where you can work in Windows, save to your host hard drive, but use a Linux based server to test it in real time. How, you ask? We're going to tweak a Linux VM to do just this.

For this tutorial, I'm going to use the newest version of Ubuntu Server (15.10). I'm also going to assume that you have a full working installation of Virtual Box. This includes the network adapters. If you don't have the network adapters, then you should install them. Because that's what's going to make this work.

First thing's first, we're going to create the VM. I'm making a relatively low spec VM because I don't need that much firepower to serve up some pages with a PHP runtime. If you're going to do some processing on your virtual instance (like anything with ImageMagick, speaking from experience), then maybe make it beefier. I only gave mine 1GB RAM. A hard drive is required for this, so either create one or choose one you've already created.

Next, size the hard drive to whatever you find to be appropriate. I'm going to stick with the default 8GB disk, but you can make it as big as you want. Remember, dynamic allocation means it'll only be as big as how much data is on it.

Once that's done, add the CD to the virtual CD Drive.

Now you're ready to start the VM. So just that. There are thousands of tutorials on how to install Ubuntu Server on the web. So I'm going to skip that for brevity. I'll point out that you want the installer to install the LAMP stack for you. If this isn't the stack you want to install, then simply bypass this step and install the stack you want to later. It'll prompt you for a root MySQL password as well. You don't need an SSH Server, but I'm adding one for me.

Finish the installation, then let the VM reboot. If you get to a login prompt, then Ubuntu Server has installed. Next, we're going to install the VirtualBox Guest Additions into the VM. In the Devices menu, select the option to insert the Guest Additions CD. If Ubuntu doesn't mount the CD automatically, then use sudo mount /dev/cdrom /media/cdrom. Then navigate to that directory. To compile the software for your platform, you need to sudo apt-get install make gcc. Then run sudo ./VBoxLinuxAdditions.run. This step will compile and install the kernel modules that make the server run with VirtualBox better. You'll see something about skipping the window system drivers. That's fine, because you don't have a window system. Finally, unmount, remove the virtual CD, and shutdown the VM.

Next, we're going to set up the networking required to access the virtual machine from our host machine. In the main VirtualBox window, open your preferences and navigate to Network. Create a Host-Only Network. This will include your computer and whatever VM you put on it. So you can create many of these and put multiple VMs on each. This will also create a new network interface on your computer. So when you go to your network adapters in your control panel, you'll see new network adapter. If you ever want to delete this virtual network and its interface, use VirtualBox to do so.

Now, some of you that know what you're doing may want to make a Bridged Network adapter. That's fine. That way your VM get's its own IP address on your LAN. I'm not doing that because I'm on a university network and I don't want to register a new MAC address with the technology department. To allow the VM to get out to the internet, you can share the internet connection. If I were on my own network, I'd just bypass my computer's stack entirely. But alas, I am not.

Next, boot up the VM. Get the IP address from ifconfig. Then navigate your favorite browser to that IP. The default Apache2 page should show up here. If it doesn't then there's something wrong with your network configuration. It could be any number of things. Just remember, it's a virtual machine - you can start from scratch.

Finally, we're going to set up a shared folder between the host and the guest so that our development files can sync in real time. I wouldn't even call it syncing. I'd call it more like opening a window so your guest OS can see through to your host file system. VirtualBox just passes the IO operations through in a safe way as far as I know.

To do this, shutdown the VM and go to its settings. Go to "Shared Folders" and add one. Enter the location of where you want your site development to be, give it a name (only relevant if you're going to have more than one shared folder), check of "Auto-Mount".

Now when you start your VM, you'll have access to that folder on your host machine... sort of.

We need to add ourselves to the VirtualBox user group to get access to this without being root. To do that, just pop in sudo adduser <username> vboxsf. Now you should be able to access this folder and read and write to it. Any changes you make on one side will be immediately reflected on the other.

Next, we're going to symbolically link Apache's root directory to this folder. To do this, go to /var/www and sudo rm -R html/. This deletes the current root directory. Next, we're going to use sudo ln -s /media/<shared folder> html. This will create a symbolic link to your file. Finally, you'll want to add www-data to the group as we did before. This should be all it takes for your webserver to access this directory. You may have lost permissions to do stuff, but just reboot and everything will be dandy. Remember, you can't chmod, chown, or chgrp the shared folder.

Now, just to make sure we can write to it from PHP, I wrote a very short script to do just that. I created it in Atom on my host machine and it showed up on my guest instantly as it should have (I'm still looking at the document root of Apache.)

Then I navigated to that page and, sure enough, it worked and wrote the file! It became immediately available on both... you get the picture. It's magical.

Finally, I wanted to try launching it "Headlessly" which is an option in VirtualBox. I had never used this option as I had no use for it, so I wanted to see how it worked. I could see it boot up in the little preview thumbnail VirtualBox gives you, but no new window was spawned. Once I saw the login screen, I closed VirtualBox. Now the VM is running in the background! You can shut it down by right clicking the VM in the list and selecting either the nice ACPI shutdown or just to kill it. It's generally safer to send the shutdown signal instead of forcibly shutting it down to prevent filesystem corruption. 

Perhaps the more useful setting would be a detachable process. That way you can get at the terminal if you needed. Simply close the VM window and tell it to run in the background, and when you need to access the terminal, double click it in the VM list. It'll make a window for you just like normal. You can also do this for the headless start too. I guess the only real difference is whether you start with a window or not. In my opinion, both are awesome options for this particular VM.

Well, there you have it. You can now use the beautiful Windows GUI while still developing for Linux. Of course, this idea can be extended further to other things like C development and whatnot (for that you'd need a actual screen to compile but whatever), so just take this format and have fun with it. The possibilities are endless!