Build a web development OS in VirtualBox

Hello world!

I decided to start this coderwall account to keep track of my projects, like most here do I suppose.

I wanted to build a nice VM with all the needed tools for web development. A VM would be easier to move around from system to system. I decided on Linux Mint pretty much only because I had flickers in my VirtualBox Ubuntu installation. A Debian based distribution is nice for it's package manager, and it is the one I am most used to. You will also find more docs and help googling ubuntu than any other distro. I went for a 32bit edition, no need for 64bit!

1. Install and update the system

Installing Linux in VirtualBox is pretty straightforward, just remember to check Enable PAE/NX in the System>Processor setting of your VM before starting it.

The whole install should go smoothly.

Once rebooted the fun starts, open terminal:

sudo apt-get update

sudo dpkg-reconfigure locales

sudo update-locale LANG=en_US.UTF-8

sudo apt-get install vim guake

sudo apt-get upgrade

This will update everything and install two apps I find a priority to have!
Maybe take a Snapshot of the system in that state with VirtualBox, fresh install and update. I suggest getting this theme for Guake.

2. Install LAMP and setup virtual hosts

Now we will install the lamp stack, mcrypt is needed by many php frameworks including Laravel 4:

sudo apt-get install apache2

sudo apt-get install php5 php5-mcrypt

sudo apt-get install mysql-server php5-mysql

Once it is done we need to fix a bug with Apache2 and Mint 14.1:

sudo vim /etc/apache2/apache2.conf
add 'ServerName localhost' to the end of the file

Time to setup virtual hosts, I will use phpMyAdmin as an example. I decided to put my web root inside of my home folder. Eventually it will end up in a Dropbox folder as we'll see later :)

mkdir ~/www

mkdir ~/www/phpmyadmin

sudo a2enmod rewrite

sudo a2enmod vhost_alias

sudo service apache2 restart

cd /etc/apache2/sites-available/

sudo cp default phpmyadmin

sudo vim /etc/apache2/sites-available/phpmyadmin

There are 4 things you want to do here:

• Add 'ServerName phpmyadmin.local' right above DocumentRoot

• Edit 'DocumentRoot /home/username/www/phpmyadmin'

• Edit '<Directory /home/username/www/phpmyadmin/>'

• Change 'AllowOverride None' to 'AllowOverride All', there should be 3 of them.

I like to take the time to create 2 template vhosts. Repeat the process described above, but this time make a copy of your phpmyadmin vhost file located in /etc/apache2/sites-available/

sudo cp phpmyadmin template

sudo vim /etc/apache2/sites-available/template

Everywhere you see 'phpmyadmin', replace with 'template'. There should be 3 of them. Do the same for another vhost named 'template-pub' only this time also add /public to the document root and /public/ to the Directory.

Just copy the right template depending on the framework/site you are working on.
This will come useful when you want to script your virtual hosts files creation, like I did in this tip.

Now we need to enable our new site and fix our /etc/hosts file:

sudo a2ensite phpmyadmin

sudo service apache2 reload

sudo vim /etc/hosts

add phpmyadmin.local to the first line so it looks like:
127.0.0.1      localhost phpmyadmin.local

sudo service apache2 restart

In Ubuntu this worked, but Mint gave me a 403 error. Run this and it should fix it. Don't really know if it is good practice, but since this will never be a live production server I don't really care ;)

chmod a+x /home/username

Now go and download the latest phpMyAdmin and extract it in the folder you created in your home/www directory. You only need to create a config file for it to work:

cd ~/www/phpmyadmin

cp config.sample.inc.php config.inc.php

vim config.inc.php

Paste this in for basic setup using cookies for auth:

<?php
$cfg['blowfish_secret'] = 'be27c1ec08d65003';  //change value

$i=0;
$i++;
$cfg['Servers'][$i]['auth_type']     = 'cookie';
?>

Done, browse to http://phpmyadmin.local to check that everything works!

At this point we have a functional LAMP stack with the latest phpMyAdmin installed, good time to take another Snapshot of the system with VirtualBox!

3. Additional setup for web development

Next, I'd like to have a sync to a DropBox for all my project files and linux generic system settings. Most applications settings will also end up there.

I like it better to create a new email at Gmail that corresponds to what the VM is about, here it's web development, so I just created a username.webdev@gmail.com to link all the accounts that will relate to the VM. Start by opening a Dropbox account with it, for what I have planned 2Gb is more than I need.

Before running the Dropbox ubuntu 32bit installer you downloaded from their site you might want to run this command to skip a warning pop up during install:

sudo apt-get install python-gpgme

Now the first folder you want moved to the Dropbox is ~/www/ where all the projects will be:

cp -R ~/www/ ~/Dropbox/
rm -R ~/www/
ln -s  ~/Dropbox/www ~/www

If you had the previous 403 error you will also need to

chmod a+x ~/Dropbox

Think about doing the same for everything you want in the Dropbox: Copy it there, delete the original, create a symbolic link from the Dropbox to the original location.

So another couple of files you might want to create in Linux Mint 14.1 are the .bashrc and .bash_aliases in your home folder (/home/username/ or ~/).

This is what you want in .bashrc

# More alias definitions in ~/.bash_aliases
if [ -f ~/.bash_aliases ];
    then . ~/.bash_aliases
fi

Then you can start adding aliases in the .bash_aliases file, here are some examples to give you ideas:

alias ll='ls -l'

alias lsa='ls -la'

alias la='ls -a'

alias apti='sudo apt-get install'

alias aptr='sudo apt-get remove'

alias aptu='sudo apt-get update'

alias aptg='sudo apt-get upgrade'

alias art='php artisan'

Let's move those to our Dropbox:

mkdir ~/Dropbox/configs
cp  ~/.bashrc ~/Dropbox/configs/.bashrc
cp  ~/.bash_aliases ~/Dropbox/configs/.bash_aliases
rm  ~/.bashrc
rm ~/.bash_aliases
ln -s  ~/Dropbox/configs/.bashrc ~/.bashrc
ln -s  ~/Dropbox/configs/.bash_aliases ~/.bash_aliases

Next it's time to setup Git and GitHub

sudo apt-get install git

But you most likely have it. Now we want our global git config to use a fake email:

git config --global user.email "username@server.fake"

If you are contributing to a project that requires a real email, run the command again in the project folder without the --global flag.
Now update your GitHub account with this fake email and just ignore the verify warning, GitHub does not care :)

Let's generate our SSH keys:

ssh-keygen -t rsa -C "username@server.fake"

Make sure you change the default name to something like id_rsa_fakemail so you can create others for the real emails.

Copy and paste the contents of the idrsafakemail.pub in your GitHub account settings, done!

At some point you might need to move your development project to a live server, for various purposes. pagodaBox is a very good alternative to free shared hosting for such purposes. Once you login using your GitHub account read this and you should be good to go!

This is exaclty the point my VirtualBox Mint 14.1 is at, and I am writing this from this VM :) I will come and edit back this tip if I change things along the way.

As I keep installing and configuring stuff for this VM I will make relevant new tips.

Here is a list of tips that are relevant to the Web Development VirtualBox system or it's workflow:

• Sublime Text 2
• Script to auto create virtual hosts
• ...