Post Archive

› September 6, 2004

Staging websites on Mac OS X

  • Reported by Nate

Update: Thanks to helpful commenters, a 2 step method has been discovered, it is much cleaner and produces all the same results See this comment for a summary.

If you use Mac OS X as you're primary computer, and as a web designer, you'd like to test drive your websites without having to upload files via FTP repeatedly, then you might benefit from setting up your machine as a staging server to host multiple websites.

There are a number of ways to do this, probably the easiest being to simply turn on "Personal Web Sharing" in the "Sharing" preferences panel and start putting sites in your "Sites" folder (found in your home directory). This works pretty well, but you have to address things relatively (e.g. "../../something") since each site won't have their own root, and are in fact found in a subfolder that has your username. Example:

192.168.0.101/~nate/clientalpha

Now if you only ever intend to test one website, a lot of this may not apply, but I've compiled a few links that helped me with my setup so that hopefully others can benefit (read on).

I'm also hoping that more knowledgeable folks, and people with different staging setups (and different operating systems, etc) will contribute their own notes/links/suggestions in comments to this post.

  • First I installed PHP by downloading and following the directions that came with Marc Liyanage's OS X software package
  • Then I followed the directions on this SitePoint article Configuring OS X for Web Development in order to have "virtualhosts" for each site I'm working on
  • Then I followed the directions on this MacDevCenter article "Virtual Hosts, mod_rendezvous_apple, and Apache on Mac OS X" in order for the virtual websites to be registered with Rendezvous (which might in the near future be called OpenTalk?)
  • On the Apple Rendezvous developer site there's a link for "Rendezvous for Windows Technology Preview 2" that I downloaded on my Windows test machine, it installs quickly and gives me a handy Rendezvous button that works in IE 6, it's a shortcut to my site staging menu (after which I can copy/paste URLs into various other versions of IE and of course other browsers).

So obviously this combo is just one of several ways to setup your testing. I'm finding it handy because I can quickly get to various testing sites from different computers, operating systems, and browsers without having to upload each file to a server somewhere as I work on it. In reality this means that on my mac I can view a site by simply typing http://clientalpha/, and on other machines I can punch up the site menu via Rendezvous to have each site just 1 click away. So if you have real IT experience (I don't), maybe you're snickering at what I've described here - but hopefully you won't mind sharing some pointers, corrections, or details about your setup for a local network staging area.

Comments

1. September 6, 2004 07:27 PM

Quote this comment

Chris Vincent Posted…

I use my Mac to host several websites, including my blog. This will have to change soon for various reasons, but it's incredibly convenient either way. Test driving locally is far more productive than doing so remotely, and having complete, physical control of the host is nice too.

2. September 6, 2004 09:25 PM

Quote this comment

Andrew Posted…

There's also Dave Shea's Virtual Hosts for Dummies blog entry on this.

3. September 6, 2004 09:38 PM

Quote this comment

soxiam Posted…

I just want to add that I found Patrick Gibson's Virtualhost shell script to work extremely well for those looking for an easy name based virtualhost setup on OS X.

4. September 6, 2004 10:28 PM

Quote this comment

Nate Posted…

Chris - yes I agree, I'm enjoying the convienence, and also the speed of development. Andrew - thanks I completely missed that, and by the looks of it, everything I've linked to and more can be seen in the helpful comments. Soxiam - that looks to be a real timesaver, add your virtual hosts with just one line of text, thanks for the tip.

5. September 6, 2004 10:29 PM

Quote this comment

Paul D Posted…

Does anyone know an easy way to add virtual domains? It would be nice if I could create URLs on the fly like "http://testsite.mydomain.com" that would point to /~myusername/testsite/ and so on.

6. September 7, 2004 08:32 AM

Quote this comment

Nate Posted…

UPDATE: Better way of doing things commented here

Actually Paul, if I understand your question, I think you can do this with the directions I used (via the links I pointed to above). For instance, I just double checked to make sure, and yes, I was able to create a the following domain that works locally: http://bleezel.doblat.foblah/, which indicates that you could pretty much create whatever naming structure you want.

While I was able to completely fabricate this URL, I'm not sure the method used would be considered easy, it would be really cool if could be automated to do as you suggest - that would be a real timesaver. Perhaps an applescript could be created to do this.

