Back to Fluid Thinking
Setting up a linux web development environment on Vista
I’ve wanted to play around with Linux for years, and having flirted with Ubuntu on numerous laptops, never with any great success. The main stumbling block for me has been setting up things like wireless devices, video and audio drivers. However, having just got myself a spanking new Dell Studio desktop with Vista Home Premium last week, I thought I’d give Ubuntu yet another try. After a false start, it was remarkably easier than I had first thought.
I’ll be up-front from the start, I’m no linux guru. In fact, I’m pretty much a newbie to linux and Ubuntu. There may be better ways of setting up a web development environment, but this is what worked for me, and I hope it will be of some use to anyone in a similar situation to me.
Don’t try this at home.
The first thing I did was download the lastest distribution (Ubuntu 9.04 desktop edition), burn it onto a 700Mb CD-R (a trip to Tesco because I’ve only used DVDs for years) and boot from the CD. I went straight for the installation option and followed on-screen instructions until Ubuntu booted. It wasn’t great. Ubuntu didn’t recognize my display, sound or wireless card. So I was left with a shrunken mute desktop with no internet connection. I was also left with a dual-boot machine that defaulted to Ubuntu. I wanted rid of this, and these two articles gave me all the info I needed to to the job:
Removing linux partition from within windows:
Kicking around the web, I came across a blog post that mentioned running Ubuntu on a VirtualBox inside Vista. Not really knowing what this meant, I was curious.
That’s the way to do it
I hadn’t heard of a virtual box before, and reading around found that it means you can boot into Windows as normal, then run Ubuntu as a windowed application. VirtualBox will automatically hook Ubuntu up to your audio and video devices, and (joy of joys) it hooks up to your windows internet connection. Hooray! So here’s how I did it…
Setting up VirtualBox and Installing Ubuntu
Download the lastest Ubuntu distribution from the Ubuntu website: http://www.ubuntu.com/getubuntu/download
On this page you can opt for 32 or 64 bit version (this was under the fold for me and I missed it first time around). Choose your local mirror and “Begin Download”.
The file you get is type .iso which is an image of a cd-rom. You can use software to burn this to a cd and then run the installation from it, but we’re not going to do that.
While you’re waiting for the iso to download, go over to Sun’s Virtual box site and download the latest version of VirtualBox that suits your platform. V3.0.6 for Windows hosts was my option: http://www.virtualbox.org/wiki/Downloads
Install VirtualBox on your machine (known as the host machine).
Go over to Ryan’s blog and follow his really nice and easy instructions on how to install Ubuntu into VirtualBox. http://moxiefoxtrot.com/2009/04/23/installing-ubuntu-904-in-virtualbox-202/
Following Ryan’s instructions, when you get mounting the CD/DVD, select ISO Image file, click the folder icon next to the file name box, click the add button on the dialog, browse to the iso file you downloaded, and click open. Then click select, and finally ok.
At the point where you going to install the VboxLinuxAdditions – hold off and do the ubuntu updates first. I did it the other way around and found that updating lost the additions for some reason.
Once you get Ubuntu running, one of the first things that will happen is update manager appears – I had 217.9Mb of updates to download; your mileage may vary. I just let it do it’s thing, then rebooted linux at the prompt.
Now do the VboxLinuxAdditions thing, and reboot linux.
Setting up programming environment
My vista machine is set up with xampp for local development, mysql query browser, komodo editor, and netbeans ide for php. As I want to be as comfortable as possible in Linux, I’m going to setup a similar environment in Ubuntu.
Remember that the following instructions are performed within Ubuntu!
I like firefox as a development browser, and the version I had on Ubuntu was 3.0.14, so the first thing I did was try to upgrade it. I found numerous different suggested ways of doing this on the web, but the one that worked for me was to open a terminal window and type: sudo apt-get install firefox-3.5. After entering my password, it downloaded the package and installed it, but to my disappointment, clicking the firefox icon on the top menu bar still brought up 3.0.
To change this, right click the icon, click properties, click browse, navigate to filesystem, then usr/lib/firefox-3.5.3/firefox-3.5 and click open. This works, but the icon I’m used to is replaced by a blue planet. Why? Also note in the Applications/Internet menu, firefox 3.0 still appears, but a new blue planet icon named “Shiretoko Web Browser” has been added – this is the new firefox 3.5.3.
Using firefox, download xampp: http://sourceforge.net/projects/xampp/ – this page automtically recognized I was using linux and gave me the linux distribution by default.
Go over to linuxhub.net and follow instructions there for installation. http://linuxhub.net/2009/07/install-xampp-linux-apache-mysql-and-php-lamp-on-ubuntu-how-to/
One tip I learned with using Terminal is that you can press Tab key for it to auto-complete filenames, so for me keying “sudo tar xvfz xam[tab]” put in the long filename for me.
My first hurdle – I set up a 64bit environment, and xampp refused to install. If you’re in the same situation, start “Synaptic Package Manager” from the System/Administration menu, type “ia32” into the search box, tick the box next to ia32-libs and install.
OK, now you can start xampp (previously known as lampp) by typing into the terminal: sudo /opt/lampp/lampp start – and back to linuxhub.net tutorial.
Setting up a virtual host
You’ll probably want to set up virtual hosts so that you can browse your test sites using names such as “local.test.dev”. Here’s how to do this:
open a terminal and type “sudo -s” and enter your password
page down to the end of the file then use arrow key to move up the document until you come across this:
# Virtual hosts
delete the # from the second line to uncomment it, press ctrl-x, y to save and enter.
In the same terminal: cd /opt/lampp/etc/extra
Comment out the first example (dummy-host.example.com) so you have it for future reference.
Delete the second example, and add the following:
this ensures that browsing to http://localhost will still take you to the xampp control panel
Then add the following to add your development website. I’m going to use local.test.dev, but just rename as appropriate. Also, I’ll put public documents in a directory called “public” within the website root.
You can add more of these blocks for each of your development sites.
Press ctrl-x, y, enter to save the changes
From the teminal: cd /etc
on the first line, before the entry “127.0.0.1 localhost” add one line for each of the development sites you’ve entered in the httpd-vhosts.conf file:
again, ctrl-x, y, enter to save changes
Finally, you need to set up the directory for your development sites. I’ve done this from the ubuntu desktop:
select Places/Home folder
File/Create Folder and name it “website” – this matches the “/home/jeff/website” we used in the httpd-vhosts.conf file.
In the new directory, create a new folder called “local.test.dev” (or whatever you named your development site.
In the local.test.dev folder create another folder called “public”.
This folder structure matches what we entered into the httpd-vhosts.conf file as the web root directory for our development site.
In the public folder, create a new document (right click, create new document / empty document) and name it index.php
double-click the new file and in the text editor enter:
<h1>Hello – you’ve reached local.test.dev</h1>
save the file
You might have apache server still running from earlier, so in the terminal type: /opt/lampp/lampp stop
next type: /opt/lampp/lampp start – this restarts the server and makes it read the new configuration files we’ve created.
Now go to your web browser and go to http://local.test.dev. If all has gone well, you should see the message you added to the index.php file.
The next thing I did was to download and install my favourite text editor and IDE and start playing around. I finally have a linux development environment running inside Ubuntu 9.04 which itself is running inside Vista! Hope this worked for you, and good luck!