Localhost and workflow

27February
2010

A minor disclaimer, this is meant for other designers; while anyone is welcome to read it, it will likely bore you to tears if you’re not designing for a living. If anyone notices something poorly written or just wrong, please let me know. Hopefully it helps someone or gives someone new ideas.

When I work on a new or existing web project, my most common setup is to have a local version; a development server (usually a subdomain on the same server as the hosted site, such as dev.whateversite.com); and then the live site. There are a few things I do that make life a lot easier, thought I’d share it in case someone might be helped by it.

Some notes on software: I feel Textmate is essential. Coda is nice too, but Textmate is really such a powerful, simple, and stable program, I couldn’t imagine using anything else. Out of a fresh install it’s pretty good, but I change my ‘theme’ to Twilight and sub out my font with Inconsolata, which I feel is one of the better monotype fonts. I also have a custom bundle that I use which enables me to wrap a block of copy in whatever tag, I have p, li, h1, h2, etc. all mapped to f keys. This is huge timesaver.

I start on a localhost and create a new virtual host. Pulling up terminal I type: cd /etc/apache2/extra, then I type mate httpd-vhosts.conf (you’ll need Textmate for that second command).

Start a new virtual host if this is a new project:

cd /etc/apache2/extra

mate httpd-vhosts.conf

Add a new virtual host (same as your other one, just change the number by one digit). Then you’ll want to restart apache.

sudo apachectl restart

Next, I create a new git repository. If you’re working with others, this is vital, but even if you’re working alone, it’s nice to have an infinite backup of every change you’ve made. I use git as my repo because it’s a lot faster than SVN, branching makes more sense to me on git, and it’s a distributed repository. To get a better idea of the pros and cons of distributed repository versus central repository (SVN) I’d search for other pages on this. For me, I just like the tidiness of git; it’s quick, clean, there aren’t .svn files littering all my files, and I’ve never had any huge issues. There aren’t any decent GUIs for git, but that doesn’t really bother me. If Versions ever develops a tool for git, I’m sure it would do well, but for me, I just use the Textmate bundle.

I use InDesign to design my comps. I’m not sure why Photoshop became the industry standard for this. It makes zero sense to me (and it’s incredibly inefficient). Photoshop is good for raster (photos mainly), Illustrator for vector (logos, drawings, etc.), and InDesign is good for both. If all your graphics are placed images, there is no slicing needed. This could be a post all on its own, but I’ve used Photoshop when working for other agencies (believe it or not, there are designers that can’t use InDesign), and it takes exponentially longer — especially if you decide to be more organized than having 500 layers named Layer 123 (or whatever).

When the comps are approved, I take it apart and put it into HTML then get to play in Textmate for the rest of the time. I use Textmate Projects for all the sites I’m building or maintaining and keep these in a folder on my dock. To test locally in IE, I use Parallels. I’ve used both VMWare and Parallels and it’s really choosing the lesser of two evils. But for my setup anyway, to view a localhost on Parallels, I use http://pk.local:8080 (you’ll need to change that to whatever your username and port are of course).

When it’s all shiny on my localhost, I’m ready to push to the dev site. As an aside: my developer is a genius, probably the smartest person I know (maybe tied with my brother). He does all these really cool little things for me which for him are relatively simple, but save me hours of work. So, thanks to him and this little Ruby Gem he wrote, I just commit and push my changes in git (using the Textmate bundle, this takes all of 10 seconds). Then I type production-sync devsite into Terminal. “Devsite” is whatever the development server nickname I’ve defined. This syncs everything outside of the files defined in my .gitignore file. This little action is brilliant, it’s saved me so much time. It’s not the first time I’ve seen a way to sync, but it’s the first one I can use without stressing about the results. Because it’s SSH and git, this entire process is incredibly quick. If you’re used to FTP, you’ll think you’ve done something wrong — it’s that quick. After the client approves, then I use the same command (instead of devsite it’s livesite, or whatever) to push to the live site. And that’s it.

Setting up your localhost for the first time

