[Testing Multiple Web Sites on Mac OS X] at tagSwap.net: Open Source Lasso Code

[Testing Multiple Web Sites on Mac OS X]

: Figure 1.

Finding Apache's httpd.conf file.
: Figure 2.

Using NetInfo to create a "machine" that will enable development URL domains.

Greg Willits, January 04, 2005

Developing and testing a single Lasso web site on your computer isn't difficult: turn on web sharing, put all your files in /Library/WebServer/Documents/, load your browser with http://127.0.0.1/ and you're off and running.

Developing and testing for multiple web sites involves a little fancier setup. Moving project A into the web server root then swapping all the files for Project B is tedious, prone to error, and just plain unbecoming a professional developer. :-)

By the end of this article, you'll be well prepared to handle as many sites as you need and bounce between them by doing no more than entering a new URL in your browser. There are several ways to accomplish this, but we'll only look at one method that I find straight forward and easy to manage.

I have assumed you're almost a total newbie, so have tried to be quite detailed in my explanation of steps. Let's dig in.

Organizing Projects

Everybody has their own instinctive way to organize projects. I won't try to advocate one over another, but what I explain below has some handy advantages when working with multiple web projects.

I've tried a variety of setups, and ultimately for convenience, simplicity, and productivity I keep all my projects in the /Library/WebServer/Documents/ folder. So, I have a setup like the following:

/Library/
  /WebServer/
    /Documents/
      /fwprocom/   <--- project folder
        /fwpsite/   <--- web site virtual root folder
        /ArtMstrs/   <--- original masthead art, etc
        /dbPrep/   <--- table create statements, etc
      /ldmlorg/
        /ldmlsite/
        /ArtMstrs/
        /dbPrep/

The /fwprocom/fwpsite/ folder for all practical purposes is the website. Being housed right in Apache's server root, any change I make to site code (be it LDML or HTML), the file is ready to test instantly. I will usually have the browser open, and simply refresh the page to test changes. This makes for an effective edit/test loop.

As you can see, I also keep other files in the project folder. These are limited to the files I use to develop content for the site, or document the site. So, master PhotoShop and Illustrator files, master table create SQL scripts, and so forth. I keep any business files for that project (RFQs, invoicing, proposals, etc.) under a separate customers hierarchy in my ~/Documents/ folder. After trying a few things, I found that having all the technical stuff necessary for a specific site project all in one place was just easier on the brain, and made for simpler windowing in Finder.

If you're a GoLive user, the /fwprocom/ project folder is the place where GoLive's project files will also live (the .site file, and the .data and .settings folders).

Apache Configuration

Mac OS X's web sharing is nothing more than Apache with a spiffy Control Pane on/off switch. To allow you to test multiple sites at the same time with useful URLs in your browser, we're going to start by editing Apache's infamous httpd.conf file.

While we can't really go into all of Apache's wonderful ways to handle virtual hosting, the method I describe here is easy to setup and maintain as you add website projects. Even if your preferred server is not Apache, you may be inclined to use it on your development machine, because it is already there, and it saves you the bulk of installing a whole HTTP server just for testing -- that is unless your sites are developed to somehow leverage some fancy features of your preferred web server, and you need it to test anyway.

To find httpd.conf (part of the hidden Unix underpinnings of OS X), open a new window in Finder (any location is fine). Type shift-command-G (Go > Go to Folder from the menubar). This will give you line to enter a folder path on. Type /etc/httpd/ (see Figure 1) and press return.

You're now looking as some of Apache's innards. In that folder you will find the file httpd.conf. The httpd.conf file is protected by certain Unix file permissions that will require you to enter your OS X user name and password. Open this file using a text editor -- do not use TextEdit, or Word, or any other word processor. Use BBEdit or another programmer's text editing application that will allow you to authenticate who you are when the file is saved.

When you have httpd.conf open, do a find for this string: ### Section 3. This jumps you to the Virtual Hosts section of the configuration file. There's a lot of stuff in here, but we're going to go in like skilled surgeons and change just a few things.

First, scroll down and find a line that looks like this:

#NameVirtualHost *:80

and change it to look like this:

NameVirtualHost 127.0.0.1

This will turn one of Apache's virtual hosting methods on.

Next, skip to the very bottom of the file. There should be at least on line at the bottom that looks like this:

