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:

Uninstalling grub:
http://quainttech.blogspot.com/2007/05/how-to-remove-ubuntu-from-vista-dual.html

Removing linux partition from within windows:
http://www.techrepublic.com/blog/windows-and-office/how-do-i-resize-a-vista-partition-without-damaging-data/

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

cd /opt/lampp/etc

nano httpd.conf

page down to the end of the file then use arrow key to move up the document until you come across this:

# Virtual hosts
#Include etc/extra/httpd-vhosts.conf

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

nano httpd-vhosts.conf

Comment out the first example (dummy-host.example.com) so you have it for future reference.

Delete the second example, and add the following:

<VirtualHost *:80>
DocumentRoot /opt/lampp/htdocs
ServerName localhost
</VirtualHost>

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.

<VirtualHost *:80>
DocumentRoot /home/jeff/website/local.test.dev/public
ServerName local.test.dev
</VirtualHost>

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

nano hosts

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:

127.0.0.1  local.test.dev

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!

Jeff Lloyd
  • Written by on 5th October 2009 at 17:17
  • “Jeff Lloyd is a developer at Fluid Creativity.”
  • Google+
  • http://www.stemount.co.uk/ Stephen Mount

    The updates for Ubuntu would have been kernel updates. Virtualbox’s drivers install kernel modules to allow it to work correctly. The update system would also update the kernel and any attached modules wouldn’t be in effect anymore.

    Also, in Safari – the boxes below asking for name/e-mail don’t show what you’re written (white text?) :-)

    • http://www.base30.co.uk Nicola Thomas

      thanks for pointing that out… we fixed the white issue. :-)

    • http://blog.fluidcreativity.co.uk Fluid Creativity

      Thanks for explaining about the kernel update. Now it makes sense! VBox additions certainly work fab for me, allowing proper full-screen linux. It’s great.

  • http://www.stemount.co.uk/ Stephen Mount

    The updates for Ubuntu would have been kernel updates. Virtualbox's drivers install kernel modules to allow it to work correctly. The update system would also update the kernel and any attached modules wouldn't be in effect anymore.

    Also, in Safari – the boxes below asking for name/e-mail don't show what you're written (white text?) :-)

    • http://www.base30.co.uk Nicola Thomas

      thanks for pointing that out… we fixed the white issue. :-)

    • http://www.fluidcreativity.co.uk/fluid-thinking Jeff

      Thanks for explaining about the kernel update. Now it makes sense! VBox additions certainly work fab for me, allowing proper full-screen linux. It's great.

  • GreyWolf

    “a spanking new Dell ”

    That was your mistake. Nothing Dell does works as standard. I have spent literally years trying to get Linux to run on my Dell. On my Thinkpad, and my HP laptop, it all works immediately and completely.

  • GreyWolf

    “a spanking new Dell “

    That was your mistake. Nothing Dell does works as standard. I have spent literally years trying to get Linux to run on my Dell. On my Thinkpad, and my HP laptop, it all works immediately and completely.

  • http://www.umbeehosting.co.uk/vps-hosting Virtual Server Hosting

    Sad to know that but it’s not the Dell mistakes but yours. It’s hard to adjust for it after being a good user of other OS like windows and drastically change to older one. It would make you sick for it, you just be careful.

  • http://www.umbeehosting.co.uk/vps-hosting Virtual Server Hosting

    Sad to know that but it’s not the Dell mistakes but yours. It’s hard to adjust for it after being a good user of other OS like windows and drastically change to older one. It would make you sick for it, you just be careful.