This is something you’ll only have to do once until you get a new computer. For that reason I’m not 100% on all these steps, but it’ll get you started. It’s geared toward 10.6; if memory serves, 10.5 is different. Your Mac already has php, apache, and rails installed. Setting up a local server isn’t too bad. For this to work the same way for you, you’ll need Textmate installed. In addition to that, when you install Textmate, it will ask you if you want an alias installed. I’m not sure of the exact dialog box, but it’s the only alert box besides registration. You want to install this; essentially, this allows Terminal to speak to Textmate.

  1. Open Terminal and type: mate /private/etc/apache2/httpd.conf
  2. Around line 115, uncomment the line that starts with “LoadModule php5_module”
  3. Around line 465, uncomment the line “Include /private/etc/apache2/extra/httpd-vhosts.conf”
  4. Save and exit (you’ll have to type your password)
  5. back in terminal, type: cd /etc/apache2/extra
  6. now type: mate httpd-vhosts.conf
  7. this last command will open your httpd-vhosts.conf file in Textmate
  8. Comment out this entire file and paste this in:
    Listen 8080
    NameVirtualHost *:8080
    <VirtualHost *:8080>
    ServerAdmin youremail@whateversite.com
    DocumentRoot "/Users/yourusername/Sites/whateversite"
    ServerName localhost:8080
    ErrorLog "/private/var/log/apache2/whateversite-error_log"
    CustomLog "/private/var/log/apache2/whateversite-access_log" common
    </VirtualHost>
    Make sure you change your email, username, and site references
  9. Now, to restart Apache, type: sudo apachectl restart
  10. In your Sites directory you should have (or create) a folder with your new web project in it. That folder is essentially your ‘root’. If you put an index.php file in there with the line <?php phpinfo(); ?>, you’ll see a php info page when you go to . That means you did everything right so far.

This is the setup for your php and virtual hosting. You’re also going to want MySQL most likely.

  1. Go to the download page for MySQL and install it.
  2. I would also strongly recommend Sequel Pro, this is a fantastic tool. So, you might want to download and install that.
  3. In the installation process for MySQL, you’ll have created a user and password for MySQL. Open up Sequel Pro, this should be entered in the appropriate field. Your ‘host’ is going to be 127.0.0.1
  4. That’s about it for a local installation.

Some other notes:

  • Don’t be cheap on your monitor, you’re looking at it for over 8 hours a day. I’d highly recommend a 30″ Apple Cinema Display, it allows you to have your Textmate window open alongside Safari (cmd + r in Textmate will kick you over to Safari and refresh).
  • I’m using a MacBook Pro (17″), so I have the 23″ right now because Apple is using us for guinea pigs with the mini-display port (hopefully it won’t be another technology they discontinue after a few years like their last adventure in unusual display plugs), but I sorely miss my 30″. I’ll get a new display the day the 30″ with the mini-display port is released. But I really like having a laptop as my main computer. I can’t stress enough how much nicer it is to have everything in one place. It’s not as fast as my old Mac Pro for some stuff, but I rarely need the horsepower of anything more than this. When I had both a Mac Pro and a MacBook Pro, I’d have to try to make sure both computers had all the fonts, latest software, were up to date with patches, etc. And no matter how hard I tried, nearly every time I opened up my laptop at a client’s, I’d have forgotten something — a font, graphic, file, something. Now, I have all my files with me when I go to visit my clients, it allows me to work wherever I am if need be. This is really handy when you just need to make one quick change or have two meetings with an hour in between and can go to a coffee shop and get some work done instead of driving back to the office. The other nice perk is that if I’m just coding and don’t really need a mouse, I’d much rather be sitting on the couch all kicked back and relaxed.
  • Spend some money on your chair too. I’ve had my Aeron for eight or nine years, it’s still in great shape.
  • Get some good speakers. This is subjective, but I work alone a lot. If I’m having a hard time getting focused, I can always find some inspiration there. I have mine hooked up to a receiver which is plugged into an Airport Express via an optical cable, and I’m lucky enough to work in a place where no one complains about volume. It’s one less wire to plug in to my computer.