Setting Up Virtual Hosts

Setting Up Virtual Hosts

/ 77 responses

Did you read about how to set up a local server environment, or do you already know how to do that? The next step is setting up virtual hosts. I’ve found most – if not all – of the resources and tutorials about setting up virtual hosts to be lacking. I’m going to set it up for the first time on the laptop I’m on, so I’ll be able to guarantee every step.

At this point, MAMP is set up, and going to http://localhost:8888 will take you to the document root you set.

1. Allow virtual hosts

Mac

In Finder, go to Applications > MAMP > conf > apache > httpd.conf and open the file with your text editor.

Find this line:

# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Uncomment the code by removing the hash symbol.

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
Windows

In File Explorer, go to C:/ > MAMP > conf > apache > httpd.conf and open the file with your text editor.

Find this line:

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

Uncomment the code.

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

2. Allow SymLink Override

Find this line in that same httpd.conf file.

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

You’re going to change None to All.

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
</Directory>

3. Add the virtual host path

First of all, open MAMP, and ensure the document root is Applications > MAMP > htdocs. This is the default, but if you’ve been using localhost, you may have moved it.

All the way at the end of the extra/httpd-vhosts.conf file, you’re going to place a code that signifies a virtual host and specifies the path. Place this code at the end of the document.

<VirtualHost *:80>
  ServerName example.dev
  DocumentRoot "/path/to/directory"
</VirtualHost>

Change the DocumentRoot to wherever your PHP project is located. This is my path, but yours will of course be different.

Mac
DocumentRoot "/Users/tania/sites/learnphp"
Windows
DocumentRoot "C:/Users/tania/sites/learnphp"

Make sure to restart the servers on MAMP after making any changes! If you don’t reset the server to apply the changes, nothing will work even though you know you’ve done everything right. Trust me, I’ve done that too many times.

4. Allow your computer to recognize your local domain

Mac

Open the Terminal application. It doesn’t matter if you don’t know how to use Terminal or the command line; you only need to follow strict commands right now. (However, please read this guide when you decide to learn it!)

Type this in Terminal.

sudo pico /etc/hosts

You will be prompted for your password. Then a scary screen will come up that looks like this.

## # 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 example.dev

You are actually editing a text based file. At this point, I’m just going to keep pressing the down arrow until I reach the end of the list. At the next line, I will type my new server name after 127.0.0.1, which is the computer’s local address.

127.0.0.1 example.dev

Now press ctrl + o – Not cmd + o – to save the file. Press enter to confirm. And press ctrl + x to exit.

Windows

If Notepad is open, close out of it. This time right click on Notepad and select “Open as Administrator”. Open this file in Notepad:

C:\WINDOWS\system32\drivers\etc\hosts

At the bottom of the file, type the name of your virtual host.

127.0.0.1 example.dev

At this point, the Window’s installation of Virtual Hosts is complete! Go to example.dev in your browser. Make an index.php file with the contents <?php echo 'Hello, world!' ?> and place it in the directory to test.

5. Remove :8888 from custom server URL

Almost done! After restarting your MAMP server, you can go to http://example.dev:8888 and it will take you to your path.

That’s pretty good. But, I want to make this perfect. I want to remove the :8888 from the end of the URL.

Back in the httpd.conf file, find these two instances (they won’t be next to each other):

Listen 8888
ServerName localhost:8888

And change them to this:

Listen 80
ServerName localhost:80

Save the file. Finally, in MAMP, Preferences > Ports, change the ports to 80, 8888, and 3306.

Restart your servers and try http://example.dev in your browser.

And now it works! You can repeat the code as many times as you want, for as many virtual hosts as you want.

<VirtualHost *:80>
  ServerName website1.dev
  DocumentRoot "path/to/website1"
</VirtualHost>

<VirtualHost *:80>
  ServerName website2.dev
  DocumentRoot "path/to/website2"
</VirtualHost>

If the above example doesn’t work, try removing :80 from the VirtualHosts tag, as this seemed to fix the problem for anyone having an issue. However, I just tested this April, 2017 on a new MAMP and new computer, and I can confirm if you follow it exactly you won’t have an issue.

