Virtual Hosts for MAMP-Based Local Web Development on macOS Sierra

Web Design

Virtual Hosts for MAMP-Based Local Web Development on macOS Sierra

by deconspray 0 Comment

I decided to write this post for two reasons; 1.) as a personal reference and 2.) to share what I learned so that others might get to their goal quicker.

Some Background

Skip to the actual steps…

I’m fairly new to the Mac, have transitioned from the PC full time a couple years ago. I created a decent local development that worked for me; simple, straightforward, not complex.

I had virtual hosts set up while on the El Capitan OS in a way when I created a new folder, the virtual host would dynamically be created. After a regular update, I lost this functionality … all virtual host functionality. No matter what I did, I couldn’t get virtual hosts to function again. At one point, I lost the ability to have MAMP’s Apache run without issue. Several months after the Sierra macOS upgrade became available, I hoped this upgrade would resolve the issue, to no avail. After every attempt failed, I decided to wipe out my Mac, and start from scratch.

Steps

  1. Install MAMP
  2. Update the Apache httpd.conf file
  3. Update the Apache httpd-vhosts.conf file
  4. Update the Hosts file

Install MAMP

MAMP is the bundle of Apache, PHP and MySQL. All of these are needed to run and develop for WordPress locally. MAMP is the bundled package for the macOS; there are similar bundles for Windows-based PCs (ex. WAMP, XAMPP).

Download MAMP.

Note: macOS by default offers the Apache web server. By installing MAMP, I have decided to use the MAMP version of Apache. This will play into one of the issues I had to overcome.

Once downloaded and installed, MAMP needs to be configured.

MAMP ports screen

By default, MAMP sets the ports to 8888 (Apache) & 8889 (MySQL). Leaving the ports this way, you would be forced to add the port to the URL locally (ex. mysite.dev:8888). The preference is to change this to 80 for Apache and 3306 for MySQL. Therein lies the note above. The default Apache web server uses port 80. Placing MAMP’s Apache at port 80 creates a conflict. To eliminate this conflict and to leverage port 80 for MAMP’s Apache, I disabled the default instance of Apache from autostarting using the following Terminal command:

sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist

Now, you can run MAMP’s Apache on port 80 with no conflicts.

Update the Apache httpd.conf file

With Apache set up, it’s now time to focus on configuring it to handle virtual hosts.

Using Terminal, open the MAMP Apache configuration file.

sudo nano -w /Applications/MAMP/conf/apache/httpd.conf

You’ll be prompted for your password.

httpd-conf file open in Terminal

Once the file is open, perform a search (Control w) for two entries that are commented out by default. Search on “vhosts,” and uncomment (remove the leading #) the following two lines:

LoadModule vhost_alias_module modules/mod_vhost_alias.so

Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Press “Control x” to exit, then type “y,” and press Return to save your changes.

Update the Apache httpd-vhosts.conf file

With the httpd-vhosts.conf entry enabled in the Apache configuration file (httpd.conf),

Now, in Terminal, open the vhosts configuration file (httpd-vhosts.conf):

sudo nano -w /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Move the cursor down to where the virtual host entries are. There will likely be two sample entries in the file. You can remove or comment out these entries.


#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host2.example.com
#    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
#    ServerName dummy-host2.example.com
#    ErrorLog "logs/dummy-host2.example.com-error_log"
#    CustomLog "logs/dummy-host2.example.com-access_log" common
#</VirtualHost>

Now, for each virtual host, you need to add an entry. Here’s an example of a barebones virtual host entry:


<VirtualHost *:80>
     VirtualDocumentRoot "/Users/{username}/Sites/test"
     ServerName test.dev
</VirtualHost>

where VirtualDocumentRoot is the path to the location of the site folder on our local computer. Note to replace {username} with your username, if you decide to place your local sites in development under the Sites folder.

ServerName is the domain you plan to use to refer to your local development site. I find using the extension of .dev helpful to identify a local development site versus the public production site.

You’ll need to add a virtual host entry for each local site.

You’ll want to restart the Apache service whenever you make a change to a configuration file. Enter the following in Terminal:

sudo apachectl restart

Update the Hosts file

The last step is to add the entry to you host file. The host file acts as a local DNS server, referencing user-friendly domains to IP addresses. In this case, we will create relationships between the virtual host/domain with the local web sever IP of 127.0.0.1.

Open the host file in Terminal:

sudo nano -w /etc/hosts

Navigate to the end of the file, then add the following entry:

127.0.0.1    domain.dev

where domain.dev is the name of your virtual host. You can add more hosts on separate lines.

Press “Control x” to exit, then type “y,” and press Return to save your changes.

Finally

One added convenience I’ve created to this rather manual process is to create shortcuts to the Host and httpd-vhosts.conf files for ease of access.

Additionally, while the examples above show how to locate and edit the files in Terminal, even after two years on the Mac, I’m still not comfortable using Terminal. I’d rather use my IDE of choice, which happens to be Sublime Text. In making these recent changes, I used both Terminal and Sublime Text to edit these files, with success in all cases. So with that said, use your preferred method.

I hope this information helps those developers new to local development using virtual hosts and MAMP.