Using MAMP

Last Updated August 25, 2016

Introduction

A long time ago when animals could talk and dinosaurs roamed the earth, I would make updates to a site directly on the live server. My workflow involved:

  • duplicating the existing file (say style.css)
  • prepending the date to the filename (style-100812.css)
  • then editing the original file (style.css)

It worked…most of the time. But, it was slow (downloading and uploading files) and if I broke something, it was a rush to get it fixed as quickly as possible and hope nobody saw it. Not to mention, my directories started to get cluttered with old files:

Naming files by Date

If I felt particularly fancy, I might work off a staging server. (A staging server typically mirrors your production environment and allows you to make updates and preview site changes before making them public.) At least then, nobody would see my work in progress. But, it’s still slow going, downloading existing files, making changes, and uploading the new files. Forget trying to work with another developer, it was too easy to overwrite each other’s work.

That was then, this is now

It’s not far fetched to think that some people still work that way. In fact, I hate to admit it, but there are still a few projects where I use this workflow (head down in shame…in my defense though, I don’t have control over the development and production environments).

There is a better way, a MUCH, much, better way.

Fancy Steppin

NOTE:

This post got a little long. OK, a lot long. Here’s a quick Table of Contents, if you want to jump to a specific section, or if you’re coming back and need a quick reference.

  1. Reasons why you should develop locally
  2. Downloading and Installing MAMP
  3. Walking through the preferences for MAMP’s Free Version
  4. Walking through the preferences for MAMP Pro
  5. Setting up a site locally
  6. Setting up a database (locally)

Developing Locally

Developing locally means building and previewing a site on your own computer, yep, the one right in front of you, instead of loading the site from another server. There are several benefits:

  1. Nobody sees your work in progress.
  2. It’s faster to make changes to your files, save, and hit refresh. You don’t have to wait to download or upload files to the server. Everything you need is already right there, on your machine.
  3. You don’t have to be connected to the Internet in order to work on your site.

If you’re creating a static site with simple HTML and CSS you could just open the index.html file within your web browser and away you go. However, you run into problems when you start referencing external assets (like TypeKit) or if you want to work with PHP files or database driven sites, like WordPress.

The easiest way to get up and running is to use MAMP. There’s a free and paid version (one time, $59). I’ll explain some of the benefits of the pro version. If you’re still not sure which version to go with, the pro version comes with a 30 day free trial.

First things First

Go to the MAMP site and download the files to your computer.

Download MAMP

By default, MAMP installs both the pro and the free version. However, you’ll only have access to the free trial of the pro version for 14 days.

It’s really easy to install.

Once the files have been downloaded to your computer, double click on the installer. It will launch a program that installs MAMP on your computer.

Just to be explicit, here are the screenshots, walking you through the process.

Install MAMP - Step 1

Click continue.

Install MAMP - Step 2

Click continue.

Install MAMP - Step 3

Click continue.

Install MAMP - Step 4

Click agree.

Install MAMP - Step 5

Select your hard drive and click continue.

Install MAMP - Step 6

Click install.

Install MAMP - Step 7

Enter your computer’s password.

Install MAMP - Step 8

Wait while it installs.

Install MAMP - Step 9

Then, click close.

Told you it was straightforward.

A Look at the Free Version of MAMP

Now that you’re up and running, we can get our hands dirty. You’ll notice in your application folder, you now have 2 folders / apps. One for MAMP and one for MAMP Pro.

MAMP app in Finder

Open the MAMP folder and double click on the MAMP.app:

MAMP in Finder

It will launch the free version of MAMP.

Free Version of MAMP

It’s feature set is stripped down, but it will do most of what you need it to do.

Preferences

MAMP Free - Preferences

You probably won’t need to modify these, but just so you know they’re here…

If you click on the preferences gear icon, it will load several tabs of preferences you can click through.

Start / Stop

MAMP - Start / Stop

The first tab walks through the starting and stopping of MAMP.

  • Do you want to immediately start the servers when you start up MAMP?
  • Do you want to check for MAMP Pro when you start the free version of MAMP?
  • Do you want to open the WebStart page as soon as MAMP opens?
  • When you quit MAMP do you want to stop the servers?
  • Do you have a favorite link you want to appear at the top of the menu on the WebStart page?

