Set up your own development domain

If you build sites, or applications, or anything related to the web, you have 3 main choices:

1. You can build static files locally, but your path will look something like file:///Users/xxx/Documents/Projects/xxx/Header:Footer%20(FF)/Mock/index.html (mac)
2. You can develop online, and you’ll get a path like http://www.xxx.com/project/index.html (if you use your own domain, or go in stealth mode and build on the client domain and worry about people discovering your work in progress. This makes it hard/annoying to work without an internet connection
3. Install a webserver like Apache on your computer. Now instead of file:///, you can type localhost (plus a “:port” number depending on how yours is configured) and get the best of both worlds. A relative path, server features, and offline workflow.

Now, obviously, the 3rd option is the best choice. Once configured, you can build in rich environments like PHP, Ruby, whatever you want, with the comfort and security of your own computer. But the holy grail of all of this is to strip out “localhost:8888/project/” and instead make it show a domain name only accessible to you. For example, when I visit http://elihorne.com on my computer (with my development tools turned on), I get a completely different website than the outside world. It’s the same trick BestBuy used to create a fake site for anybody trying to verify a coupon offer from inside one of their stores. And here’s how to do it:

First, the fundamentals. I’m basing this step-through on my computer configuration, and yours could be very different. I’m running Mac OS X version 10.4.11 on my work computer, and use MAMP (Mac Apache MySQL PHP) version 1.71 as my webserver/environment. There is a Pro version (read: $$) that claims to make some of the stuff we are about to do “easier,” but the fully functional basic MAMP can be downloaded for free.

Once you’ve downloaded and installed MAMP, you should have a file structure that looks something like Applications/MAMP/htdocs. If yours is different, no big deal, but that example is how we are going to proceed. At this point, with MAMP running, you should be able to type in http://localhost:8888/MAMP/ and see the default application landing page. If you don’t see that, either the application isn’t running, or you did something wrong. Seek help. Everybody else, let’s trudge along.

Edit mamp/conf/apache/httpd.conf with your text editor. I recommend Textmate, although anything that doesn’t add bloat to the code will work. Text Wrangler is a free Mac alternative.

At the bottom of that file you will see something like
# Use name-based virtual hosting

Just after that you want to insert the following code:

NameVirtualHost *
<virtualhost *="">
DocumentRoot "/Applications/MAMP/htdocs"
ServerName yourdomain.dev
</virtualhost>


Obviously, “yourdomain.dev” should be whatever you want to be your internal domain. This can be a TLD like .com, .net, or something you completely made up like internal.blah

Now, fire up terminal (applications/utilities/terminal) and type in
sudo pico /etc/hosts

You have to do this because the file is invisible, and can’t be accessed via Finder.

Edit this file to look like:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost yourdomain.dev
255.255.255.255 broadcasthost
::1 localhost


Again, yourdomain.dev can be whatever you want. Obviously, if you make it cnn.com, you will not be able to visit the real CNN.com while your server is running.

Follow the terminal instructions to save this file (control x to bring up the menu, Y for Yes, and then enter to confirm the file location). If you aren’t sure of the changes took, open it again with the above command and check. If successful, reboot MAMP. Otherwise, rinse and repeat.

At this point, visiting yourdomain.dev:8888 should take you to your web root (/htdocs).

If you want to strip off the :8888, make sure that you don’t have OS X’s Apache running (system preferences/sharing/web sharing should be unchecked), and then on the MAMP control panel, hit preferences, ports, and change Apache from “8888″ to “80″ (default apache web port). Wait for MAMP to reboot.

Now, yourdomain.dev should point to /htdocs. http://yourdomain.dev/hello.html is /htdocs/hello.html.

Good luck!

Update: Like screenshots and multiple domain tips? Check out The Giraffe, also published recently!