How to: Test Websites Locally

For you Mac users out there, did you know you can test a website you’re building locally? Â It’s a pretty handy tool, and has saved me tons of time. Â Before I knew about this, I’d usually have to save a file, upload it via my favorite FTP application (Transmit!), wait, and refresh my browser. Â But if you follow these steps, you’ll be able to build, test, and debug your sites locally.

First, you need to make sure that you’ve got your Mac configured correctly. Â Head over to System Preferences and click “Sharing.” Â Once you’re in Sharing, make sure you’ve got “Web Sharing” enabled. Â Be sure to take note of the ways you can get to this, paying specific attention to the first link. Â In this example, we’re going to be using http://10.0.1.10/. Â Yours will vary, so pay special attention to the 4th set of numbers in this URL! Â And please keep in mind that this is only viewable from computers connected to your network, so your friends across the world won’t be able to see it.

System Preferences Example

Â

Next, you want to open up Finder and navigate to Macintosh HD* | Library | WebServer | Documents (*=or whatever you named your hard drive!)

Here’s where you’ll be placing all of your documents to test. Â You’ll see a lot of stuff already in this folder, and that’s ok. Â That’s all the Apache documentation that comes preinstalled on your Mac. Â You can make a new folder in the Documents folder and call it “ApacheDocs.” Â Then you can just move all of those files you see into your new “ApacheDocs” folder. Â It won’t affect anything by moving them, it just makes it easier for you to get in and move around easier.

The important thing to know about this “Documents” folder is that it is now acting as the main (or “root” if you’re nerdy) level of your new web server. (And if you’re curious, yes, you can actually use this to host websites that people outside of your local network can see.)

Next what we’ll do is open our favorite text editor. Â I love TextMate personally. Â I’ll just make a new HTML document really quickly and call it index.html, and save it in the “Documents” folder.

After that I visit my website (http://10.0.1.10), and lookie lookie! Â I made a websites! Â Now I can finish building out out and then copy these files straight over to my live website and I’m good to launch!

A few notes about this web server is that it’s mainly meant to handle basic HTML and Javascript. Â It’s not equipped to handle PHP, Ruby, and advanced things like that out of the box. Â You’ll need to install and activate them on your own if that’s what you want. Â It’s totally possible to get them there though. Â Check out this tutorial on adding PHP to your Mac if you’re interested, or this one on Ruby on Rails.

Enjoy, and please feel free to ask any questions. Â

Share and Enjoy:
  • Twitter
  • del.icio.us
  • Facebook
  • Digg
  • Sphinn
  • Google Bookmarks
  • FriendFeed
  • LinkedIn
  • Tumblr