Setting up virtual hosts for your web projects

Right so I know I said I was going to write about how to set up your local development environment and that tutorial may come along sometime in the future but today I'm going to write about setting up sub-domains in your local test environment.


So right now if you're working on multiple projects, you probably access them using a url something like so:

http://localhost/project

That's all well and good but I like to keep it a bit tidier and roll with

http://project.localhost/

This is fairly simple to set up and get going.

First things first, open up a terminal window and type

sudo vi /etc/hosts

Hit Enter and this will open your hosts file (if you want to understand more about your hosts file check this out. hosts). You should see something like this at the top of the file that opens.

127.0.0.1       localhost

This is where you will add your sub domain. You can see you already have one entry in here which surprise surprise is localhost. I'll go ahead and add a new sub domain. Before you can add anything to this file you need to go into insert mode, do this by pressing "i" once. You can now navigate around the hosts file with your arrow keys and type as you usually would.

127.0.0.1 localhost
127.0.0.1 project.localhost

Once you have added the sub domain you will want to save the changes to do this press the "Esc" key and type ":wq" this will save the changes you have made and exit the file (Promise).

Right, onto the next step. I'm assuming that you don't have a folder set up for the project that you are adding a sub domain for, so I'm going to create one, If you do have a directory already, ignore the next couple of steps.

Navigate to /www, this is the root of your development environment and is where localhost points to. Right so in the terminal window type:

cd /var/www/

Press "Enter". This command has changed the directory you are in to /www now I'll create a folder that we will point the sub domain to. We create a new directory with the following command.

mkdir project

This will create a new directory with the name "project". Simple. Right now we've done that we can go and tinker with some apache2 settings so that when we type project.localhost apache2 knows to serve our project directory.

Now back to the terminal window. We need to change directory again so that we can access the apache2 files that we need to modify.

cd /etc/apache2/sites-available/

We are now in the apache2 directory called sites-available this directory stores all of the virtual hosts configuration files that will load the correct site directory for the url entered into the browser bar. To see the configuration file for localhost type:

vi default

Press "Enter" and you will see something like the below. It looks a bit daunting but the vast majority of it you dont need to understand.

        ServerAdmin webmaster@localhost

        DocumentRoot /var/www/
        
                Options FollowSymLinks
                AllowOverride None
        
        
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
        

        ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
        
                AllowOverride None
                Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
                Order allow,deny
                Allow from all
        

        ErrorLog /var/log/apache2/error.log

        # Possible values include: debug, info, notice, warn, error, crit,
        # alert, emerg.
        LogLevel warn

        CustomLog /var/log/apache2/access.log combined

    Alias /doc/ "/usr/share/doc/"
    
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    

What we are going to do for simplicity sake is copy this file and modify the bits that will make our sub domain serve the project file. Now to get out of the default file just type ":q"
This should close the file and take you back to the command line. Now to copy the file just type the following.

cp default ./project

Then press "Enter". What you have just done is copy the contents of the default file into a new file called project. Now lets get down to modifying. Type:

sudo vi project

Press "Enter". Now we need to modify a couple of lines to get it to serve our project directory.

First press "i" once and change the line below

DocumentRoot /var/www/

to

DocumentRoot /var/www/project/

You also need to change the line below

<Directory />

to

<Directory /var/www/project/>

Basically thats all we need to do. Press "Esc" and then type :wq. This will save the changes and exit the file. Now we need to make this configuration file readable by apache2, to do that we go back to the terminal window and type.

sudo a2ensite project

This will enable the site. All we have to do now is reload apache2 so that it will read the new configuration file.

sudo /etc/init.d/apache2 reload

This will restart the apache2 server and will load our new project virtual host. Now if you go to your browser and type

project.localhost

You should see the project directory load. Voila. If you want to add even more sub domains just rinse and repeat.

If you have any queries about this tutorial or notice any errors please comment and I'll get back to you asap.

Cheers