Create a Virtual Host in OSX

By  on  

As someone who had always developed on PCs, switching over to using Mac OS X was like going from peasant to prince.  Compared to Windows-based machines, Mac's OS X operating system is light years better.  One OS X feature I make much use of is the integrated Apache server.  Hosting websites on my local machine during development is a must.  Let me show you how to create multiple websites on your local machine.

Step 1:  Create Website Folder

User websites appear in the Users/Sites/ directory.  Let's create a directory within Sites named "mynewsite":

cd ~/Sites/
mkdir mynewsite

As you'll see in a moment, you can add this directory anywhere you'd like, but for the sake of this post we'll add it in the standard Sites directory.

Step 2:  Edit httpd-vhosts.conf File

The next step is adding a new record to Apache's httpd-vhosts.conf file.  My httpd-vhosts.conf file is located within the following directory:  private/etc/apache2/extra/.  This configuration file holds your website virtual host location details.  Let's add mynewsite to the configuration:

<VirtualHost *:80>
    DocumentRoot "/Users/myUserName/Sites/mynewsite"
    ServerName mynewsite.local
</VirtualHost>

The two important configurations are DocumentRoot and ServerName.  DocumentRoot points to the directory we created in step 1.  ServerName refers to the address we want to type into the browser to get to this new site.  I generally create all my hosts with the ".local" domain.

You can also place more specific configurations within this new virtual host, including ProxyPass, directory settings, error documents, redirects, and other settings you sometimes see in .htaccess files:

<VirtualHost *:80>
	DocumentRoot "/Users/myUserName/Sites/mynewsite"
	ServerName mynewsite.local
	<directory "/Users/davidwalsh83/Sites/mynewsite/trunk/">
		Options Indexes FollowSymLinks
		AllowOverride All
		Order allow,deny
		Allow from all
	</directory>
	ProxyPass /web-service http://someotherwebsite.com/api/
	ProxyPassReverse /web-service http://someotherwebsite.com/api/
</VirtualHost>

You can learn more about the possible settings here:  http://httpd.apache.org/docs/2.2/vhosts/

Step 3:  Edit hosts File

The hosts file contains a list of host names and IP address to which they match.  We'll add another record to this file which points the new website's ServerName setting from above (mynewsite.local) to the localhost IP address:

##
# 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
255.255.255.255	broadcasthost
::1             localhost 
fe80::1%lo0	localhost
127.0.0.1	mynewsite.local

Now mynewsite.local host name is pointing toward your machine.  Coupled with the httpd-vhosts.conf file's new settings, the address will find your mynewsites directory!

Step 4:  Apache Restart

The last step in the process is restarting your Apache install:

apache restart

The other method of quickly restarting Apache is by opening System Settings >> Sharing and unchecking and then checking "Web Sharing".  That's all!  Now you can navigate to http://mynewsite.local and see your web files!

Quick Side Note

Your IT people would probably prefer you not use your machine's Apache and instead use a virtual machine for your web development.  I've personally felt the pain of using my MacBook Pro instead of a virtual machine but that was due to MySQL and not Apache.  This tutorial is meant to show you how to quickly get a new site up and running on your local machine. The same process can be used to create a new virtual host on other machines but the file locations will simply be different.

Recent Features

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

