CGX Blog We'll see where this takes us.

Local Website Development on a Mac

It's extremely useful to develop websites locally before transferring to a server for public consumption. It's a simple proposition when you're pages are strictly HTML, CSS, and Javascript but what if you want to test a PHP site along with a SQL database?

This actually confused me for a while (:-/) so I thought I would write a quick overview of my setup up for anyone interested in web design or getting a web design degree. If you are building a website that uses a database, skip to "PHP Plus a Database".

The File Structure

Of course, it is important to establish an appropriate file structure for local development. Thankfully, OS X makes this easy for us as there is already a "Sites" folder and we can make as many new directories (sites) in there as we want.

Note: I actually moved my development directory out of "Sites" because I use Dropbox and wanted my sites to fall under the Dropbox directory, this is not difficult so email me if you have any issues beyond the standard configuration I show in this post.

Now that we know where our websites will reside, we need to turn on our local server so we can point to .html files while offline. To set up your local web server, simply to go System Preferences --> Sharing and select "Web Sharing". This starts up your local server, simple as that!

Now when you visit the address listed (see figure 1) it will take you to your "Sites" folder (your root) and look for an index file. Just like any web server, we can start putting new directories in there and point to "root/new_directory/index.html" in our web browser.

CSS and Javascript

Whether you are developing on an external server or locally, it is always best practice to use relative links wherever possible. This allows you to easily reuse code, change domain names, develop on multiple machines, etc. without the need to change every single link or pointer. If you are doing this already, great! You don't need to worry about a thing if your site uses CSS and JS files - so long as your directory structure is intact, your page should show up as normal. The same goes for image references and links to pages within your site.

For example: Instead of linking to a CSS file with the URL "http://www.examplesite.com/css/core.css", use the relative path of the file, i.e. "../css/core.css". If you are unfamiliar with relative versus absolute paths, see this overview: http://surviv.es/foExsM

Support for PHP

If you're developing in PHP (way to go), try pointing to a PHP file. Unfortunately, it will not render the web page but instead show you the text contents of the PHP file. The good news is that OS X comes with built in support of PHP! Others have done a great job summarizing the steps needed to enable PHP handling on a mac so I won't recreate the wheel. See this page for a solid overview: http://surviv.es/g2rQOI

PHP plus a Database

While all of the steps above are useful for understanding the fundamentals, by far the easiest way to enable PHP, Apache, and set up a mySQL database is by using a MAMP Stack. This incredible package does all the work for you, comes with useful tools, and does not disturb your core Mac Apache installation.

MAMP

1. First thing's first: Download and install MAMP --> MAMP and MAMP Pro
2. Install using their oh-so-easy installer
3. Use either their Application or their dashboard widget (my preferred method) to start your Apache and SQL webservers!

That's it. Now you're ready to build a PHP site that uses a database all on your local machine. How easy was that?

Quick Tips

MAMP wants you to put all of your site files into their directory, which resides in the applications folder. That's fine for some people but it's slightly annoying and very easy to change:

1. Open your MAMP application
2. Click Preferences
3. Select the "Apache" tab
4. Enter the path of your Root web directory
• Mine, for example, resides in "/Users/username/Dropbox/Sites"

Text Editor

There are a hundred differing opinions on the best text editor or IDE for web development. This comes down to a lot of personal preference, past experience, and, often, price. Below are a few options that I have used in the past for you to consider.

• skEdit - My current favorite. This application allows me to save projects, easily browse the file structure, open multiple files within one window, color code, and set a preferred preview browser. Everything I need and only $25-$35 depending on the promo.
• Coda - A beautiful application with a lot of functionality. One of the only reasons I don't use this program is the price tag - I end up paying for many functions I do not use (such as the CSS editor and integrate FTP client). I highly recommend giving this a try if you can justify $99
• TextMate - a good application but too pricy for it's functionality in my opinion. I think the user interface is really outdated, I wasn't a fan of its default color coding, and it was simply too pricy for the functionality - $57 at the time of this post.
• Smultron - I love this app for simple development. I used this as my primary editor until my switch to skEdit, I highly recommend giving it a whirl. It used to be free but is now $4.99 at the Apple App Store.

Concluding Thoughts

This is a broad topic so I certainly skimmed over some important points and missed others entirely. I hope this was a helpful overview and, as always, I'm happy to answer any specific questions!