Set Up a Development Server using LAMP+SVN on Leopard


index_hero20080108

You’ve probably seen this article a dozen times over, all of them detailing about installing a handful of applications and services, configuring them through the terminal, running some arcane commands and in the end if you know what’s going on, you end up with a web and development server running on your computer.

Well, this isn’t so different from that -- but it’s very different. See I’m not a UNIX expert or Command Line master by any stretch and this article isn’t going to explain the lengthy installs using make or ./configure. Instead, I’m going to simply show you how to get these installed with a zero-config, default setup.

As a designer, I tend to look for tools that are easy to install and use. With Leopard, getting a development environment setup is easier now than it has ever been. With the tools available now you’ll enjoy getting a little geeky without following confusing instructions. So here we go.

First, the point of this setup is to mimic your live web server, as if you were really going to yoursite.com. Most shared servers are built with some version of Linux operating system, PHP 4 or 5 programming language, MySQL database and Apache web server. This common setup is known as LAMP.

Your Mac is based on UNIX (which Linux is based on). Everything except mySQL is already on your machine ready to be used.

Apache
Apache web server is turned off by default, but getting it running is super simple. Click your System Preferences, head over to Sharing and turn on Web Sharing. Click the provided link to see your webserver running. The top link is a system wide website (/Library/WebServer/Documents), and the second is your user website (/Users/~youname/Sites). That’s all for now, but leave it open since we’ll be right back.

System PreferencesScreenSnapz001


PHP5
PHP5 is also pre-installed on your Mac, but it too is turned off. Here is one of spots in the article where we get a little geeky. When you turned on Apache web server in the previous step, it loads in a text configuration file with all the settings for Apache to do its thing. Like going to the Preferences in Photoshop or some other program and making changes to how the program works. Some of the settings are modules or external programs that load with it when Apache starts up. PHP is one such module that needs to get loaded when Apache start up.

The file is named httpd.conf, which is the main configuration file for Apache. The problem here is that Apple has hidden this file (any many system files) from its users, (technically from the Finder). So how do you get to it? You could use the Terminal and if you feel comfortable there, it’s only one line to open it up:

sudo pico /etc/apache2/httpd.conf

TextWranglerApplication
But I’d rather use a text editor on the Mac. Even if you use the terminal to edit the file, you are still going to perform the same function described next. I’m going to suggest getting a copy of TextWranger from BareBones software. TextWrangler is a free/lite version of BBEdit - the text editor choice of many professional programmers. TextWrangler has a specific feature for opening and working with hidden files which makes it easy to go in and edit configuration files like this.

  • TextWranglerScreenSnapz001
    Click File then Open Hidden..
  • Click the Macintosh HD in the devices list from the left column.
  • Click the the etc folder (which has an alias icon)
  • Click the apache2 folder
  • Now click the httpd.conf file to edit.

Scroll down just a little until you see many lines all beginning with LoadModule. These indicate that the items to the right are to be loaded when Apache starts up. The second to last item:

#LoadModule php5_module libexec/apache2/libphp5.so

Notice the hash # symbol at the beginning, this indicates the line is just a comment and should be ignored. Simply delete the hash and save. You will be asked for your password since it requires an administrator make the changes.

Go back to the System Preferences, turn off Web Sharing, then turn it back on. PHP is now loaded. To be sure, we can test it. Create a new file in TextWrangler with the following code:

<?php phpinfo();?>

Save it as info.php in either /Library/WebServer/Documents/ or /Users/~yourname/Sites/. Load the main page then append the address with info.php

SafariScreenSnapz018

You should see a long page with a lot of information and version numbers, but if it doesn’t make any sense, it doesn’t matter right now since all you need to worry is that you see the page loading. If you see the code you typed instead something is wrong.

MySQL
MySQL is the most popular relational database on the market, mainly because its free. This last step is probably the trickiest, but still not very difficult. It’s tricky because it’s not present on your system, so you are going to have to go and get it. Thankfully, there are packages available to make the install painless and with the Mac ease you already know.

Click below to go to the mySQL 5.1 download page
http://dev.mysql.com/downloads/mysql/5.1.html#downloads
There are 3 files for 10.5, x86 Power-PC 32-bit and Power-PC 64-bit. x86 are for Macs based on Intel chips and the Power-PC chips are G4 and G5 series. Click the Pick a mirror links to the right for your system. If aren’t a member, you can join or just click the No thanks link. Now choose a download link from one of the mirrored servers.

A .dmg file is downloaded and mounted on your system. Double click the mysql-xxx package to begin the installation. In a few minutes MySQL is installed. MySQL is a service, so it runs in the background. To stop and start MySQL, a preference pane is available in the mounted drive, just double click it to load into your system preferences.

FinderScreenSnapz001

Since there are no users setup yet, this is the first thing we need to do. This the only time you will need to use the terminal today but its really painless. So, go to your Utilities folder and double-click the Terminal app. Type the following (or copy and paste it into the Terminal)

cd /usr/local/mysql/bin

Hit Enter. Next type:

./mysqladmin -u root password [your_root_password]


Where it is says [your_root_password], it should be replaced with whatever you want. Hit Enter. Once that’s all set, return to the System Preferences, click the MySQL preference and start MySQL. That’s it.

