Website Setup with MAMP 4

26th November 2016

MAMP is a software solution that allows you to set up a local server environment on your computer. This post will demonstrate a simple guide on how to go about a website setup with MAMP 4, the latest version.

If you haven’t already, download the MAMP application from https://www.mamp.info/en/downloads/ and run through the setup wizard.

When you have installed the application successfully, open it up and you should be presented with a overview screen.

If the servers do not start automatically, click the ‘Start Servers’ button to continue.

The Webstart page should now automatically open with the following URL:

http://localhost:8888/MAMP/?language=English

The ‘8888’ represents that the server is listening for connections on port 8888.

To add your own website to the apache configuration, you will need to open the http.conf file, and uncomment the line that contains the vhosts file include.

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

Uncomment the line by removing the hash, so it becomes:

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

Now you’re ready to open the httpd-vhosts.conf file and add in your website configuration. The file will contain a couple of example vhosts configuration.

// Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any  block.
#
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<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>

Note the ‘:80’ notation throughout the file. As we’ll be using port 8888 for now, the ‘NameVirtualHost’ value and the ‘VirtualHost’ configuration added below should be set to use ‘:8888’ rather than ‘:80’.

Let’s assume that your test website will be added within a ‘Websites’ folder on your desktop. Your vhosts configuration might look something like the below. Notice that the dummy domain configuration has been removed in this example.

// Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:8888

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any  block.
#

<VirtualHost *:8888>
    DocumentRoot "/Users/[Your_User]/Desktop/Websites/somesite.local"
    ServerName somesite.local
    ServerAlias www.somesite.local
</VirtualHost>

As we’ve set the domain name to be ‘somesite.local’ and we don’t actually own this domain, we can use our computer’s hosts file to override the default DNS information. The ‘somesite.local’ domain DNS information will need to be changed so that the A records point to the local IP address (127.0.0.1).

On a mac computer, the hosts file is located within the /private/etc/ directory.

To edit the file, open up terminal and type in the following:

sudo nano /private/etc/hosts

Enter your computer’s password and proceed to add in the following line to the file.

// /private/etc/hosts
127.0.0.1       somesite.local www.somesite.local

As for the website directory itself, let’s add a simple index.html that will contain the following:

// /Users[Your_User]/Desktop/Websites/somesite.local/index.html
Hello!

Now restart the servers in a MAMP application, and type in ‘http://somesite.local:8888/’ within your browser’s address bar and you should see the ‘Hello!’ text.

Because we’re using port 8888, it means that each time we want to access a page on our website, we need to append ‘:8888’ to the end of the website URL.

As port 80 is used as the default HTTP port, MAMP gives you an option in the ‘Preferences’ section to change the Apache and MySQL port to the default 80 and 3306 respectively.

If you choose to change the ports, don’t forget to edit your httpd-vhosts.conf file and change all instances of ‘:8888’ to ‘:80’, restart the servers and you’ll be able to access your website without having to append the port number.