June 19, 2007
Webdev: How to Set Up a Sandbox Server in OS X
If you're new here, please subscribe to my RSS feed. And follow me on twitter. Thanks for visiting!
Last week I wrote about the benefits of setting up a local web development environment, or what developers call a “sandbox”. In web developer speak, a sandbox is a server owned by an individual developer where he or she can do all development and testing without affecting anyone else (or be affected). Once changes are developed and tested, they’re checked in to the main source code for other developers to access.
We’re beefing up our own development environments, getting a more formal structure using Subversion and local sandboxes. Here’s the setup process that I’ve documented for these local servers.
1. Get your local web server running.
OS X has apache installed by default, and you can use that. Or, you can use the webserver that comes with MAMP. MAMP (which stands for Macintosh, Apache, MySQL, PHP) is a nice, self-contained alternative to setting everything up manually.
There are some significant advantages of using MAMP as it leaves the operating system fully intact. So you can upgrade and configure it to your heart’s content and not worry about upsetting the operating system or having an OS upgrade disrupting your development configuration. It also has PHPmyAdmin set up by default.
The MAMP that I use is available here. The free version is all I need. If you get the professional version, I think it offers some advanced configuration. From the looks of it, it automates everything that I am doing in this how-to. So if steps 2-4 seem overwhelming to you, check out the paid version of MAMP.
After downloading and installing MAMP, run it and you’ll have a webserver running on http://localhost:8888.
Since OS X comes with Apache which runs on the default port, MAMP is configured to run on a different port. You can configure it to run on any port you want, including port 80 (the default http port), but only if you have the personal web sharing turned off in OS X.
2. Set up a directory for your local website.
I created a directory called Sites in my home directory, ~scott/Sites, that will hold all of my development projects. This ensures that my local work gets backed up by my backup process.
Example, create a directory called (we’ll need this path in step 4):
/Users/username/Sites/testsite
MAMP has it’s own default directory for the web root, but we’ll be setting up a virtual host on a fake domain for our purposes.
3. Set up your fake development domain
So we can best simulate a production website, we need a domain to test on. Otherwise, we’ll be running in a subdirectory of the web root, which can be problematic with urls.
Run the OS X netinfo manager. Generally this is located here: “/Applications/Utilities/Netinfo Manager.app”. Or find it by typing ‘netinfo’ into spotlight.
a. Click the lock on the lower left to unlock the application.
b. Click on machines and localhost.
c. Click the ‘duplicate’ icon in the menu.
d. The new duplicate machine will appear in the list with focus. Double click on the name “localhost copy” in the property value and change it to reflect the name of your local test site. I use .dev as the TLD for my test sites, like sitename.dev.
e. Select Domain > Save from the top menu to save the changes and then quit from this application.
With this process, we just created a virtual hostname that refers to your local computer. Only this computer knows about this domain name.
4. Update the MAMP Apache configuration file with this virtual host
Edit the MAMP httpd.conf file. I use textmate, so from the command line, I type this:
$ mate /Applications/MAMP/conf/apache/httpd.conf
Down at the very bottom of the file, locate Section 3: Virtual Hosts
Add the following directives at the very end:
NameVirtualHost 127.0.0.1
# This makes sure that localhost works.
<virtualhost 127.0.0.1>
DocumentRoot /Applications/MAMP/htdocs
ServerName localhost
</virtualhost>
# Add your development hosts here
<virtualhost 127.0.0.1>
DocumentRoot /Users/username/Sites/testsite
ServerName sitename.dev
</virtualhost>
5. Restart the MAMP servers to pick up the httpd.conf changes
If MAMP is running, click the stop/start servers button
6. Test
Going to the URL of the domain you created:
http://sitename.dev:8888
Don’t put www in front of it.
You should see an empty directory listing. To ensure that you are looking at the correct directory, you may want to add a quick index.html file to the testsite directory.
If it works, congratulations, you now have your own sandbox. Next step is to checkout the development code into the directory you created and configure as necessary to connect with a database, etc.
[...] Register « Webdev: How to Set Up a Sandbox Server in OS X [...]
Do you think this will be the same in Leopard or improved? I’ve considered doing this in the past I like the way you have layed out the process step by step
Thank you Scott for a straightforward process. I was able to get this going (and used your suggestion for Headdress). The problem I still have is that I can’t get my PHP includes to display locally. I added the directive to Headdress: AddHandler application/x-httpd-php .html however, didn’t work. What am I not doing?
I figured it out with Headdress: Opened the Server Drawer, double-clicked on “/etc/httpd/httpd.conf” and there is was, piece ‘o cake: two checkboxes, “Use Server Side Includes” and “PHP Active.” Restarted Apache and PHP includes now parsed. Thanks again for the simple to follow instructions and the Headdress recommendation!
Forgot to mention that the AddHandler application/x-httpd-php .php .html (sorry, my typo above) directive must be added in the Headdress Advanced Options.
[...] Give your testing server a nice domain name like sitename.dev that is mapped to a specific site, rather than the whole Sites folder (or wherever you’ve chosen to put it). To do this follow this excellent tutorial Webdev: How to Set Up a Sandbox Server in OS X. [...]
Many thanks! You helped me to set up Drupal CMS on Mac with MAMP as same as on PCs
I’ve tried it several times, but after making changes to the httpd.conf file, MAMP refuses to start the apache server……..not sure what the problem is. If I take out the changes to the httpd.conf file, MAMP works again.
Any ideas?
You surely have some bad syntax in your httpd.conf changes. Unfortunately, the apache error logs don’t show startup errors.
Make your httpd.conf changes and go into terminal and run the startApache.sh script manually.
/Applications/MAMP/bin/startApache.sh
You may get other errors, and it seems that I can’t start up the apache server this way if even there are no problems, but at least you’ll be able to see the errors caused by httpd.conf.
This is what I get in terminal when trying to start apache as suggested:
Syntax error on line 1134 of /Applications/MAMP/conf/apache/httpd.conf:
NameVirtualHost takes one argument, A numeric IP address:port, or the name of a host
This is what I added to the httpd.conf file below # NameVirtualHost *
NameVirtualHost 127.0.0.1
# This makes sure that localhost works.
DocumentRoot /Applications/MAMP/htdocs
ServerName localhost
# Add your development hosts here
DocumentRoot /Users/james/dev/halu
ServerName haluniversity.com
Thanks for your help.
james
James, I think you need a port after the IP address, like
NameVirtualHost 127.0.0.1:9999
If so, let me know and I’ll fix the post.
I found some VERY helpful info here:
http://www.sillybean.net/archives/1336
Mac line breaks killed the httpd.conf file after opening in text edit.
After saving with a code editor and unix line breaks, the httpd.conf changes worked and Apache started up.
Thanks for your information !!!
james
excellent.
Honi soit the dazzlingly buy cytotec meat steamed held.
It would be nice to see more of this.
But once you have the domain you can check the IP for example here:
http://www.ip-adress.com/ip_tracer and you can even see whos on the server too with the reverse ip. thats what i use when setting up sites for clients.