Set up your MAMP like a DEV KING26

If your reading this, then you probably know what MAMP is, but for those still in the dark – The abbreviation “MAMP” stands for: Macintosh, Apache, Mysql and PHP. You can learn more about MAMP here.

Objectives

1) Set up MAMP, so that your websites can sit in your SITES folder (not in the nasty htdocs folder.. yuk)
2) Turn your local dev URLs from this ugly URL: http://localhost:8888/dangermoose to this super cool and easy URL: http://dangermoose.dev

“During this guide, I will refer to how I have set up my development site for dangermoose. So, where you see the the text dangermoose just replace it with the name of your site”

Installing MAMP

If you have already installed MAMP, feel free to put the kettle on, while your counter parts read on.

1) Installing MAMP is easy (isnt everything on a mac?), simply download the latest free version from here and unzip the downloaded file

2) Once unzipped, double click the mamp.dmg file

3) You should see this user agreement, click Agree

4) Hopefully, you’ll see something like the image below. Drag the MAMP folder (NOT the MAMP PRO) to the Applications folder and pat yourself on the back – MAMP is now installed.

Testing MAMP is working

1) Go to your Applications folder, there should be two entries that say MAMP. One of these is the application itself (the one with the grey icon), the other is where the MAMP files reside (we’ll get to that later).

2) Double-click on the grey MAMP icon to start MAMP (you might also want to drag the MAMP grey icon to your dock for future use).

If everything is working, your default browser should open a new tab and display the MAMP starting page. Hopefully something like this:

If you can see this screen, it’s a good start. It means the default web server settings are running as sweet as a nut and as far as MAMP is concerned, your web server is running as smooth as ever. If for some reason the starting page does not display, sadly the reasons for this are beyond the scope of this guide, but alas, the MAMP support forum is pretty darn helpful.

If you want (and many people do), you can start to use the webserver as it is. Just put your website folders inside the Applications > MAMP > htdocs folder, then navigate to this URL http://localhost:8888/dangermoose/ and with a bit of luck, your website is there in all it’s glory!

Set up your MAMP like a Dev King

Many folk are comfortable using the default settings, in fact some preach by it and I’ll be the first to say that’s just fine.

“If it isn’t broke don’t fix it”

If on the other hand, you would prefer to see your website at http://dangermoose.dev AND store all your websites in the /Sites/ directory, then we can do this too.

There are a few steps involved, so let’s be precise and go through each one in detail.

Step 1 – Setting up MAMP to use your /Sites/ directory

As mentioned above, MAMP by default points to the default location of Applications > MAMP > htdocs, but if your reading this far, it means you (like me) probably prefer to keep your websites stored in the sites directory (on my mac it’s /users/flashmac/Sites/)

Luckily, this is simple. Once you have MAMP running, click on the MAMP grey icon (did you drag it to your doc?) and you should see a small window like so:

Click the preferences button and click the forth tab named ‘Apache’, then just enter the location of your Sites folder.

MAMP should now be pointing to your Sites directory.

Typing http://localhost:8888 will show you the contents of your /Sites/ directory.

Typing http://localhost:8888/dangermoose.dev will show me the contents of my /Sites/dangermoose.dev directory.

While we’re in the preferences tab, go ahead and click on the second tab named ‘Ports’. By default your Apache port is probably set to 8888. This is the port number for MAMPs version of Apache – because we don’t want to have to type in that ugly 8888 port number in our URL every time, we can change MAMP to use the Macs very own built in Apache which resides on port 80. Go ahead, change the port number from 8888 to 80.

Now, instead of http://localhost:8888, we could type http://localhost:80 or just http://localhost (see no more typing 8888 mumbo jumbo)

Just for the record, here is how the other preferences should look.

Step 2 – Add your site to the hosts file

