Local web development on Mac OS X
Posted on September 20th, 2007 by JeffNote: 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:
- Open your System Preferences… Sharing
- Turn on Personal Web Sharing
- 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:
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:
- Edit the httpd.conf file. I do this using vi in Terminal, by executing the command:
sudo vi /etc/httpd/httpd.conf - Uncomment the NameVirtualHost line and edit the line so it reads
NameVirtualHost 127.0.0.1 - Add the following lines to the file:
ServerName MyProject DocumentRoot /Users/username/Sites/MyProject - Edit the hosts file by issuing the command:
sudo vi /etc/hosts - At the end of the file, insert the the line:
127.0.0.1 MyProject - 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.
[...] 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 [...]
Posted at 3:40 am on November 20th, 2007I 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.
Posted at 11:55 pm on January 5th, 2008@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!
Posted at 10:28 pm on January 6th, 2008I tried the vi command, but all I get is:
~
~
~
~
“/etc/httpd/httpd.conf” [New DIRECTORY]
What am I doing wrong??
Posted at 7:59 am on January 31st, 2008@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:
Posted at 11:20 am on January 31st, 2008