As mentioned in a few of my earlier tutorials, MAMP is a great tool that can be used to setup a development environment on your local computer. This will allow you to create, edit, and test your websites before publishing to your production server. MAMP is free, extremely easy to use, and if you create an infinite loop it won’t crash your entire production server. In the end, every web developer should have a local development setup of some kind.
I also like to use Dropbox in conjunction with MAMP in order to work on projects from any computer and from any location. I personally don’t use my laptop as much as many other developers and take it with me. Rather, I have a Mac Pro at work and Mac at home. This makes the use of Dropbox all the more valuable to me.
Installing MAMP
The first step in getting your development setup is to download MAMP. You can find and download MAMP at their official website. This will download an installer for both MAMP and MAMP pro. The installer is a .pkg file so it will take you through the steps of installation. Once the installation is complete you can simple delete the MAMP Pro folder and use only MAMP. You could also keep the MAMP Pro folder of course if you think you might go with the paid solution in the future.
When you open up MAMP for the first time there will be a small window that will appear that asks if you want to use MAMP Pro. You can chose the option that says not to check for MAMP Pro when starting up so you will not get this message in the future.
MAMP Settings
Once MAMP is up and running, click on the preferences gear in order to change the preferences for the application. Alternatively use Command+, which is faster and is the universal preferences key for all applications on OS X.
There are four different tabs on the preferences pane: Start/Stop, Ports, PHP, and Apache. For my local development environment I only change the Start/Stop preferences and the Apache preferences. The others can be left as they are.
For Start/Stop, I ensure that “Start Servers when starting MAMP” and “Stop Servers when quitting MAMP” are both checked. I like this just because I use Alfred to open and close all my applications, so this way I can open MAMP, and just tab back to Sublime Text and get to work. The Start/Stop preferences should like the following when you are done:
Next go to the Apache preferences. This is where Dropbox comes in for my personal development environment. If you don’t want to use Dropbox, you definitely don’t have to. If you don’t then your server’s document root will be under Applications/MAMP/htdocs/. You would then put everything you were working on in there. If you want to use your Dropbox, then change the document root to where ever you want it in your Dropbox folder. My document root looks like:
Testing Our Setup
It’s now time to make sure that everything is working. To start, take a copy of the Foundation Framework and copy it into your document root, either the default MAMP htdocs folder or the folder your chose from your Dropbox. If there is anyone out there who hasn’t used Foundation before, its an amazing front-end framework and you should use it. It’s a great starting point for any site.
Next you will want to go to http://localhost:8888/ to ensure its working. If you see the Foundation starting page, then your setup is working.
But what if you wanted to have more than one site running on the server? Most developers work on more than one project at a time. It’s simple, just put each site into its own folder in your MAMP document root. For example, if I put a folder called ProjectManager with my Foundation framework in it into my document root, when I go to http://localhost:8888/ProjectManager/ I will see the Foundation start page again.
If I add a different folder called WebGL to my document root and put a simple index.html page and then go to http://localhost:8888/WebGL/ I will see my WebGL projects index page.
If you want to access phpMyAdmin the link should be http://localhost:8888/MAMP/index.php?page=phpmyadmin&language=English. From there you can create whatever databases you need and manage everything just like on a regular production server. If that link doesn’t work, check what your MAMP ports are set to. If they are different then change the URL accordingly.
That should be all you need in order to get started running your local development environment. Go and create something awesome on your local machine without fear of infinite loops or doing something wrong.
As always thank you for reading and please share it around as much as you can! Please feel free to put any questions, suggestions, or ideas in the comments section below. I would really like to know what kind of tutorials everyone wants me to make.