So anyways, what I did to make the URL above work is:

  • Added the following to the bottom of my httpd.conf:

    <VirtualHost *:80>
    ServerName bleezel.doblat.foblah
    DocumentRoot "/Library/Webserver/Documents/nateblog"
    <Directory "/Library/Webserver/Documents/nateblog">
    AllowOverride All
    Options All
    </Directory>
    </VirtualHost>

    Listen 9001
    <VirtualHost *:9001>
    DocumentRoot "/Library/Webserver/Documents/nateblog"
    <Directory "/Library/Webserver/Documents/nateblog">
    AllowOverride All
    Options All
    </Directory>
    </VirtualHost>

  • Then I updated my hosts file by typing this in terminal: sudo vi /etc/hosts and following directions from this page: "After entering your admin password, press i for insert mode, move the cursor to the end of the file, and add these lines:
    127.0.0.1    project1
    127.0.0.1    project2"
    Which in my case was actually:
    127.0.0.1 bleezel.doblat.foblah
    "Then press the esc key, type :wq, and press return."
  • Then I restart apache by typing this into Terminal sudo apachectl configtest ; sudo apachectl restart

Now I can get to http://bleezel.doblat.foblah/ from my local machine here, and from other machines I can go to my start page (via the Rendezvous plugin, or at worst by typing in my Mac's IP) where I've got the following link waiting for me:
<?php echo "<a href='http://$_SERVER[SERVER_ADDR]:9001'>NateBlog</a>" ?>. This link takes me to a root URL for this site, even if my IP changes around a lot due to DHCP.

7. September 7, 2004 10:44 AM

Quote this comment

Brent Hardinge Posted…

soxiam's took my link about the script from Patrick Gibson. ;-). It found that in the comments of David Shea's article when I was looking to get a similar setup on my laptop after a recent reinstall.

I did modify the script a little bit, for my needs but other then then it works out of the "box" as advertised. Use is as follows:

sudo /location/to/script/on/local/machine/ newdomainname.dev

With that you have a new domain located at http://newdomainname.dev. When you are finished with that job and want to delete that domain, just enter:

sudo /location/to/script/on/local/machine/ --delete newdomainname.dev

That will clean everything up for you. Patrick has done a nice job of including a man page for the script and even some confirmation questions when it is making changes.

Here is the link to patricks page again

8. September 7, 2004 11:57 AM

Quote this comment

Nate Posted…

Brent and Soxiam are right - don't bother with the directions I listed above, this script from Patricks page is much cleaner and quicker. And making these sites accessible to other computers in your network requires only 1 additional step.

Patricks script separates the virtualhost information into another directory instead of appending it right in the httpd.conf, to do this it adds the following to httpd.conf: NameVirtualHost 127.0.0.1 and Include /private/etc/httpd/virtualhosts. That second line is the directory that you can find your virtualhost data that the script saved for you, each site you setup with the script gets a new file. You can edit these files in bbedit by going to the directory /private/etc/httpd/virtualhosts in terminal and typing bbedit sitename. To the virtualhost file, all you need to add is the following:

Listen 9000 start at 9000, then 9001, 9002, etc for each site
<VirtualHost *:9000> use the same number here
    DocumentRoot "copy/paste path from a few lines above"
    <Directory "
paste path again">
      AllowOverride All
      Options All
      </Directory>
    </VirtualHost>

Now Rendezvous, or the IP can be used in conjunction with the port number to bring up a specific test site on another machine in your network. For example, I'd type http://nates-pbook:9000/ to get to the site above on my windows test machine. Two steps is not too bad!

9. September 7, 2004 01:55 PM

Quote this comment

Paul D Posted…

"Actually Paul, if I understand your question, I think you can do this with the directions I used (via the links I pointed to above). For instance, I just double checked to make sure, and yes, I was able to create a the following domain that works locally: http://bleezel.doblat.foblah/…"

While that's cool, I was referring to something a little different. If I register an actual domain name (say, pauld.com), I could point the DNS to my Mac. Say I have a test site called "abc-corp". The URL www.pauld.com/~myusername/abc-corp would be accessible to clients and partners over the Internet.

So I'm wondering if there's an easy way for Apache to automatically interpret an incoming subdomain request - abc-corp.pauld.com - as a request for www.pauld.com/~myusername/abc-corp? The idea is that this would work from anywhere, not just on my home network, so no messing with Hosts files would be needed. And adding a new directory to "sites" would enable that virtual subdomain.

10. September 7, 2004 03:24 PM

Quote this comment

Nate Posted…

Oh I get it, thanks for explaining Paul. Anyone have a clue as to how what Paul is suggesting could be done? I don't understand this stuff well enough to say, but perhaps Dynamically configured mass virtual hosting holds the answer?

11. September 8, 2004 07:56 AM

Quote this comment

phoukka Posted…