PHP and MySQL
You’re more than likely going to want to setup a web application that talks with MySQL from PHP. If you use the usual host setting, which is normally ‘localhost’, you will get an error explaining it cannot connect to mysql.sock(2). If you change the host setting in your application to localhost:/tmp/mysql.sock - this will fix that error message and connect you to your local database..

SVN
Subversion or SVN is a versioning system which lets you manage your files in a centralized repository. SVN watches and records each and every change within a file in this repository. This allows you to, if you ever have to, go back in time, to a recorded version. If you’ve ever used Pages, there is a feature called Track Changes, which makes notes about the changes made to your files and when, as well as let you go back to a previous version if you feel it’s not right. That’s more or less how SVN works.

Getting SVN on your Mac is easy since it’s already there. SVN isn’t the simplest piece of software to use, mainly because of the amount of concepts to grasp and it is truly a geeky tool. I highly recommend purchasing Versions which makes working with an SVN repository so much easier and Mac friendly. I’ll be doing an article at some on setting up a repository with Versions.

That’s it, I’d love to hear you feedback, post a comment or email me. This is the first in a few How-To articles covering setting up your own development and deployment workstation. I’ll be writing more on working with MySQL, PHP, Virtual Hosts, domain names and applications that make working with these really easy and fun.

|

QuickLook: Espresso

espresso-icon
I have been working heavily in Espresso from MacRabbit Software since MacHeist, and really enjoying its calming interface over Coda which is decidedly a bit loud in comparison. From the soothing fresh-brewed coffee cup icon, to the minimalist interface, Espresso keeps me coding happily - at least for the morning.

Features I like:


  • Quick Publish lets you send your files immediately to your server upon saving your document. Quite handy since you know we get tired of switching apps, dragging and dropping, refresh the page.
  • Live Preview lets you view your page right in Espresso. (Only HTML/CSS)
  • Tag Finishing - Espresso finishes your HTML tags for you smartly by knowing what element level you are typing within.
  • Simple Workspace - Clean, elegant single window view makes working in Espresso so sweet.

Feature That Need Help:

  • Auto pairing - I’d like to Espresso match up quotes, square braces and curly brackets when typing. This only occurs when Espresso uses it’s CodeSense for completion.
  • Sugars ended up being nothing more than new CodeSense language files. Would like to see this idea expanded into more directions beyond code finishing and syntax coloring. Maybe a live PHP ouput?

Espresso Main Window

|

Capo - Analyze Your Music

screen1_sm
Software developer Supermega Ultra Groovy (It’s really their name), has just released Capo, a song-slower-downer application. Seriously. According to SMUG,

Capo is a musician's best friend. It lets you slow down your favorite songs, so you can hear the notes and learn how they are played.


I haven’t tried it yet, but I am awestruck by the gorgeous website and user interface for Capo.
via Daring Fireball
|

Tweetie for Mac

Tweetie icon
AteBits has released their newest creation, another Twitter client. Why is that so special when there seems to be a new Twitter app released either for the iPhone or desktop every week? Well, because Tweetie for Mac is actually very special.

Just released today, Tweetie offers an extremely slick interface that’s easy to get around with tons of great features for the hardcore Twit. Besides viewing and posting to your own feed, you van view your @replies (@mentions) separately, view direct messages, and search right in Tweetie.

The application acts and look very much like an iPhone application, though its quite different from their Tweetie for iPhone. The breadcrumbs, the slide animations, the small window all reflect an iPhone like app. This does not take away any of the experience or usability by any means. Tweetie is an efficient Twitter tool. One of the best features, is viewing images from services like TwitPic, which get loaded in a QuickLook style window.



TweetieScreenSnapz005


TweetieScreenSnapz002TweetieScreenSnapz001

Tweetie is available for $14.99, or a free ad supported version. I’ve been using EventBox recently which I really enjoy, combined with other social networks like FaceBook and Reddit - EventBox gives me a one stop shop for keeping up on my social networks. And its interface is clean and feature full. Tweeite’s visual style and ease of use has my vote for the moment. Your thoughts?
|

Another App with Web Link in UI

I came across another app using link in the upper right of the window.

versions

It just feels like a web page in the way it placed and its function.
|

Grape. A New Way To Organize Your Desktop

Docklandsoft has developed a piece of software which lets you interact with your desktop files in a new way. Lots of users use their Desktop as a miscellaneous folder (like me), a place where you either cannot file logically or as a temporary holding place.

Launching Grape clears your screen except for files that are on your desktop. From here, you can group files into stacks or piles. Each file has a generated preview which you can scale, scroll through multi-page documents and view movies. Grape lets your group, label and zoom in on your piles.

By and large the best feature was the search, which fades any item not found in the results into the background leaving just the files found. Watch the embedded video below and see what you think.


Grape Desktop Zooming Interface 01 from yann le coroller on Vimeo.
|

Is This a New Trend in UI?

I’ve noticed in two of my apps that came from the MacHeist promo a small piece of text in the top right corner that are clickable. Both Espresso and EventBox have clickable links in the top right corner of their applications. Espresso which is fully unclocked sends me to a page to purchase it (odd).
espressobar
EventBox displays that it’s a MacHeist Edition and takes you to the MacHeist page.
eventbar

I hope Mac developers don’t start spamming their customers with links plopped about their applications. I can hope this is saved for promotion purposes like these instances - since I have not purchased either through their respective companies, I do not know if this is how all apps are.
|