Include /private/etc/httpd/users/*.conf

Depending on your version of Lasso, and some other things, there may be a few Include lines at the bottom of the file. Above those lines, you should see a section that mentions rendezvous like this:

<IfModule mod_rendezvous_apple.c> ...bunch of stuff... </IfModule>

We want to insert our virtual host configuration above the Include lines, and below the </IfModule> (or whatever might be the actual last section like that one in your file). Start by editing that area to look like this (use the exact "mysite" text for now), and then save the file.

</IfModule>

# ----------------------- vhost configs

<VirtualHost 127.0.0.1>
    ServerName *
</VirtualHost>

# mysite
<VirtualHost 127.0.0.1>
    ServerName     www.mysite.dev
    DocumentRoot   /Library/WebServer/Documents/myproj/mysite
    ErrorLog       /private/var/log/httpd/mysite_errorlog
    CustomLog      /private/var/log/httpd/mysite_accesslog common
</VirtualHost>

# -------------------------------------

Include /private/etc/httpd/users/*.conf

So now we have one virtual host configuration entered, but we need to make it specific to your site. As you might have guessed, we do that by editing the places where it says myproj and mysite. If we use the above example of my project organization, We'd see the following virtual host:

# fwpro
<VirtualHost 127.0.0.1>
 
 
 
 ServerName     www.fwpro.dev
 
 
 
 DocumentRoot   /Library/WebServer/Documents/fwprocom/fwprosite
 
 
 
 ErrorLog       /private/var/log/httpd/fwpro_errorlog
 
 
 
 CustomLog      /private/var/log/httpd/fwpro_accesslog common
</VirtualHost>

As you can see, only one place actually has to have the exact name of the /fwprocom/fwprosite folder names. Every other definition is flexible including the URL that you want to use. None of the file names have to match the URL. So, go ahead and edit the VirtualHost block to reflect the names you want to use.

If you insist on not adopting my method of storing project folders in /WebServer/Documents/, and instead have only the web site root folder there, then of course, you would edit the DocumentRoot line to be more like this:

DocumentRoot /Library/WebServer/Documents/mysite

Now, assuming you want to run multiple sites on your computer, copy and paste a duplicate of the VirtualHost block above or below the existing one. Edit the file names to what you want for your second site. Repeat this as many times as needed to cover all your projects. Save the file. We're done with it. You can close it, or keep it open for experimenting.

Restart Apache

Every time you edit anything in httpd.conf, Apache has to be restarted. To do this, all you have to do is open the Sharing system preferences pane, and stop then start Personal Web Sharing.

When you do that, it should start up within a handful of seconds. If it doesn't start up rather quickly and Personal Web Sharing stays grayed out while the "Starting up..." message lingers on, then there's a problem with what you've edited in the conf file.

Open Terminal, and type httpd -t and press return. This will test the configuration file and should help identify where the problem is.

With httpd.conf edited, and Apache restarted, we have just one more step to go before you're ready.

Defining Virtual Host Test Domains

I mentioned that I use URLs like www.fwpro.dev for local system testing. How do we get that URL to point to your computer? There's two ways. The GUI driven way using NetInfo, or the config file way using the /etc/hosts file.

Test Domains via NetInfo Machines

The NetInfo utility centralizes a lot of Unix user and networking configuration stuff. You'll find it in /Applications/Utilities, and the full application name is NetInfo Manager. Open it up.

Have a look at Figure 2, and perform these steps:

unlock NetInfo (click padlock, enter your user password)
click the / in the left column
click "machines" in the center column
click on "localhost" in the right column
click Duplicate toolbar button (or command-D)
in the bottom section, edit the field that says "localhost copy" and change it to whatever you entered as the ServerName for the site in httpd.conf)
click outside of the field
command-S to save

Repeat the above for each web site you're testing on your system.

Test Domains via /etc/hosts

In Finder, use the Go To command (shift-command-G), and type /etc/ (similar to Figure 1) and press return. Locate the file hosts in that directory and open it with your preferred text editor. The file should look something like this:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1     localhost
255.255.255.255     broadcasthost
::1     localhost

To add test domains add lines that look like this:

127.0.0.1     www.mysite.dev
127.0.0.1     www.projectA.dev
127.0.0.1     signup.projectA.dev

Those domain addresses should be identical to the names you define in your apache configuration.

Configuration for Subdomains

So far we have used fixed URLs like www.mysite.com. If you have a site that works off of subdomains, using a fixed reference to www is not going to work so well. There's good news and bad news.

The good news is that Apache is very easy to configure for this. In httpd.conf, you would change the ServerName, and add a new line like this:

ServerName mysite.com
ServerAlias *.mysite.com

That's it. Now, Apache will serve any subdomain through that site. If you need to have a subdomain actually go to another whole site, you can do this for the two sites:

ServerName mysite.com
ServerAlias subA.mysite.com
DocumentRoot /Library/WebServer/Documents/myproj/mysite

ServerName mysite.com
ServerAlias subB.mysite.com
DocumentRoot /Library/WebServer/Documents/mysubproj/mysubsite

The bad news is that NetInfo does not allow wildcards. We cannot create a new machine, and have it serve to *.mysite.com. To complete the setup, it will be necessary to add a machine for each specific subdomain like subA.mysite.com and subB.mysite.com.

Now if you have a site that dynamically serves multiple customers by subdomain, you're not going to want to enter 152 NetInfo machines. For such cases you'll just have to create as many machines for subdomains you actually want or need to test locally. The rest of your testing will have to take place on a real server.

Wrapup

I hope this has been thorough enough that you're already up and running multiple sites. As I say, there are actually several ways to do this, but I have found this one easy to set up, easy to maintain, and easy to explain for that matter.