Application Architecture on Localhost

You’re ready to begin development on your project. Now what? Since you are a professional, you need to setup your environment not just a for a single project, but the many projects to come. Sure you could just create a folder on your desktop, and start hacking together an html file from scratch. but I’m gonna show you a better way. The solution I’m going to show you will use a local webserver. I’m using Apache, and you should be too. If you’re using PHP at all, you have to use a web server.

Filesystem Setup

It should be easy to get to, and easy to manage. Lets start by going to root of your filesystem either in Finder or the Terminal, and create a directory ‘www’. This will contain everything web related. In the ‘/www’ is where you begin to organize. I suggest by type first. Think for a minute about the kinds of things you’ll need – websites, log files, software from third parties like jQuery, Smarty, BluePrint – are a few of the basics. Create a directory to hold each of these type of information. ‘libs’ for the 3rd party libraries, ‘sites’ to contain each of your client web projects, and ‘logs’ to hold the log files that are associated with each of your websites. So your structure should look like the following:

• www
  • libs
    • php
    • js
    • css
    • sql
  • logs
  • sites

In the libs directory I suggest one more level of organization – language name. That way your PHP, Javascript, Ruby, and CSS all separate. Then the only other thing to do is to make sure you include the version number of any libraries you extract into here. e.g. /www/libs/{lang}/{software-1.0} Now you have one place on your system to store all your software libraries. When you create your website projects , copy the desired libraries to your /www/sites/{project} directory.

In my ‘/www/sites’ directory, I use project names, which is typically the domain name minus the top-level domain. Generically it looks like ‘/www/sites/{projectname}’. So my Mastodon Labs project is in the directory ‘/www/sites/mastodonlabs’, which lives on the internet at mastodonlabs.com. If you know that you’ll have a client where you work on multiple projects, you could use the client name as a level of organization e.g. /www/sites/{clientname}/{projectname}.

Now that your structure to for organizing projects is intact, what should go into the project? a folder for documentation, one for sql scripts, one for the website root, and one for your framework (if you use one). I use CodeIgniter

• /www/sites/foobar
  • ci_system
  • docs
  • site
  • sql

You may be wondering why the directory ‘foobar’ isn’t the site root. There are multiple reasons. Most importantly, it’s a best practice not to have any config files in the document root of your website. This helps keep your website secure by design. Every framework has at least one, usually containing database information. So a user should never be able to visit a URL like http://foobar.com/system/config/database.ini.  While there are techniques to hide such directories, it’s just best not to put them in the document root.

‘docs’ is a good place to keep notes about the project, a list of things to do for the current project, special instructions, list of notes for the specific versions of the site. For projects that require a database, it’s also good to have a set of SQL scripts that build/modify your database structure. For that purpose, you use the ‘sql’ directory.

Since all these directories are contained in one project directory, it’ll be easy to manage them all in a version control system. We’ll talk about that in the next post, but for now, let’s focus on your Apachefgv configuration setup.

Apache Configuration

When Apache starts up, it parses it’s config file httpd.conf. On my mac (OS X 10.4), this is located at /etc/httpd/httpd.conf. While it’s possible to have all your configuration in one big file, I use a second file called vhosts.conf which is read in with an include statement.

Include /etc/httpd/vhosts.conf

This file holds all the virtual hosts (read: websites) configurations on your machine. At its most basic, this file is responsible for mapping the url of the website to the corresponding directory in the filesystem. There’s a lot it you can put here, but for a simple websites this is all you need.

When you’re doing your local development, you only need to worry about one hostname – localhost. You’re probably wondering “but how do we access more than one website?”. The answer is ports. By default, websites are served on Port 80. It’s possible to have your web server listen to more ports for requests.  If you want to listen to port 3000, you would put this statement in httpd.conf

Listen 3000

This gets to you have way there. Now apache will listen to requests on that port. When it gets a request, what should happen? First add the following to your httpd.conf, if its not already in there.

NameVirtualHost *

Now you need to tell it which virtual host you want to receive it. go to your vhosts.conf file and add the following lines:

<VirtualHost *:3000>
    DocumentRoot /www/sites/foobar/site
    ErrorLog /www/logs/foobar/error.log
    CustomLog /www/logs/foobar/access.log common
</VirtualHost>

Now you just stop/start apache so that it reloads with your new configuration. Be aware that the /www/logs/foobar directory needs to exist before you restart Apache, otherwise Apache will not restart successfully and it will fail silently (you wont see an error message). Apache will create the log files if they don’t already exist.

On my system, I use /usr/sbin/apachectl stop to shutdown the server, and use /usr/sbin/apachectl start to start it up.

Thats it. Now  you see your website in your browser when you load http://localhost:3000

Happy Computing!