How To Setup Development Domains On OS X

I do quite a bit of design and development with my company. To keep things streamlined I’ve setup my machine as a local development server to avoid the obvious hassle of having to FTP files every time I make a change that I want to see. Setting up your machine as a development server is another post for another day, but since OS X comes with Apache, this really should work for pretty much anybody on OS X.

One of the hassles with developing locally is having to access the various sites I’m working on with something like: http://localhost/theappleblog/

This isn’t very convenient in term of things like absolute links to images or other pages within the site. Ideally you’d have something like:

Notice the “.dev” instead of “.com”? That’s what we’ll be setting up. This way you won’t need to worry about the method you are linking to images and other pages. Is it a necessity for development? No. Is it nice to have? Very.

The Setup

The first thing we need to do is edit the hosts file. This file will let us override what the browser thinks of the .dev TLD since .dev doesn’t really exist in the domain world.

  1. First, fire up terminal and type in: sudo pico /etc/hosts
    This will give you something like this screenshot.
  2. Next, you’d want to type in:
    This basically tells your browser that should point to localhost and not try to search for it elsewhere.
  3. After typing in that, you’ll want to save that file (Control+X). Keep Terminal open though.
  4. Now we need to edit the httpd.conf file for Apache. For me, this is located in /private/etc/httpd/ though your setup could vary. Open up the file in your favorite code editor and do a quick search for “NameVirtualHost”. Make sure it’s not commented out. If it’s comment out, uncomment it out. If it’s not there, then add it. Either way, you should have a line with this: NameVirtualHost
  5. Below that, we’ll add a VirtualHost rule to tell our where to point to.

    DocumentRoot "/Users/UserName/Development/yourdomain"

    The DocumentRoot needs to be set to wherever your development folder is for whatever you are working on.
  6. Finally, we need to save the file and then restart Apache. Restart Apache within Terminal by typing in something like sudo apachectl graceful (depending on your setup).

After restarting Apache, you should be good to go! Fire up your browser of choice and type in your new development domain and you should see your main index file!