Setting Up a Local Website on a Mac with MAMP

With the rise of such website scripts as WordPress, Joomla, Drupal or my new personal favorite PyroCMS, I am always amazed to read read forum posts about how difficult it is for new users to setup their own testing server. As someone who has worked on websites for over a decade I figure I’d share some insight on how easy it is to get up and running with your own local testing server, starting with the Mac.

The Beginnings

Now just to get one thing out of the way, with the Mac OSX operating system there is a built-in Apache server, so you probably ask, why shouldn’t I just use that? Well the simple answer is you can. But there is a lot more coding and compiling then what is really necessary for the average user and while there are packages for some of the aspects, but not enough to make this a worthwhile experiment.

So, now that we have that set forth let’s begin.  If you haven’t already, go download MAMP. Now the MAMP installer comes with both MAMP (the free version) and MAMP Pro (the paid version). For purposes of this tutorial, we will only be focusing on the free version as that is all that is really necessary to setup a local testing environment. Also to keep things as simple as possible, for the sake of this tutorial we are going to assume that you allow MAMP to install in the default which is the Applications folder and that you know how to use a Mac installer. The installation is very straight forward and no different from any other application on the Mac with an installer. On a typical installation you are looking at about 3-5 minutes for the installation.

After the installation is complete we are going to go to the Applications folder first. So let’s take a look at that screenshot.

MAMP Application Folder
MAMP Application Folder

What we have here are a bunch of readme’s in a bunch of languages, the MAMP application some folders which I will be going into more detail on in a later tutorial. If you plan on using MAMP on a regular basis there is no need to leave this app hidden inside the Applications folder. So as Mac users we have the ability to place any application, shortcut or folder into the Dock that we want. So all we need to do is click and drag that MAMP application icon to the Dock on your Mac desktop. So what are we waiting for? Let’s begin and open the MAMP application.

The MAMP Application

The first thing you will notice when opening up the MAMP application is the simplicity of the interface. For as complex as a web server can be there are very few options in the primary MAMP window. Start (Stop) Servers, Open Start Page, Preferences and Quit. That’s it. And having a web server isn’t going to be much more difficult than that. Ok, well maybe a little more.

Let’s start off with the Preferences. The first of the four tabs you will see here is the Start/Stop tab. Here you have the option to automatically start and stop the servers and you open and close the application. This can be useful if you only want to run MAMP when the application is running. You can also check for MAMP Pro when starting MAMP. This is only useful if you have MAMP Pro and want to make sure it is starting. Then there is the Open Start Page at Startup. This will force your default browser to open with the MAMP start page whenever the server starts up whether from the application starting, or by manually starting the server. Personally speaking, the only options that can be left on are the Start on open and Stop on quit options. The start page for MAMP is ok and not bad to run the first time you start MAMP, but afterwards you will probably get tired of seeing a browser opening with the start page.

The next tab is Ports. This tab can be very confusing. MAMP by default uses its own ports for the web and mySQL server. Because it is not the default that these services use, if you choose to leave these as is, you will be forced to type your localhost address in your browser as “localhost:1234” where “1234” is the port number, and the same would go for the mySQL connection when you go to install applications down the road such as WordPress or a forum or any other web-based software that requires a database. For the average user I would recommend clicking on the box to set the default Apache and mySQL ports of 80 and 3306 respectively. This way you can access your local website and mySQL database without having to remember, or use, the port numbers. One important note I will make about this is if you are a Skype user. Skype by default has a feature, albeit annoying, which uses Port 80 for its communications as an alternate port. Thus if you are running Skype and try to start MAMP or a similar web service, this service will be denied if Skype is running. The good news is you can disable this feature from the Skype Advanced Options. The following tutorial will help you find the checkbox to disable this feature ( Skype help ).

Next is the PHP tab.  here you can select to start MAMP with different versions of PHP. If you are testing out PHP applications this is a great resource, but if you just want to run a testing server it’s not necessary. The cache extension on the right is important. For testing purchase the best option you can select is the first one “–” which is no option at all. While the default of XCache will help your pages load faster it can also cause problems down the road if you are not sure what you are doing. For instance, if you rename a Drupal installation with XCache enabled your site will generate errors until the service is restarted because of how the variables are cached. In contrast, if you do not have this enabled, renaming the folder will be 100% transparent and it will be as though nothing on your configuration changed.

The final tab is the Apache tab. Here you can select where you want to store your files. In most cases I would recommend moving them into your user directory into a “Sites” or similar folder because of how permissions are set up, but this can be any folder you desire on your hard drive. If you are looking to install multiple copies of WordPress or other sites, you should make this a parent directory. For instance, if you want to put your files in a Sites folder in your user directory your path would be:

/Users/{username}/Sites

Then your sub-sites would be at “/Sites/subdirectory”. That subdirectory could be “WordPress1”, “WordPress2”, etc. We will touch on this more in later tutorials, but it is just important to know here that this path is not the end all be all as if you only want one site. You should set up your site at this point as though you want to run multiple sites in the long run.

The First Testing Page

Now that we have the testing server application understood, it’s time to start it up. For now we are just going to work with a simple text editor to get our first page up and running and to test some basics. In a later tutorial we will investigate how to utilize the testing server with Adobe Dreamweaver and go more in depth about understanding the database portion of the testing server.

One of the common misconceptions of websites is that you need an editor like Dreamweaver, Expression Web or Coda when in fact all you need is a simple text editor to get going. So to begin, simply open up TextEdit on your Mac and you can copy and paste the code into it: Hello World

Then click File–>Save and for the Format choose Web Page (.html) and save the file to the same folder where you set the site to be from the Apache tab of the MAMP preferences. For sake of the tutorial let’s save it as “test.html”. Now navigate your browser to http://localhost/test.html .

Conclusion

There you have it. You have now successfully installed MAMP and have it up and running on your Mac with a sample webpage.

Leave a Comment