Ports

MAMP Free Ports

When you’re running a server on your computer, it needs to be assigned a certain network port. This allows several server programs to run on one machine — each service just uses a different port.

The Apache server typically uses port 80 and MySQL uses port 3306.

These ports are all configurable. By default, MAMP uses 8888, 7888, and 8889. — which is what Set MAMP ports to default does.

The Set Web & MySQL ports to 80 & 3306 changes the ports to 80 and 3306, which are commonly used on the internet.

PHP

MAMP Free - PHP

Here you can change the version of PHP that you’re running. Ideally, you want to run the same version of PHP locally, that your server is running. Doing so will minimize errors when you go live.

Most hosts I’ve worked with are behind the times and running 5.6. However, PHP 7 is the most recent version.

Web Server

MAMP Free - Web Server

The WebServer tab allows you to configure whether you’re running Apache or Nginx. — I’m 95% sure you’ll want Apache.

Document Root determines where your site files are located. If you go to your Applications Folder > MAMP > there’s an htdocs folder. By default, all your sites should live there.

I actually changed this setting on my compuer. I have a folder within my user folder called Sites. In my humble opinion, it’s a little bit easier to access.

Site Folder in Finder

A Look at MAMP Pro

MAMP Pro

From a quick glance, it’s obvious there are a lot more features within the MAMP Pro version. Don’t let that intimidate you though. There are really only a few key features that I use within the pro version, but for me, they make it worth the cost.

Setting up MAMP Pro

General

MAMP Pro - General

If you want to use the same settings that I do, click on the “Set ports to 80, 443, & 3306.” This makes your domain set up (later) easier.

NOTE:

I mentioned this under the Free Version of MAMP preferences, but if you skimmed over that part to get to the more advanced settings of MAMP Pro, I wanted to include a brief explanation here:

When you’re running a server on your computer, it needs to be assigned a certain network port. This allows several server programs to run on one machine — each service just uses a different port.

The Apache server typically uses port 80 and MySQL uses port 3306.

These ports are all configurable. By default, MAMP uses 8888, 7888, and 8889. — which is what Set MAMP ports to default does.

The Set Web & MySQL ports to 80 & 3306 changes the ports to 80 and 3306, which are commonly used on the internet.

Hosts

MAMP Pro Hosts

I spend a majority of my time on this tab. The section on the left, the pixeled-out part, is a list of all the sites I’m running on my computer. I have a unique URL set up for each project. The section on the right, establishes the settings for that URL. We’ll walk through the actual set up process later. But, for now, let’s stay on track and keep walking through each of these panes.

Modules

MAMP Pro Modules

These are all the modules that you’re running. I never come here, but occassionally when I’ve run into issues and looked on blog posts and forums, people will ask, “Do you have this module running?” This panel is where you’d go to look.

PHP

MAMP Pro PHP

The most important setting on this tab is What version of PHP do you want to use?. Most hosts online use 5.6 (and are behind the times). The latest version of PHP is 7.0. Ideally, you want your development environment to match your production environment. That way, when you get ready to launch the site, you don’t have any errors or unexpected behavior.

MySQL

MAMP Pro MySQL

On the MySQL tab you can change the password for “root”. I’ve just left the default password that MAMP provides: “root”. I know, not really secure, but I’m the only one developing on my machine and I’ve never seen it as a problem. If anything, it keeps things simple.

Dynamic DNS

mamp_pro_dynamicdns

I never use this tab, but it’s here. The Dynamic DNS section is if you’re trying to access your local machine’s server from another device or another computer on the Internet. It’s helpful that MAMP has this built in, but it also requires configuring your router and firewall appropriately. Obviously, security becomes a big concern — you don’t want to give just anyone on the Internet access to everything on your computer! Scary!

PostFix

MAMP Pro Postfix

I don’t mess with this tab, either. But, it’s important to know it exists.

If you need to send out email with PHP, you need to configure and start PostFix.

You can set the domain for outgoing emails. If you want to send emails from john@doe.com, then you would set the domain of outgoing emails to doe.com.

Then, you’d fill in your server information, possibly smpty.doe.com. You’d have to ask your service provider for those details if you don’t know them already.

Setting Up A Site

