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.