Paul, what you want to do can be accomplished by a combination of name-based virtual hosting and DNS aliases. Set up your Mac to handle abc.pauld.com from a particular directory, and set up your DNS server with an alias that points abc.pauld.com to www.pauld.com. Apache will know what name is requested, and your virtual host configuration will point incoming requests for abc to whatever directory you need. For good dead-tree documentation, pick up a copy of the Apache Cookbook, by O'Reilly, which has quite a bit of practical advice on the subject.

12. September 8, 2004 05:59 PM

Quote this comment

Paul D Posted…

Neat-o, thanks for the help.

13. September 11, 2004 08:55 PM

Quote this comment

Pete Posted…

Does anyone know an easy way to have Mac OS X render SSI includes?

14. September 30, 2004 11:10 AM

Quote this comment

Chris Posted…

You should be able to edit the "Options" parameter in your /etc/httpd.conf and add "Includes" to the list. Restart the web server, and you should have the ability to use SSI includes!

15. October 10, 2004 06:19 PM

Quote this comment

Dave E Posted…

Reading through the above (but not following the links so apologies for duplicated info), and having gone through the process of setting up and testing sites with SSI enabled locally, there are a couple of points worth flagging up:

1. NetInfo Manager (on Mac 10.2.8 anyway) always overrides the 'Hosts' file (which I now never open). So I use NetInfo Manager to enter my local test 'domains' (select 'machines' > duplicate the 'localhost' entry and simply edit the name). Then add a corresponding virtualhost block to httpd.conf (see Nate Sept 7) with the required 'allows' for your test directories. Each time I add another test domain, I just repeat the above, copy the virtualhost block in httpd.conf and simply s&r the test site's 'domain' name - no scripts needed (for just local testing anyway).

2. I always set up a cgi-bin at the same time (enabling this in the virtualhosts block in httpd.conf), since It helps to make the site mirror the typical server directory structure, with 'cgi-bin' and 'html' directories, with the test site root going to the 'html' dir, as it would on the 'real' server. And (even a small amount of simple and usually borrowed and hacked) Perl is always useful.

3. SSI can work in two ways: a. by suffixing every file with '.shtml' and enabling SSI generally in httpd.conf or b. by allowing the XBitHack for the relevant directory within the virtualhost block, then making the relevant .html files executable (and the includes too, if they do any 'if... then' processing themsleves).

16. October 16, 2004 01:13 PM

Quote this comment

Alec Posted…

Hello Nate. Thanks for this entry and letting us know that Patrick's script is the preferred way. Still having trouble getting the virtual host to work with Virtual PC. As I run a lot of SSI, it's important for the virtual host with document root (I have no trouble bringing up the sites via the IP address from Personal File Sharing, but unrooted.)

Could you give a more detailed example for Virtual PC with some actual values plugged in as I'm doing something wrong with the syntax. Getting this error from terminal when I restart Apache: "Listen takes one argumen, A prot number or a numeric IP address and a port number".

17. October 16, 2004 04:43 PM

Quote this comment

Nate Posted…

Hi Alec - keeping in mind that I'm no expert in this stuff, and that I might be doing some things wrong, here are some notes that might help. First, I should caution that I don't have Virtual PC, so if there's a Virtual PC problem with ports I might be out of suggestions. But just incase it's something else, here's a full example of what one of my virtualhost files looks like. This file was created using the instructions from this comment, which is to say, using Patrick's script and then adding to it. The part I added in was from "Listen 9005" on.

<VirtualHost 127.0.0.1>
  DocumentRoot /Users/nateremote/Sites/dpa
  ServerName dpa
  ScriptAlias /cgi-bin /Users/nateremote/Sites/dpa/cgi-bin
  <Directory /Users/nateremote/Sites/dpa>
    Options All
    AllowOverride All
  </Directory>
</VirtualHost>

 Listen 9005
<VirtualHost *:9005>
    DocumentRoot "/Users/nateremote/Sites/dpa"
    <Directory "/Users/nateremote/Sites/dpa">
        AllowOverride All
        Options All
    </Directory>
</VirtualHost>

18. October 16, 2004 04:48 PM

Quote this comment

Nate Posted…

I forgot to add, that with that virtualhost file in place, I can then get to the staging site from my computer at http://dpa:9005/ and any other computer in my network at http://pbook.local:9005/ (pbook = my computer name) and I can find the files to edit at ~/sites/dpa/ (~ = home directory).

19. March 6, 2006 09:43 AM

Quote this comment

naked_ollie Posted…

I can only seem to set up 3 different sites using the method desribed in post 8. If I try to add more sites on subsequent ports (9003, 9004 etc) I lose the first site upon restarting apache. Any ideas?