OK, I think this the part everyone has been most excited about. Enough of those boring preference details. Hopefully it was more interesting and helpful to read, than it was for me to write! Yuck!

Click on the Hosts tab. You can add a site for development by clicking on the “+” button, on the bottom left.

MAMP Pro Add Hosts

Add a server name into the text field on the right. I like for it to be project_name.dev This helps me keep my development environments straight, since the live environment is (typically) project_name.com

MAMP Pro Hosts Server Name

Skip down to the Document Root section. Click the folder icon and select the site directory (root) on your computer. This is the folder you’ll be working from.

MAMP Pro Site Folder

NOTE:

If you’re interested in how I have my project directories set up on my computer, this section is for you! If you couldn’t care less, that’s OK too, this is just the way I do it. Not the right way, just the way that works for me.

I have a Code directory with subdirectories for Composer, GIT, SVN, and Certificates. Most of the projects I work on are source controlled with git. Meaning, within the GIT folder I have separate folders for all my sites. Naturally, the site folder is the one I’ll select as the Document Root in MAMP.

If you’re interested, I have a whole post dedicated to how I structure projects on my computer. Geeky I know.

Click the Save button. A dialogue box will come up, asking if you want to restart servers. You can click Yes.

MAMP Pro - Settings Changed

You can tell if the server is running by looking at the checkboxes next to Apache and MySQL. The start button, will toggle to a Stop button and turn to green.

MAMP Pro - Hosts Server Start and Stop

When the server comes back up, you can go to your browser of choice and type domain_name.dev. You should see the contents of that folder appear.

NOTE:

Within Chrome, sometimes I have to use the full address (http://domain_name.dev) the first time I load the site in order to get it to load properly. Otherwise, it tries to search Google (unsuccessfully) for domain_name.dev.

If you’re working with static files (i.e. you don’t need a database), you’re done! Woo hoo! For everyone else, keep going. There are just a few more steps in the process…

Managing Databases

WebStart

Start by clicking on the WebStart button in MAMP. It should launch your default web browser with details about your MAMP installation.

On the left side, you’ll see the information you need for running MySQL (databases).

MAMP WebStart

PHPMyAdmin

If you go to Tools > phpMyAdmin, it will open phpMyAdmin in a separate tab / window.

MAMP Webstart PHPMyAdmin PHPMyAdmin

If you need login credentials, use the information from the WebStart screen. By default, it’s “root” for both the username and password.

Within phpMyAdmin, you should be able to manage your databases and do everything you’d ever wanted to. On the left is a list of all your databases. You can load a specific database by clicking on the name. Then, all of its details and controls are on the right side of the screen.

PHPMyAdmin - Self Teach . me Database

You can create a new database, by clicking on the New link.

PHPMyAdmin - New Database

NOTE:

You better believe I have a naming convention for creating databases. It’s always the name of the project (all one word), followed by an underscore and the type of database abbreviation.

For example, this site is selfteachme_wp because it’s built on WordPress. But, a Laravel project would be _l, Expression Engine _ee, Code Igniter _ci, Craft _craft.

The benefit is that I can immediately tell, simply by the name of the database, what type of project and database it is. It also prevents naming conflicts when I have a side project I’m building in Laravel and using WordPress for the marketing site. I want to keep the data in two separate databases: sideproject_l and sideproject_wp. Problem solved!

Sequel Pro

http://www.sequelpro.com/

Technically, I could end here. You have all the tools you need with phpMyAdmin. However, I do want to point out an alternative (and my preference) to phpMyAdmin: Sequel Pro.

This is a free application (for a Mac) that you can download and use to manage your databases. In my humble opinion, it’s much easier and faster to navigate. Plus, it makes it easy to manage remote (your server’s) databases too. = Everything all in one place.

Sequel Pro

To set up Sequel Pro to access your MAMP databases, click on the Socket tab. Again, you’ll use the same information provided by the WebStart screen: username, password, and socket. Click Connect and you should be good to go.

You can choose your existing database from the dropdown menu on the right.

Sequel Pro - Add a Database

Or select “Add Database” from the “Choose Database…” dropdown menu to create a new one.

Easy Peasy.


Resources

The documentation that MAMP has written is quite good and easy to understand:

There’s also information there for MAMP for Windows.


The Conversation