Note: See an updated posting for local web development on OS X Leopard →

By default, Mac OS X ships with an installation of the Apache web server. If you’re a web designer or developer, this is a great tool to help you develop websites locally, increasing development speed and improving your quality of life. To get up and running, follow these easy steps:

  1. Open your System Preferences… Sharing
  2. Turn on Personal Web Sharing
  3. The URL at the bottom of the screen maps to your /User/username/Sites directory, which is where you should place your local website files. You can also access your local web server by hitting http://localhost/~username/ (replacing ‘username’ with your actual username.)

You can place multiple website projects in your Sites folder by simply creating one folder per project, and accessing each project by corresponding URLs such as http://localhost/~username/MyProject/ and http://localhost/~username/MyOtherProject/. If you like to use absolute paths in your HTML code, you will have to use the following convention:


<img src="/~username/MyProject/images/my-image.jpg" alt="My Image" />

This is obviously not very convenient, especially if you’re sharing your code through a repository with other developers who do not share the same username. Additionally, once you complete local development you need to strip out the /~username/MyProject/ before deploying your code to a public web server. To get around this hurdle, you can customize your Apache server to use custom URLs by following these steps:

  1. Edit the httpd.conf file. I do this using vi in Terminal, by executing the command: 
    
sudo vi /etc/httpd/httpd.conf
  2. Uncomment the NameVirtualHost line and edit the line so it reads 
    
NameVirtualHost 127.0.0.1
  3. Add the following lines to the file: 
    

   ServerName MyProject
   DocumentRoot /Users/username/Sites/MyProject
  4. Edit the hosts file by issuing the command: 
    
sudo vi /etc/hosts
  5. At the end of the file, insert the the line: 
    
127.0.0.1 MyProject
  6. Go back to System Preferences… Sharing, stop Web Sharing, then start it again. This action bounces the Apache web server.

You should now be able to access your project at http://MyProject/, which also allows you to use “real” absolute paths in your markup.

8 Comments

Bust Out Solutions » Blog Archive » OS X Leopard local web development with Apache and PHP

—

[...] previous posting regarding local web development on Mac OS X was geared towards those running OS X Tiger and Apache 1.3. The new Mac OS X Leopard comes with the [...]

Anonymous

—

I understand the edit to the hosts file, but once I’ve published the site live, I then have to delete (or comment out) the virtual host in the hosts file?

If I want to keep switching back and forth between the live site and the virtual localhost, do I have to keep editing the hosts file, or is their an easy way around this?

I thought that just by turning off the local websharing that the local request would timeout and then try to access the site off from the internet, but this doesn’t seem to be the case.

Any suggestions, or am I stuck with editing that file each time?

Thanks.

Jeff

—

@Anonymous — The purpose of creating a local hosts file is so you can develop your site on your local machine. It assumes that your live site is hosted on a server other than your personal computer. If you are hosting your websites on the same Apache instance that you use to do local development, then you could try using two different directory paths — one for development and one for production. Set the local hosts file to point to development directory, then when you want to go live, do a “deploy” by copying files to the production directory. I’ve never done it this way, but seems like it would work. Good luck!

Guillermo

—

I tried the vi command, but all I get is:

~
~
~
~
“/etc/httpd/httpd.conf” [New DIRECTORY]

What am I doing wrong??

Jeff

—

@Guillermo, looks like you don’t have an /etc/httpd/ directory. If you are running Mac OS X 10.5 (Leopard) please use this tutorial instead:

Robert Kash, Jr.

—

I really like your tutorial, but I want to make sure that I’m doing stuff right locally.

I ran into a problem when I decided to work on another Joomla! 1.5 site. Needless to say, I was able to figure out how to piece my site back together, but I’m afraid to wipe out another Site build ever again. I have sites that need attention locally because some of my clients don’t have a host yet- (frustrating to me because I can provide that).

I found these two other sites that show how to work on multiple sites locally, but I’m uncertain. Here they are:
http://web.mac.com/nshoffner/MAMP/index.html
and
http://www.sitepoint.com/article/os-x-web-development/

They are both different in comparison. If your busy, just send me a link, but if you have time to explain a bit- that would be great.

I use Mac OS X version 10.4.11- Tiger, MAMP version 1.7.2, and Joomla! version 1.5.8.

Best regards,
Robert Kash, Jr.

Jeff

—

@Robert, first of all, if you are using Mac OS X Leopard (10.5.x) please see this updated tutorial.

Otherwise, in order to add multiple sites to your local web server, simply repeat steps 3-6 for each new site, replacing “MyProject” with the name of the site, which should correspond to the name of the folder under your Sites folder. Each new site gets its own folder.

Hope that helps!

Robert Kash, Jr.

—

Ok, I’ll try it out.

Thanks,
Kash