Setting up a local server environment (MAMP)

Many projects require more than just a simple, static HTML page. We may be using PHP to develop a content management system (just like or we could be grabbing data with d3 in order to produce dynamic data visualizations. Setting up a local server allows for server-side languages to interact with the browser and directory. Basically, if you have other files you want to interact with your current page, you’ll need to have a server to host server-side languages to grab those files and build into the browser view. There are many local server packages out there, but my favorite is MAMP (Mac, Apache, MySQL, PHP). This is a Mac specific client, WAMP is for PCs. First things first. Download the package. It’s heavy, around 150MB, but a necessary step in creating dynamic sites. The MAMP application will just be like any other application you download and install, and will have a series of folders and .rtf files, most of which we can ignore. Screen shot 2013-06-20 at 4.45.35 PM Open the application, and start the servers. It will ask for you password since this will access your computer’s brain and you wouldn’t want hooligans getting away with their intrusive shenanigans. You’ll see the lights go green, and your open/primary browser will navigate to the MAMP local site, which means you’re running error free. Screen shot 2013-06-20 at 4.49.59 PM In the MAMP file structure, you’ll see a folder named “htdocs.” This folder is your active directory where you can work out of. I like to stick to this folder to keep projects that require the server separate from others that do not. You can change this localhost folder if you like through the preferences. This working folder is where you can store projects, such as a d3 web-map that is grabbing .json files for the data. Your directory structure may look like similar to this: Screen shot 2013-06-20 at 4.54.48 PM Now, you may try and drag your index.php file into your browser as if it were a static HTML page, but you’ll run into trouble and it will simply display the source code of that file (by desloge). This happens because your browser doesn’t know what to do with a .php file and simply displays the data within it without executing the functions that exist. In order to access this index.php go to your preferences in MAMP and navigate to the ‘ports’ tab. I like to update these port numbers to Apache: 80 and MySQL: 3306 personally, because this creates a simpler path to remember to enter into your browsers’s URL path. Now you can access your files with the following URL:


Screen shot 2013-06-20 at 5.01.49 PM An example on my computer: Screen shot 2013-06-20 at 5.13.30 PM

MAMP actually builds index files for your directories, so if you just type “localhost” into your browsers URL you will see a list of the files and folders within the htdocs folder. Neat-o! Now your computer is set up to build with d3 or setup a local WordPress CMS for designing and developing. It’s safe to just keep those servers running, too. It may feel like you’re keeping your headlights on, but don’t worry it doesn’t run out of juice like a car battery.