·

photo credit: Gwen Vanhee via photopin cc

How to prepare OSX for local webdevelopment

In this article, I will explain how you can setup an Apache/Mysql/Php-server on OSX for your local development. The fun part is that I will also explain how you can configure OSX so that requests to http://*.dev/  are being transfered to the right directory.

Why not use an existing solution, like MAMP for example?

I’m familiar with MAMP and indeed, I also use it for almost all my projects, but it’s also nice (and incredibly awesome) to play around with this kind of stuff yourself so you can learn now what just the heck is going on.

Apache

A nice thing about OSX that it comes bundled with an Apache server out of the box. so the first thing we have to do is fire up our terminal, switch to the root user (to avoid permission issues), and flip on Apache:

Check if it works by going with your browser to http://localhost.
From here on, it’s recommended to do all the work while logged in as a root user in the terminal.

PHP

PHP also comes bundled with OSX, so let’s just enable it by navigating to the apache directory and edit httpd.conf:

Now search for the following line and uncomment it by removing the #-character in front of it:

Restart Apache:

MySQL

Easy as pie:

  1. Download the MySQL DMG for OSX.
  2. Install MySQL
  3. Install the Preference Pane
  4. Open System Preferences ? Mysql
  5. Start the sucker

Connect PHP and MySQL

In the terminal, do:

Setup VirtualHosts

Now this is where the magic happens. So far we have our Apache server running, and it’s working nicely with PHP and MySQL. Now, most tutorials at this point explain on how you can edit the httpd-vhosts.conf-file to add different domains, and edit the hosts-file accordingly. That’s not what we are going to do:
For our local development setup, we want our Sites-folder to be packed with various folders for our subsites. For example, Sites/mysite.dev should open in http://mysite.dev, Sites/yoursite.dev in http://yoursite.dev, and so on… All without having to constantly edit the hosts-files.
So how are we going to do that?
Now first of all, we have to add some code to our vhosts-file. So open up /etc/apache2/extra/httpd-vhosts.conf in your editor and put the following in it:

Of course, you have to change the /Users/Giel/Sites-part to the path on your system where you store your sites.

Bind

Now, notice how we want to access our development sites with URL’s like http://mysite.dev/. As we all know, .dev is not a valid top-level domain, so navigating to it would result in a page not found.
Lucky for us, OSX is also packed with a built-in DNS server: Bind. We can configure this, that all requests to .dev should be mapped to our localhost. Now hang on cause we’re going for a ride:
First of, we have to the rndc.conf and rndc.key. You can easily do this by running the following commands:

No we have to add the .dev zone to /etc/named.conf. So edit this file and add the following lines:

As you might notice, this rule references to a file called dev.zone. So let’s just create it! Create /var/named/dev.zone and put the following in it:

This DNS zone file makes sure that all requests to the top-level domain .dev get assigned to our localhost. The only thing you should change is the serial (1984). I just put my year of birth in here, but it’s important this doesn’t conflict with other DNS zone files.
Now we have to check if it works. In your terminal type:

and look if you see something similar to this:

If you see this, the zone file is correctly loaded. If you get an error like ‘extra input text’ you probably made a small typo. In this case, make sure you have the zone file exactly as mentioned above (with the dots after localhost and such, these are required). Line breaks can also be a killer. If you get an error like ‘unknown class/type’ you’re probably using a serial that’s already used by another DNS zone file.
You can just CTRL-C to close named. When it’s closed, just type named (without options) to run named as normal. The next thing we must do is cause named to load everytime the system restarts. We can do this by typing:

The last thing we must do is create a resolver. We do this in the /etc/resolver folder. If this folder doesn’t exist, create it. In this folder we put a file called dev and in it we simply put:

That’s it! You might have to restart Apache now

and/or flush your local DNS cache

but everything should work now.

How can I use this?

Well, remember that directory we put in our vhosts-file? (In my example it’s /Users/Giel/Sites). Just create a directory in there called example.dev (so the full path is /Users/Giel/Sites/example.dev) and put an index.php in it with a simple phpinfo()-command. Now navigate to http://example.dev/ (don’t forget the trailing slash or else your browser might think your executing a search query).
Voila!

Special thanks

Of course I didn’t figure this all out on my own. Therefore, special thanks go out to:

Visitors give this article an average rating of 3.0 out of 5.

How would you rate this article?

6 thoughts on “How to prepare OSX for local webdevelopment”

  1. Simon says:

    Tip: learn to love brew and check out dnsmasq to make your life a lot easier 🙂

      1. Giel Berkers says:

        Thanks Zimmen! That’s a great gist! I’ll make sure to check it out! Never stop learning right?

    1. Giel has seen the light.

      1. Giel Berkers says:

        I’m just getting warmed up here!

  2. rocoso says:

    I wanted access to http://localhost
    ln -s /Library/WebServer/Documents/ localhost

    is it possible somehow to access mydomain.dev on my LAN?

Leave a Reply