Discussion

  1. Victor Bolshov

    Suitable tutorial for beginners, although I don’t understand those praises for Mac OSX (which I’m not at all going to scold). Apache web-server is available for windows, linux & mac, and it is pretty much the same, and you must go all the same steps to setup a virtual host – regardless of the platform you’re using.

  2. So would you recommend using local Apache over something like MAMP?

  3. I can shorten this blog post to less than 140 characters. Use the very excellent virtualhost.sh. http://code.google.com/p/virtualhost-sh/ worth every byte.

  4. kyle

    virtualhost.sh looks interesting. I setup a text expander snippet for step 2, which makes it very quick.

  5. Spencer

    On Leopard you can do the same thing by editing ~/Sites/_sites.conf

    And adding in the host to to the hosts file using sudo as per your instructions above.

    However this is not quite enough though. You’ll probably need to install mysql and also upgrade the php version using the Entropy php5.3 build.

  6. What about choice of IDEs. I feel the PC still has the best list of professional looking IDEs.
    Anything as good as Netbeans, Dreamweaver on the Mac?

    • Netbeans

      have you used Netbeans before? Did you know it runs on more platforms than just windows?

  7. James

    @Emmanuel TextMate, TextWrangler or Coda are all good IDE for web devving on a Mac. Personally I use Coda – its intuitive, modular and costs $99!

  8. I set up a virtual host on Linux a few weeks ago, and it is pretty much the same.

  9. Emmanuel, I think there is Dreamweaber for mac, but who needs dreamweaver anyways? A good text editor is always better. Personally I prefer gEdit from the gnome package.

    • @Buzu, i love dreamweaver; the only other IDE i love as much would be Netbeans.
      @James, well i’ll check them out and see.
      Thanks :)

  10. Aptana is a great IDE, even if it’s a bit over the top

  11. emehrkay

    Nice write up, I have A LOT of named virtual hosts, port-based, etc currently running on my machine. I love to just type in dev/ and get to my little development projects. Yeah, MySQL on Snow Leopard is a hassle, but after installing the package, you typically only need to restart your computer to get it to work.

  12. Nice article but yea its the same on windows, unix, linux and mac..

  13. Nice stuff! If it’s a brand new mac you got, check the post I wrote on configuring development enviorment in OSX:

    http://blue-and-orange.net/reference/osx/configuring-development-environment-in-osx-10-5.html

  14. Developing on mac is a whole new experience if you are used to windows. In the long run I think its a more productive environment than on windows.

  15. mrgstiffler

    I prefer XAMPP even though Apache is built-in.

    Tip for people who develop on multiple machines:
    -Setup XAMPP on all your machines
    -Install Dropbox and move your htdocs to your Dropbox directory
    -Change your Document Root to your new htdocs directory

    You’ll be able to develop locally on all of your machines using the exact same settings. I find this very helpful because I use my work desktop, laptop and home desktop.

  16. Hi David,

    Maybe you should talk about the MySQL tool for OSX and how to set it up. I’ve got it running on my iMac but It’s not working for me on my new Macbook Pro. Maybe I’m overseeing something and you’ve got a great post and the answer for me? ;)

    Cheers!

  17. axlotl

    I believe by default OS X’s httpd.conf does not include the vhosts.conf file, so find this line in that file and uncomment it before restarting apache:


    # Virtual hosts
    Include /private/etc/apache2/extra/httpd-vhosts.conf

  18. Roger

    sudo nano /private/etc/hosts

  19. Trey

    I had to add an IPv6 line to my hosts file to get named virtual hosting to work (OS X 10.8):
    ::1 mynewsite.local

    • Where have you added?

  20. Prakhar

    Brother, you missed the most important thing for MAC OSX. In apache’s httpd.conf also you need to include the file httpd-vhosts.conf to load virtualhosts.

    Uncomment the line 477 in httpd.conf “Include /private/etc/apache2/extra/httpd-vhosts.conf” and reload apache using “apachectl restart”. Now check if the virtualhosts are properly loaded using command “httpd -S”

  21. + hosts file is under /private/etc/

  22. Micah

    Using MacPorts changes a few paths since it maintains a different version of apache:

    Step 2: httpd-vhosts.conf is located at /opt/local/apache2/conf/extra/httpd-vhosts.conf

    Step 4: restart apache with /opt/local/apache2/bin/apachectl stop (then ‘start’)

  23. Hello David Walsh,
    I follow all your step but still not work. message is like this:

    You don’t have permission to access / on this server.
    Apache/2.4.9 (Win64) PHP/5.5.12 Server at 192.168.114.234 Port 80

    can you show me the problem? I install this site in local (http://www.allbesttop10.com/).

  24. All your step are clear, however It still not work, Maybe I missed some point. Please kindly advise. Thank you in advance.

  25. TheKarateKid

    Great tutorial, but one big mention is necessary:

    Apache on Mac is configured by default to read a vhost configurations from the /private/etc/apache2/vhosts directory. You must define your rules there in a new file or else the rule will not be read.

    Alternatively, you can uncomment the

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

    line in the httpd.conf file so the httpd-vhosts.conf file will be read by Apache.

  26. Setting up Virtual Hosts in Apache on Mac OSX 10.9 Mavericks or Mountain Lion is straight forward after you have your local Web Development environment up and running – get your web development up and running first following the AMP stack guide here 10.8 or 10.9 if required.

    The process of setting up Virtual Hosts is done easier in the Terminal either using nano or vi with sudo or as a root user, or you can you a GUI visual editor like Text Wrangler which allows access to the /private/etc directory by clicking ‘Show Everything” in the open dialog box.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!