Thank you for reading! I'm Tania Rascia, and I write no-nonsense guides for designers and developers. If my content has been valuable to you, please help me keep the site ad-free and continuously updated with quality tutorials and material by making a donation. Any amount helps and is greatly appreciated! Otherwise, let me know any ideas you have on a course you'd be eager to see.

Write a response

Your email address will not be published.

Discussion

  • Alvin says:

    Hi Tania!

    I’ve been working with a virtual host for several months now, and your tutorial helped me a lot to do this. But now I want to work with two or more pages at the same time without having to change my document root in MAMP every time i want to change my website.

    So I was searching at the comments below and realized Kristan was searching for the same thing. And then I discovered something rare about my virtual host. I don’t have an `extra/httpd-vhosts.conf` file. I did uncomment the “Include conf/extra/httpd-vhosts.conf” code but now i see that there is no ‘extra’ folder in my ‘MAMP/conf’ folder.

    The only thing I did different from here is that instead of using this configuration:

    Options Indexes FollowSymLinks
    AllowOverride All

    Im using this snippet of code:

    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order deny,allow
    Allow from all

    I used this configuration because I had two properties that are not specified in this tutorial and I looked for this in stackoverflow. That’s all I got ๐Ÿ˜€

    I think this is a mess, I really hope you can help me out in this one ๐Ÿ™‚
    (P.d: Im working in windows)

    • Tania says:

      If you don’t have the virtual hosts file, you probably have a really old version of MAMP. You can always put the Virtual Hosts at the bottom of your regular conf file, though.

  • Amy Kotas says:

    It appears I am having the same issue as Jovanni below. Everything was working great when it was up to example.dev:8888, but then I followed the instructions to remove the :8888, and example.dev didn’t work, and trying to get it back to where even just example.dev:8888 DID work is getting me nowhere. Trying to remove :80 from the VirtualHosts tag didn’t help.

    • Amy Kotas says:

      Update: My Virtual Host woes were all the result of using TextEdit instead of Sublime, and I didn’t realize it was changing the quotation marks around the path to curly quotes instead of straight ones. Changed them to straight ones and All Is Well. Thanks for this great article – it helped me a lot!

      • Tania says:

        Thanks for the update, Amy! Hopefully it will help anyone else stumbling upon this issue in the future.

      • Amy Kotas says:

        Forgot to add that because I’m working on a WordPress project, I had to add in the virtual host path “example.dev” to the wp_options table in the “siteurl” and “home” lines in order for this to work.

      • Tania says:

        Good point!

  • Ben says:

    Hi Tania,

    Followed this tutorial a few weeks ago and everything worked a treat, so thank you for that. I’ve just been working on some sites locally and spotted something that seems like a problemโ€”whenever I go to mysite.dev/phpmyadmin i’ve noticed that all the sites are sharing it i.e. it has all my different sites’ databases in there. Is this desired behaviour, or have I gone wrong somewhere? I can’t seem to work out a way of having each site having it’s own iteration of PMA.

    • Tania says:

      Yep, that’s the normal behavior. A virtual host does not create a new database server. It’s all running on one server. You can have as many databases are you want within the one MySQL server (which you are accessing via phpMyAdmin).

  • caleb says:

    you’re a genius

  • Kristan says:

    Hi Tania!

    You know every few months I follow some tutorial to see if I can get virtual hosts working so I don’t have to keep switching around document root in MAMP when I am working on more than one site.

    And every time I try I end up pulling out a few more hairs in frustration before giving up once more.

    It looks like your tut is the clearest so far. But after going through everything I still have no virtual hosts.

    One thing that I noticed is that in step 3, when adding the virtual host path to `extra/httpd-vhosts.conf` you say “The last line in the document should be , so place this code after that.”

    That is NOT the last line in my `extra/httpd-vhosts.conf` file. (Which is really just the first `NameVirtualHost *:80` declaration, and then it goes right into the list of virtual hosts.)

    It IS the last line in `apache/httpd.conf` though.

    Is my httpd-vhosts.conf file bad? Or is that a mistake in the article?

    • Tania says:

      Sorry for the confusion. I updated the article earlier and missed that point. You can put the code in httpd-vhosts.conf or httpd.conf and it will technicaly work, but it’s preferable to put it in the vhosts one. So just ignore the line about “the last line” and you’ll be all set. I updated the article, too.

      • Kristan says:

        So I think I am aaaaalmost there. But something strange is happening.

        I have followed all of your steps verbatim.

        When I enter “example.com:8888” in my browser, it takes me to localhost:8888 in my MAMP/htdocs (which is also what I have set as my MAMP root). There I see the familiar project I have been working on.

        But when I enter “example.com” (no ports) it takes me …. somewhere else. I am getting a “It works!” echoing back, but I should be landing at Users/Kristan/Sites (which is what I have as my document root in httpd-vhosts.conf) and there I only have one single index.php that should be echoing “Hello World”! I am getting “It works” instead of “Hello world”.

        Somehow I am landing somewhere else and I am not sure where. It’s not in my MAMP root, and it’s not where I have set as my document root in apache/httpd-vhosts.conf

        So .. I seem to have another v-host set up somewhere? Maybe from another tutorial I followed? But I don’t see anything strange in extra/httpd-vhosts.conf or in apache/httpd.conf other than the one single directive that should be sending me to my User/Sites folder.

        How can I find out where I am being sent? Where else could there be another virtual host directive that is “hijacking” me from where I want to go?

      • Tania says:

        Hi Kristan,

        I honestly have no idea what this “It works!” page might be, or what other configuration you may have followed from other tutorials. But if you’ve followed mine, :8888 should no longer work, and only the regular one will. Try restarting MAMP and using a different browser.

  • cyfy says:

    WHOOOOO!!!!! Thank you, no issues.

  • Belinda says:

    Do you know how to configure mamp so it can host secure sites to the public? I have MAMP Pro but can’t seem to get it to work. Thanks for your post, appreciate all the tips.

  • Steve says:

    It worked. Took a few tries going back through your text. I think the first time I tried to fly through it and didn’t pay enough attention. Very informative. Thanks

  • Ben says:

    Followed the tutorial to the letter, but now all I’m getting when I visit example.dev is a 404 Not Found error. Tried the removal of :80 in the VirtualHosts tag but this has no affect.

    Any ideas?

    • Tania says:

      I recently set up a MacBook Pro and iMac following my own instructions to see where there could be an issue, and I was unable to find one. I would really love to know how I can make this more clear so no one has an issue. Did you restart MAMP after making the changes?

    • Steve says:

      Ben, I had the same thing happen. I had the server name wrong. After I changed it to what is below, it worked.

      ServerName example.dev
      DocumentRoot “/applications/MAMP/htdocs”

  • Jovanni says:

    The final step, example.dev is displaying a 404 error. What should I do? I worked fine before I changed the localhost of 8888 to 80.

  • Steve says:

    Hi Tania, is there a difference between adding virtual hosts, to just adding localhost in the url? Advantages?

    • Tania says:

      Steve,

      You can work on multiple websites at the same time with Virtual Hosts. With local host, you’re stuck with one. So I always use Virtual Hosts.

  • Wesley says:

    I was able to set up the virtual host “example.dev:8888” but when I tried to changed the instances of 8888 in “httpd.conf” to 80 (and likewise in MAMP/Preferences/Ports) โ€“ to turn “example.dev:8888” to “example.dev” โ€“ the apache server fails to start.

    No error message: it’s just unable to start for some reason.

    Removing “*80” from the virtual host tag did not resolve the issue.

    Thoughts?

    Wes
    (macOS Sierra, April 8, 2017)

  • Juca (Brazil) says:

    Oh really!!! Many thanks Tania. You have an admirer here in Brazil. Congratulations…

  • Juca (Brazil) says:

    Hi Tania, Congratulations. I’m in trouble. I did everything right but, message appears: index of in the browser. What do I do?

    • Tania says:

      You’re not in trouble. That means you succeeded. Congratulations. Now you can put some content in the directory.

      • Amy DeStefanis says:

        I have the same issue – when I put example.dev:8888 in the browser after making the changes, I get “Index of / ” though I DO have content in the target path (the original path where we set our Document Root to in MAMP, right?)

        When I go to extra/httpd-vhosts.conf, the last line is not , by the way. I put the VirtualHost for example.dev in at the end anyway… Could this be the issue?

      • Amy DeStefanis says:

        Follow-up. In my case, removing :80 from the Virtual Host tag DID fix this issue. Go figure.

  • Anthony Robin Schneider says:

    Hi,

    I’m having some trouble editing the httpd.conf file. I can’t find the SymLink override section in my file. Am I looking in the wrong place? The closest I get is this:

    Options FollowSymLinks ExecCGI
    AllowOverride All
    Order deny,allow
    Allow from all

    Best

    Anthony

    • Tania says:

      Hi Anthony,

      You may be running a different version, I’m not sure. I would assume the ExecCGI is the same thing, and there’s no harm in testing it out.

  • John says:

    Hi Tania! ๐Ÿ™‚

    Should I just use the same DocumentRoot path for two sites if I want to use the same
    wordpress installation for both?

  • Jacquie says:

    When I enter example.dev:8888 I get a page from MAMP PRO saying that my virtual host was successfully set up and that the place holder should be replaced.

    I have tried fixing this every way possible so to double check:

    In Step 3 you tell us to make sure that in Preferences our DocumentRoot is: Applications/MAMP/htdocs
    *does this htdocs file need to be replaced?

    Then you tell us in the httpd.conf file the VirtualHost DocumentRoot should link to our files, mine is: “/Users/Jacquie/Desktop/WordPress/learnphp”
    *should these not be the same?

    • Tania says:

      The first part is not code – when you go to the program MAMP, and click on “Preferences -> Web Server” it will say “Applications -> MAMP -> htdocs”. This is not Applications/MAMP/htdocs in your httpd.conf.

  • Matthew Booth says:

    Thanks for this Tania :). I have another way in testing PHP websites before sending them live. This has been a helpful article ๐Ÿ™‚

  • Elvira says:

    Very helpful. Thank you!!

  • Simon says:

    Thank you. Very helpful. Managed to unmuddle the muddle I’d made of my hosts, vhosts, confs, et. al.

    Cheers!

  • Subha says:

    Hi Tania, I am using my organization’s laptop and do not have permissions to modify hosts file. Can I continue the php theme build without configuring virtual hosts and just referring by localhost ?

  • Celine says:

    Finishing setting up on Windows, all worked out. Awesome!! Thank you very much, your tutorial is very helpful!

  • Catherine Lee says:

    Hi Tania,

    I can’t get example.dev to point to the DocumentRoot listed in httpd.conf. It always goes to the directory listed in the MAMP settings. When I attempt to make a second virtual host, it also goes to the same directory listed in the MAMP settings. I’ve restarted MAMP by turning it on and off, and by closing it and rebooting it again. I’ve updated to the latest version of MAMP.

    • Catherine Lee says:

      I figured it out. It works if I remove 80 in the VirtualHost tag.

      ServerName portfolio.dev
      DocumentRoot /Applications/MAMP/htdocs/portfolio201509

      • Tania says:

        Interesting, I wonder if something changed in a more recent version of MAMP. The way I mentioned still works for me on Windows and Mac, but if anyone has an issue, they can try this way as well.

      • Mike says:

        Hi Tania.

        Thanks so much for this tutorial! Super helpful!

        Just to confirm, I also had the same issue as Catherine.

        My final block looked like this when I finally got it working(!):

        <pre>
        <code>

        <VirtualHost *>
        ServerName my-server-name
        DocumentRoot "/path/to/document/root"
        </VirtualHost>

        </code>
        </pre>

        MAMP 4.1
        OS X Sierra 10.12.3

      • Mike says:

        Ohhhh, sorry.. Guess you’re not supposed to also escape the !

        <VirtualHost *>
        ServerName my-server-name
        DocumentRoot "/path/to/document/root"
        </VirtualHost>

  • Tengu says:

    Great info!

    Only thing I did different was putting the virtual host info in the extra/httpd-vhosts.conf file (and allowing that file by uncommenting the proper line in httpd.conf.

    Only thing that doesn’t work (and I hope you can help me with) is getting rid of the :8888. I changed the Listen port and the localhost. Changed the ports in Mamp but (as I expexcted really) when restarting Apache, Mamp complains that the built-in Apache server already uses that port (which is true).

    So … what now without messing something up? Change the built-in Apache to :8888? (I have a Mac by the way), or shutting it down all together?

    • Gary says:

      Hi, likewise (Windows 10, MAMP 3.2.2) I cannot remove the “:8081” suffix from the domain. Also, MAMP cannot use Port 80 as it is in use by another process (or is reserved).

      I’d love to get rid of the suffix but I just can’t figure it out. Excellent article by the way, thank you for sharing!

  • joshua says:

    Hi great article!

    Original page (example.dev) loads, but additional pages do not.
    Do i need to change the Terminal code and the MAMP directory each time as well?

    Working:

    ServerName example.dev
    DocumentRoot “path/to/example”

    Not working:

    ServerName website1.dev
    DocumentRoot “path/to/website1”

    • Tania says:

      Hi! You’ll have to make multiple entires in the host file (just press enter and write a new name below it) and add another entry in the httpd.conf file.

      • Brit says:

        I’m still unable to do this with multiple sites and I’m not sure what I’m doing wrong. Here is what I have in the host file:

        127.0.0.1 bbv1.dev
        127.0.0.1 bbv2.dev

        And here is what I have in the httpd.conf file:

        ServerName bbv1.dev
        DocumentRoot “C:Users\britc\OneDrive\Documents\Sites\learnphp

        ServerName bbv2.dev
        DocumentRoot “C:Users\britc\OneDrive\Documents\Sites\test

        For bbv1, the page I’m trying to display is saved as index.php, which says “Hello aliens!” For bbv2, the page I’m trying to display (which is saved at documents\sites\test) is index.html, which says “this is a test” But when I go to bbv2.dev in the browser, index.html does not display, instead I’m still seing index.php saying “Hello aliens”

      • Tania says:

        Have you restarted the Mamp server?

      • Kevin says:

        Tania, I am having the same issue. I am able to see the example.dev and it is linking correctly, however any other VirtualHost I attempt to add shoes up linking to the path for example.dev.

        In httpd.conf:

        ServerName example.dev
        DocumentRoot “H:/Kevin/Sites/Template”

        ServerName test.dev
        DocumentRoot “H:/Kevin/Sites/Test”

        In Host file:

        127.0.0.1 example.dev
        127.0.0.1 test.dev

        I have also restarted my MAMP server as well and still both link to template

      • Ian says:

        I was also having trouble with multiple vHosts all serving the same content, but was able to solve it by adding the following above the directives:

        NameVirtualHost *

      • Tania says:

        Interesting. I recently went through this tutorial on a brand new computer and was able to follow it without an issue, so I’m not sure why it would be like that for you. Well, as long as it’s working.

  • James Becker says:

    Worked flawlessly on the first try! Thank you!

  • Nate says:

    Hi Tania,

    Firstly, thank you so much for all these awesome tutorials. You’ve inspired me to do more development from scratch instead of relying on some unnecessary frameworks. I’m really new to this, but I love how so many people in the web design and development community (like you) consistently put out such useful information to help newbies like me get better faster. Your articles have easily been among the best tutorials I’ve found.

    That being said, I’m having trouble with this tutorial and I’d appreciate any help if it’s not too much trouble.

    I’ve been using MAMP for a little while now to play with WordPress and develop sites locally. I’m familiar, though by no means totally proficient, with the command line. Still, I found your instructions very straightforward and easy to follow.

    My Document Root is in MAMP/htdocs/exampledirectory. So the last line of my httpd.conf file looks like this:

    <VirtualHost *:80>
    ServerName example.dev
    DocumentRoot &quot;/Applications/MAMP/htdocs/exampledirectory"
    </VirtualHost>

    I have two other WordPress sides in the same htdocs folder. I followed your directions up through step 4, and then went to http://example.dev:8888. Instead of seeing the index.php of the single WordPress install I’m trying to reach, I arrive at the index of htdocs, with a list of all three wordpress installs.

    Am I missing something? Or is there an additional process to configure virtual hosts for multiple WordPress installs in the same directory?

    I really appreciate any help you can give, and I hope I formatted my code correctly. Ion’t use markdown or escaped HTML/PHP very much.

    Thanks in advance, and happy coding!

    โ€”Nate

  • Speed says:

    Tania – Everything works flawless, The procedure was clear and precise. Best tut ever! Thank you for taking time to writing this.

  • Sindhu says:

    Super helpful and easy to follow steps! Thank you so much.

  • Sky says:

    Thanks for the help Tania. You saved the day.

  • Lukiih says:

    Tania, thanks for this great article. I got a WordPress instance up and running successfully about a month ago after using some of your tutorials.

    Recently I changed the directory of my local files. All I did was move my WordPress files two folders level up. I then went into MAMP preferences and httpd.conf file to repoint everything to the new directory. I restarted MAMP as you’ve suggested. Whenever I go to my server.dev, the index/home page renders correctly (CSS, HTML, etc), but all the other pages are throwing the “Not Found The requested URL /about was not found on this server.” error.

    Any ideas on why this might have happened? Thanks in advance!

  • Jai says:

    Hey, tutorial is excellent, and it all works. However, I’ve tried to add another virtual host pointing to the same test file in the same location – I’ve left MAMP port and root settings the same as well. The only thing I’ve changed is the ServerName.

    I kept example.dev and setup a second virtual host called example2.dev and this one doesn’t load while example.dev still loads. I’ve even switched the order they’re listed in. Any reason why other ServerName’s are not working, but only example.dev is?

  • Jus says:

    I used to use MAMP all the time but then I discovered AMPPS which is a bit like Softaculous (a 1 click installer shared hosts use) but it runs locally. You can easily provision hundreds of apps like WordPress such with a couple of clicks. It’s worth checking out even if you decide it’s not for you.

  • jose says:

    Hi, this is the best tuto I’ve found so far! I still have a problem though. Seems that every time I uncomment this line :

    Include conf/extra/httpd-vhosts.conf my MAMP won’t start. Please help :/

    • jose says:

      Nevermind I fixed it, it was this line that was causing the problem :

      ServerAlias *.dev *.work *.ngrok.com

      However, it seems that I cannot access my project directories in this fashion anymore:
      localhost/wordpress-test

      Do I need to create a new virtualhost for “localhost” so I can access those directories in that way?

  • Joe says:

    After trying and failing for hours(!) to get MAMP to “see” my virtual host, this tutorial got me further than anything else I’ve tried – thank you! – I got all the way through step 4 successfully, but now I am trying to remove the :8888 from the URL following your step 5 exactly and its still not working (pulling hair out!). Entering my virtual name mydevsite.loc redirects to http://mydevsite.loc:8888/ and I get a

    This site canโ€™t be reached

    mydevsite.loc refused to connect.
    ERR_CONNECTION_REFUSED

    I’ve gone over your step 5 many times, checking everything and no luck. Please help!!

    • Tania says:

      Hi Joe – you’re positive you restarted the server? The directions I have should be exact, so without seeing what you’re working with, I don’t know how else to help you. Send me an email with some more details or screenshots? I also want to note that it’s important to clear your cache. Please try visiting the site from a different browser (Firefox, Safari, Edge, whatever).

  • Will says:

    Worked a treat, thank you ๐Ÿ™‚

  • Can Margarini says:

    Question. shouldn’t we add new entries to the httpd-vhosts.conf file instead of adding them to the main httpd.conf?

Tania's List

My tutorials, guides, and articles for web designers, developers, and autodidacts, sent out once a month or so. No bullshit, ads, or tricks.