When I fist started web development, “localhost” is basically my only option when viewing my sites, “localhost/example” would be the site url for a site named “example” in my web root folder. This introduce a lot of issues, some web service refused to communicate with requests come from localhost, all “localhost” records in database will need to be replaced with the live site url when going live, multi-site feature not available, etc.

Little did I know you can actually change the domain of a site to whatever you like, and the whole process is free.

Here is how it goes:

The goal is simple, we’d like to create a local development environment that uses a domain name instead of localhost/xxx to access in our browser. That way when we deploy a site to the live environment there is less chance that the site breaks down.

Mac OS X:

If you have the “Server” app installed, I would suggest turning it off, the reason is that every feature it has (to help set up local development environment), you can do it with the OS’s ¬†built-in Apache.

Step 1.

First step is to check your apache server is working, you can skip this if you have been working with localhost for a while.

Open terminal and type:

sudo apachectl start

or

sudo apachectl restart

then open up your browser and access localhost, it should show you It Works!

The built-in apache config file is located at

/etc/apache2/httpd.conf

what you need to do is edit this file, so that the line

Include /private/etc/apache2/extra/httpd-vhosts.conf

is not commented.

Step 2.

The built-in apache config file is located at

/etc/apache2/httpd.conf

what you need to do is edit (you’ll be asked to input your admin password) this file, so that the line

Include /private/etc/apache2/extra/httpd-vhosts.conf

is not commented.

Next step you will need to edit the httpd-vhosts.conf located at

/private/etc/apache2/extra/httpd-vhosts.conf

(again, admin password)

Step 3. Create the virtual host

Let’s say we want to create a site with domain name

example.com

(this will be used locally, so you can use any domain name you want, you can play god!)

Before we go ahead and play around with the config files, it is always a good idea to make a back up.

Open up the

/private/etc/apache2/extra/httpd-vhosts.conf

file in your editor, you will see some example code in there, don’t worry about those, you can delete them. Put the following code in:


<VirtualHost *:80>
    DocumentRoot "/home/sean/Sites/example"
    Servername example.com
    ServerAlias www.example.com
    <Directory "/home/sean/Sites/example">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

I have my web document root at /home/sean/Sites, check out this other post to use your own location as apache document root.

Next open up the hosts file located at /etc/hosts and add the following code in, then save the file.

127.0.0.1	www.example.com
127.0.0.1	example.com

This will basically redirect all requests sent to example.com or www.example.com to your local apache server, where our previous vhost set up will be triggered.

And the last step is to restart your apache server, just run

sudo apachectl restart

in your terminal.

Now you should be able to access you “example” site folder via www.example.com in your browser.

Follow me

Sean Wu

I love coding, and I believe I can make your life easier with my coding skills. I also love making cool websites and innovative apps. Oh, did I mention I'm a coffee junkie too?
Follow me

Latest posts by Sean Wu (see all)

How to set up local Apache server with domain names (virtual hosts) – Mac OS X
Tagged on:                 

Leave a Reply

Your email address will not be published. Required fields are marked *