We need to add your dev site to the hosts file, so in my case, I have a development copy of dangermoose in a folder called ‘dangermoose.dev’ (the location of this folder is /Sites/dangermoose.dev), it could quite easily be called ‘dangermoose’, the suffix of ‘.dev’ is just a habbit of mine, you don’t really need this.

If you haven’t the foggiest where your hosts file is, don’t worry, you can easily locate it by with a crafty shortcut:
Open Finder and press OPT + SHIFT + G.

At this point you should see a pop up titled ‘Go To Folder‘. Simply type in /etc/ like above and click GO.

You should now be inside the /etc/ directory. Scroll down until you find the hosts file and open it in your favourite text editor.

If your not familiar with the host file, don’t worry, again it’s fairly easy – it’s just a way of getting your browser to redirect one URL to another location. Take a look at the image below, you can see I have just added one line of text “127.0.0.1 dangermoose.dev”.

So if your website is called SexyShoes.com and maybe your local copy is stored in a folder called sexyshoes. You need to add the text “127.0.0.1 sexyshoes“.

This is how we tell the browser that when http://dangermoose.dev (or sexyshoes) is entered into the URL, it shouldn’t go off on a tangent, instead it needs to load up 127.0.0.1 (localhost). If that in anyway confuses you, scroll down a few inches and read ‘A little story’.

Step 3 – Virtual Host

If you type in http://localhost into your browser (make sure MAMP is running), you’ll probably see a list of everything in the /Users/YourUsername/Sites directory which is nearly what we want, but not quite. I could navigate to my dev website by entering http://localhost/dangermoose.dev but what I really want (and you too I guess) is to be able to type http://dangermoose.dev (without the ‘localhost’) – no problem!

Remember after the install, there were two MAMP files in the Applications folder (Applications > MAMP), well one of them was actually a folder. If you open this and navigate your way to Applications > MAMP > CONF > APACHE, there will find a file called ‘httpd.conf’. Open this in your favourite text editor.

This is where all your Apache (the web server) settings are stored. If this is new to you and floats your boat, you can google apache till your heart is content. For now, we just need to know how to set our virtual host.

Scroll down to the very bottom of the file and insert this text


<VirtualHost *:80>
ServerName dangermoose.dev
DocumentRoot "/Users/flashmac/Sites/dangermoose.dev"
</VirtualHost>


Make sure you change the path to your specific settings. So if your User is BobbyT and your website folder is called monkeynuts then you would enter:


<VirtualHost *:80>
ServerName monkeynuts
DocumentRoot "/Users/BobbyT/Sites/monkeynuts"
</VirtualHost>


This creates what is known as a virtual host for whatever you set the ServerName.

It’s time for a story.

Now, you should (and fingers crossed) be able to view your dev sites like a true dev king!

If you want to add more than one site – no problem, just repeat steps 2 and 3 for each site.

Update: Adding Multiple Sites

Since a few of you are asking me about adding multiple sites, I thought I’d add some info on that too.

Basically there are two steps you need to take, plus something you need to do only the first time you add a multiple site. We’ll call that step 3.

1) First lets assume we have another website called anothersite.dev (this would be stored in a folder at ‘/Sites/anothersite.dev’).

You need to add this site to your hosts file just as you did for the first site (see above if you’ve forgot already)

2) You then need to add the new site to the http.conf just like to did for the first site. The image below shows you the new site anothersite.dev (its exactly the same as the first site, only you need to change the site name).

3) Some of you have told me that when you try to view your second site, your browser displays the content of your first site. This was a tough one to find, but I think I’ve cracked it. Using the same image above, the image below highlights one line “NameVirtualHost *:80” which is just above where you have edited the http.conf file. Make sure you have this line and it is uncommented (that is without the ‘#’ at the beginning). This only needs to be done once, then you should be able to add multiple sites.

Don’t forget to restart your apache server (restart MAMP) to ensure any changes to the http.conf file take place!

If this guide has helped you or if you experience any problems, leave a comment and lets see if we can bust a gut resolving it.