Having a local development environment set up on your computer is an efficient workflow for developing a site, but what do you do when you have multiple projects to work on simultaneously? This is the function of Virtual Hosts — which allows you to run multiple sites all on the same server — whether that be a local or production server.
This post will walk through the steps to setting up Virtual Hosts on MAMP, although the steps are roughly the same for any server running Apache.
Enable virtual hosts
The first step is to find the MAMP application in your Applications folder, select “Show Package Contents” by right-clicking on it, then open up the httpd.conf file that is located in conf/apache, with your text editor of choice.
There will be a section designated for virtual hosts:
# Virtual hosts #Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
Remove the # hash sign before Include in order to enable virtual hosts, and then save the file.
Enable SymLink Override
In the same httpd.conf file, there will be a section dealing with SymLinks:
<Directory />
Options Indexes FollowSymLinks
AllowOverride None
</Directory>
Change AllowOverride None to AllowOverride All.
Designate the file path for the virtual host
After selecting “Show Package Contents” on the MAMP application, find the httpd-vhosts.conf file in htdocs/extra. Open this .conf file in a text editor, and add the following code to the very bottom of the file:
<VirtualHost *:80> ServerName example.dev DocumentRoot "/directory/filepath" </VirtualHost>
Change “/directory/filepath” to whatever is the actual file path for your project, for example:
Document "/dev/my-new-site"
After updating the file path for your virtual hosts, you will want to restart MAMP in order for the changes to take effect.
Adding your local domain to the hosts file
Open up Terminal or another command line application of your choice. Type the following command:
sudo pico /etc/hosts
(Note: you can use nano, vim or another command line-based text editor — pico was just chosen out of convenience).
After entering the command you will be asked for the root password for your system.
A text file will appear, showing something along the lines of:
## # 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 ::1 localhost bc34::2%lo3 localhost 127.0.0.1
Go to the very bottom of the file (by using the down arrow key). Find the last line that begins with 127.0.0.1. 127.0.0.1 is the IP address for your computer, or localhost.
Tab a few spaces so the cursor is lined up with the “second column” of text above it, and add the name of your new virtual host (in our example, my-new-site.site).
Save the file with Control + O, hit enter, and then Control + X to exit out of pico.
Using your custom URL
By default, the localhost always has :8888 in its URL. So in our example, http://my-new-site.site:8888 would take us to our new virtual host in the browser. We can remove this :8888 extension so we only have to use our chosen URL.
Open up htttpd.conf again. In the file, the following two lines of code will appear twice:
Listen 8888 ServerName localhost:8888
Update both of these two lines to:
Listen 80 ServerName localhost:80
Save and exit httpd.conf. Open Preferences in the MAMP application, and select the Ports tab. Change the Apache Port to 80, the Nginx Port to 8888, and the MySQL Port to 3306.
Hit ok, restart the servers in MAMP, and you should now be able to navigate to the new virtual host with http://my-new-site.site.
For more information on server management, or to learn more about web design and development services in the Los Angeles area, consult an expert at Sunlight Media.
3 Comments