Well me actually, but it might benefit you too. Here’s why.
There’s no doubt that having dedicated machines and resources to play with when developing websites is useful. But what if you don’t have unlimited space and resources or, like me, develop ‘on the go’?
When I decided to go full-time freelance I was faced with a rather major decision: buy a cheap but powerful desktop machine to develop on or a more expensive laptop with which to de-shackle oneself from the home office.
Initially I went the former route and immediately regretted it. I was always sat in the same room, beavering away when I could have been out enjoying the sunshine in the park or in a café or bar with company.
So I held my breath, pulled in my belt and bought a second hand Macbook for £350. Now I know you’re already rolling your eyes and beginning to mouth the words “Oh lord, another Mac-evangelist”. Well maybe a little, but hear me out.
As of the time I am writing this article, and it’s been about six months since I actually got this suite of tools running reliably, there was no way of running Mac OS X in a free virtual environment on Windows or Linux so logic dictated that Mac OS would be the machine’s operating system. This suited just fine, and still does, as I’d grown accustomed to using OS X after several years of using them in studios already. Don’t get me wrong, I’m fine with Linux and Windows too, who isn’t these days, I just prefer using Mac OS if I can.
So, once I had made the decision to leave the home office I was presented with the problems of what technology to employ in giving me the usefulness of a home network but without actually having to lug several machines around at once and also be able to develop rich, dynamic internet applications without actually being connected to the World Wide Web.
Here’s how I managed it.
Quick links menu
Components
Macbook
The faster and more tricked out the better. Mine works more than adequately on a 2GHz Intel Core Duo with 2GB RAM running OS X 10.5. I wouldn’t really suggest doing this on a single core machine but you can try it if you like, YMMV.
VirtualBox
Sun/Oracle’s free virtualisation environment. Available here: http://www.virtualbox.org/
Linux
Use whatever flavour of Linux you prefer, personally I like things simple so I chose Ubuntu which you can download from here: http://www.ubuntu.com/
Windows
You can use either XP, Vista or Windows 7 for this, I presume they all work in pretty much the same way. I chose XP as that’s what I had a license and disc for. I hear that Windows 7 has a smaller footprint than XP but I like that XP doesn’t have too many bells and whistles to hog cycles. You’ll have to source your own copy if you want to follow this tutorial.
The Internet
During the initial phases of this how-to you will need a live internet connection due to having to collect applications for your Guest OSs. You won’t need to stay connected after installation.
Method
Create your first virtual machine
- Start by installing VirtualBox. Just double click the .dmg file and dragging the app into your applications folder.
- Start VirtualBox and create a new virtual machine by clicking the little blue star-burst icon in the top-left of the VIrtualBox Machine Manager window. A new window will open up, this is the New Virtual Machine Wizard. Click continue.
- Give your new machine a name, I called mine ‘Umbongo’. Choose the OS type and version, in this case Linux and Ubuntu. Click continue.
- Select the memory allocation size that you wish to give your guest OS. The default 512MB is more than sufficient for running a small web-server. Click continues.
- Leave the “Boot Hard Disk” option selected and ensure that the “Create new hard disk” radio is selected. Click continue.
- You will now be presented with a further window. This one is the “Create New Virtual Disk Wizard”. Click continue.
- Under “Hard Disk Storage Type” select dynamically expanding. Click continue.
- Choose where you want to store the disk image. You can use external hard drives if you want but be aware of the limitations of the disk speed and the connection type. I would not suggest anything less than USB 2. Again, for ease of portability I chose the laptop drive. Beneath this is the size of the image with a slider. The default is 8GB which is much larger than we need for our purposes so I scaled mine back to a less space hungry 4GB and suggest you follow suit. This is why we opted to have the disk image automatically resize if it reaches capacity. Click continue.
- You’re done, you have created your first disc image. Now onto the slightly less boring bits.
Configuring the Linux virtual machine parameters
- In the VirtualBox Virtual Machine Manager window select the image that you’ve just created on the left-hand side. Click the yellow settings cog above it. You will be presented with yet another window with options for general, system, video, storage, audio, network, port and shared folder options.
- Select the system tab and disable floppy option, there isn’t one so you won’t need it.
- Select the storage tab and under the IDE Controller option select the image of the CD/DVD. The right hand pane will show new options, click the folder icon next to the CD/DVD Device dropdown. Locate your Linux CD iso image. I usually put them in the Downloads folder in my home profile where Firefox likes to dump stuff. You’ll be presented with yet another options panel, the Virtual Media Manager. Click the little stack of green discs with the green plus symbol and browse to your Linux image. Click open. Select the new image in the list and click OK.
- Click the network tab. In this pane you’ll be able to configure your virtual network hardware which is how we’ll get all these virtual machines and host OS all talking and getting along nicely. Make sure that Adapter 1 is enabled and “attached to” is set to NAT. Click the tab for Adapter 2 and enable it, this time setting the “attached to” option to “Host-only adapter, vboxnet0″.
- Click the Shared Folders tab. In this pane, on the right-hand side, click the little blue folder with the green plus symbol. In the “Folder Path” drop-down choose “Other” and browse to the root of your websites storage folder. Mine is in my home folder. Give it a folder name and, making sure that read-only is unchecked, click OK.
- The host configuration is now done, time to move onto the installation.
Installing Ubuntu Linux and LAMP.
If you want to know more about the development environment LAMP you can do so by reading this link here.
- Click the green start arrow above image name in the Virtual Machine Manager pane. A window will appear and your virtual Ubuntu will start. Follow the on screen instructions until you are dumped out onto your newly installed virtual OS.
- Ubuntu will ask you to remove the CD and hit enter to restart. You can do this by choosing the “Devices” menu, “CD/DVD Devices” and then “Unmount all CD/DVD Devices” then hit enter.
- Open a terminal window in Ubuntu by clicking on the Ubuntu distribution icon in the top-left of the screen, scrolling down to “Accessories” and then clicking the terminal icon.
- Type
sudo apt-get install apache2 php5-gd php5-mysql mysql-server openssh-server lynx
and hit return. Enter the password you chose when installing when prompted and then press the “Y” to accept the 75MB-ish download. This will download all of the files you need to create a basic web-server and to be able to connect to it from your host in one go rather than having to do them individually. Please ensure that you’ve double checked the command for typos or it won’t work. It will probably take a while so you might want to make a coffee, stretch your legs and get some sunshine before we get into the rest of this.
A note for the geekier readers: the reason I’ve not specified version numbers for the MySQL components is that this way the installer knows to go and get the latest stable releases, fact-fans. - The most time-consuming part of this process is setting up the mysql-server because it nags you for a password every minute or so. Now I would never suggest that you don’t use a password in the real world but for the sake of expediency and as you’re going to be working on a secure virtual machine I recommend that you leave the password field blank at this point and just hit return when it asks you for one.
- That’s it. All the other applications install silently. The more astute of you will have noticed that on top of the normal LAMP components I’ve added some extras, namely openssh-server and lynx. By default Ubuntu comes with an SSH client but no server so you’d not be able to connect to the virtual machine via your host terminal client for quick maintenance. This is also the reason I’ve included Lynx, the command line browser for Linux. It’s good for testing whether something works on your virtual server when you’re trying to discover why your host or Windows guest can’t see the project you’re working on.
- In your Ubuntu guest, open terminal.
- Type
ifconfig
- Make a note of the IP number of the device labelled “vboxnet0″ (remember from earlier?). It’ll most likely be something like 192.168.56.101 or so.
- Now open your terminal client in Mac OS and type
ssh username@ip.ad.dr.ess
where username is your username and ip.ad.dr.ess is the number you took down in the previous step. All being well you should now be connected to the virtual machine and being prompted for the password. If not run through the steps above and make sure you have installed everything needed. If you’ve missed one of the applications don’t worry, you can install it individually with the Linux terminal command
sudo apt-get install theappyoumissed
and following the on-screen instructions.
- With luck you should now be being welcomed to the inner workings of the virtual machine you have installed.
- Whilst still in terminal and connected via SSH to the Linux virtual machine you may as well see if your MySQL server is working.
- Type
mysql -u root -p
and hit return. It will prompt you for a password (that’s the -p switch) and hit return.
- Type
show databases;
and you’ll get this returned:
+--------------------+ | Database | +--------------------+ | information_schema | | mysql | +--------------------+ 2 rows in set (0.00 sec)
- Type “\q” and hit return. This will dump you back to SSH.
- In terminal whilst using SSH to talk to the virtual machine type “Lynx” and hit enter. This opens the Lynx command line browser. Press “g” and type the address:
localhost
You should now have a screen which tells you “It works! This is the default webpage for this server. The web server software is running but no content has been added, yet.” This means you’re working at least locally. Press “q” and then “y” to dump you back out to the terminal.
- There is no step 2.
- Still in terminal and SSH type the following:
sudo touch /var/www/index.php sudo nano /var/www/index.php
- This will open a command line editor that is very similar to a GUI text editor. Before any Linux ‘enthusiasts’ (yeah, you, neckbeard) come down on me for not using Vi, Vim, Emacs or whatever this tutorial is already long enough without having to teach somebody a whole new way of working for editing maybe a handful of files. Suck it up and use your own if you’re more comfortable with it.
In this editor pane write:<? phpinfo(); ?>
Hit “ctrl + o” to write the file and then “ctrl + x” to exit.
- Fire up lynx and “g” to http://localhost/index.php where you should see an enormous 30-odd page of information. What you’re looking for is on about page 19 where it should say “MySQL Support Enabled”.
- We’re getting towards the crux of the whole process now, seeing the virtual webserver from your main dev machine.
- Open your favourite web browser and in the address bar put the same IP address that were using to connect via SSH like so: http://ip.ad.dr.ess/ and you should see the first ‘It works!” page.
- Follow the previous instructions about creating a new virtual machine but change the installation type to Windows and then select your Windows flavour.
- Install Windows from your CD/DVD. I don’t need to tell you how to follow the instructions, everything will work straight of the box. This take a while so make yourself another coffee and go and listen to the birds in the garden.
- Restore your Windows Virtual Machine and right click on the little blue cube with a gold star on it in the utility tray in the bottom right of the screen, directly opposite the start button.
- Follow the directions and you’re done.
- Restore your Ubuntu Virtual Machine and in the Devices pull down menu, CD/DVD Devices option you should see an item called VBoxGuestAdditions.iso. Select it.
- If it doesn’t mount directly to your desktop, as mine doesn’t, go to the Places menu in Ubuntu and select the CD/DVD icon. This will mount it to your system and you’ll see it on the desktop.
- Double click the CD and find the file Autorun.sh. Double click it. When it asks you what you want to do with it select run and enter your admin password when prompted.
- When the shell script has finished installing the additions hit enter to close the window when prompted.
- Reboot the Virtual Machine to complete installation. You can do this either by clicking the power icon on the top bar on the far right and selecting restart or if you’re still have an SSH session open by typing:
sudo reboot now
and entering your admin password when prompted. Your virtual machine will reboot immediately.
- After rebooting you can unmount the CD/DVD image as you won’t need it anymore.
- Open an Explorer Window (The quickest way to achieve this is to press “command + e”. The left Apple command key acts as the Windows key.) and go to “My Network Places”. You should see an attached network drive called “VBOXSVRsomething on VBoxsvr” where the something is the name of the share that you made during the virtual machine configuration. Double click it and you should see the contents of your share. You can have multiple shares if you like but if, like me, you have all of your sites under one folder you shouldn’t need to.
- SSH into your box as before.
- It gets a bit hairy here now. As of the update from Ubuntu 9.10 to 10.04 the shares load before the VBox Additions so you have to do an extra step. It’s very simple but it makes the difference between mounting and not mounting the host file system.
- Type the following:
sudo touch /etc/init.d/local
Enter your admin password.
- Then type:
sudo nano /etc/init.d/local
- Then type:
#!/bin/sh mount.vboxsf -w YourShare /path/to/yourshare
For example, mine is “mount.vboxsf -w Sites /mnt/sites” as explained earlier in the tutorial.
- Type:
sudo mount -t vboxsf Yoursharename /mnt/Yourshare
Test your SSH connection
Test your MySQL server
Test your Apache2 installation
Test that your server talks to itself
Testing that your host OS can see the guest server
Install Windows
Installing VBox Additions
You can happily use Windows without having the VBox Additions installed but you won’t be able to get Ubuntu to play nicely without them so you might as well install on both Windows and Ubuntu as it will make your life more bearable in terms of performance and ease of maintenance.
Installing VBox Additions on Windows
Installing VBox Additions in Ubuntu
Setting up file sharing
This is set into two parts, Windows and Ubuntu. The reason this is done like this is that the Windows part is painless but the Ubuntu part needs a little bit of work.
Windows File Sharing
Ubuntu File Sharing
I’ll be honest, this one had me stumped for a long time but eventually I found someone online who’d done exactly what I wanted and just followed his instructions. Here I’ve just put the salient information.
You can read the full write up from the excellent David Herron here.
That should be it.
All that’s left is to configure your Apache 2 install and your host files for your host and Windows VM machines. They’re easy enough to do but if you need a walk-through on those as well leave me a comment below and I’ll edit the how-to.
Well I hope that was of some use to someone out there. It’s not an easy task but it’s one that will set you up well for mobile web development and allow you to travel around without worrying too much about missing work or losing out on money while you see the world.
