How to setup up a Virtual Host with MAMP for WordPress in 10 easy steps

Posted on

Category: Development

  • When it comes to developing WordPress sites, having a local server or Virtual Host on your computer/laptop emulates the environment similar to the web host’s server is essential in any sort of development including WordPress. You must be able to test it locally before launching live with real data. There are many development environments that each individual prefers, for me, it is MAMP due to its easy-to-follow configurations files in setting up a Virtual Host. Having used this method in the past I have provided the steps for both on Mac and Windows users.

    File setup

    1. Go to the MAMP application folder and find the httpd.conf file:
      • Mac:
        Applications > MAMP > conf > apache > httpd.conf
      • Windows:
        C:/ > MAMP > conf > apache > httpd.conf
        
    2. Open the file in your favourite text editor and search for this line:
      • Mac:
        # Virtual hosts
        #Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
      • Windows:
        # Virtual hosts
        #Include conf/extra/httpd-vhosts.conf
    3. Uncomment the second line by removing the hash #:
      • Mac:
        # Virtual hosts  
        Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
      • Windows:
        # Virtual hosts
        Include conf/extra/httpd-vhosts.conf
    4. In the same file look for:
      • Mac/Windows:
        <Directory /> 
              Options Indexes FollowSymLinks 
              AllowOverride None 
        </Directory>
    5. Change None to All:
      • Mac/Windows:
        <Directory /> 
              Options Indexes FollowSymLinks 
              AllowOverride All 
        </Directory>
    6. In the MAMP application folder find the httpd-vhosts.conf file:
      • Mac:
        Applications > MAMP > conf > apache > extra > httpd-vhosts.conf
      • Windows:
        C:/ > MAMP > conf > apache > extra > httpd-vhosts.conf
    7. Place this code at the end of this file:
      <VirtualHost *:80> 
            ServerName example.test 
            DocumentRoot "/path/to/project/directory/site" 
      </VirtualHost>

      Change the document root to point to wherever your project is located.


      Note – Chrome no longer allows .dev domain ending for local websites so consider using .test or .local etc instead.


      • Mac:
        DocumentRoot “/home/kirancha/public_html"
      • Windows:
        DocumentRoot “C:/home/kirancha/public_html”
    8. Now to set up the network with the hosts file so that you can configure the IP address that you resolved the given domain name to. This allows your computer to recognise your local domain. Open up your terminal window and type:
      • Mac:
        sudo nano /etc/hosts

        After being prompted for your administration password a screen will show up looking something like this:

        127.0.0.1       example.test

        Add your desired hostname mapping at the bottom by using the keyboard arrow keys to navigate and hitting ctrl + o to save, enter to confirm and lastly ctrl + x to exit.

      • Windows:
        Open Notepad as Administrator and from the Notepad application open the file:

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

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

    9. Flush your DNS cache to ensure the mapping works by entering this in the terminal window:
      • Mac:
        sudo killall -HUP mDNSResponder
      • Windows:
        ipconfig /flushdns
    10. Finally, the last step of setting up Virtual Hosts involves tweaking MAMPs settings:
      Set the location of the project, which is the same location entered in step 7.
      Match the settings above to your own MAMP installation by changing the Apache Port to 80.

      To remove the :8888 from the end of the URL go back into the httpd.conf file and find:

      Listen 8888
      ServerName localhost:8888

      Then change it to:

      Listen 80
      ServerName localhost:80

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

    Tags: , , , ,

  • One comment on “How to setup up a Virtual Host with MAMP for WordPress in 10 easy steps

    1. What’s up to every body, it’s my first pay a quick visit of this blog; this blog consists of amazing and genuinely fine information in favor of visitors.

    Leave a Reply

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