Blog

22 Nov
2014

MAMP Icon Logo

Setup a localhost subdomain using MAMP


By default when installing MAMP for Mac OS X it will redirect you to the host url http://localhost:8888, but what if you want to use a subdomain like http://yourwebsite.dev for testing rather than http://localhost:8888/yourwebsite. Here is how I managed it using both Mac OS 10.10 (Yosemite) and MAMP version 3.0.7.

HINT: Try not to use the extension name of .local in the domain name. It conflicts with Mac OS's Bonjur and causes a slow website.

The following steps are based on you already having MAMP installed.

 Step 1:

Hide the :8888 from the localhost:8888 url

Let's start by hiding the default url containing 8888 which is fairly straightforward by using the MAMP app. On the apps landing screen choose the 'Preferences...'.

Subdomain using MAMP 01

Choose the 'Ports' tab then click the 'Set Web & MySQL ports to 80 & 3306' button. By default it should change the Apache Port to 80, Nginx Port to 80 and the MySQL Port to 3306. But this caused conflict on my machine so I simply renamed the Nginx Port back to 8888 as below. Then press the OK button.

Subdomain using MAMP 02

It will now take you back to the MAMP apps landing screen and automatically reboot the MAMP Apache Server and MySQL Server - you maybe asked for your username and password. To quickly test that its worked choose the 'Open WebStart page' and this should open up your browsers window with the new url starting with http://localhost/MAMP/ instead of http://localhost:8888/MAMP/.

 Step 2:

Edit the httpd.conf file

Goto the finder menu and choose the dropdown Go->Go to Folder... and input the following.

/Applications/MAMP/conf/apache/

Subdomain using MAMP 03

From the resulting window open the file named 'httpd.conf' and find where it says 'Listen 80' and add the following afterwards, remembering to change the folder and url to your own settings. So for this example I want the subdomain http://yourwebsite.dev.

Listen 80

# Added for multiple subdomains
# Thanks to Ben for the update

NameVirtualHost *:80

<VirtualHost *:80>
    ServerName yourwebsite.dev
    DocumentRoot /Applications/MAMP/htdocs/yourwebsite
    <Directory /Applications/MAMP/htdocs/yourwebsite/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>
</VirtualHost>

 Step 3:

Edit the hosts file

Goto the finder menu again and choose the dropdown Go->Go to Folder... and input the following.

/private/etc/hosts/

Subdomain using MAMP 04

From the resulting window you will need to edit the file named 'hosts', but due to file permissions it's easier to copy it to your desktop and edit it from there via any text editor. So for my example I added the following line of code at the end of the file...

127.0.0.1 yourwebsite.dev

Then place it back in the original folder replacing the older file. You will need to enter your username and password to do this. Now you can restart both 'Apache Server' and 'MySQL Server' by pressing the 'Stop Servers' and then 'Start Servers' button in MAMP but I prefer to reboot my computer to be safe. Now when you start the browser and input for example http://yourwebsite.dev it should work fine without any issues, plus based on the same procedures as above you can add other subdomains for testing.

Hope this helps anybody else.

NOTE CodeIgniter 2.2.0 issue: One thing I noticed when testing some CodeIgniter apps was an error messages started appearing which was caused by the php version 5.6.0. So this is fixed by changing the following lines in the 'core/Common.php' file.

return $_config[0] =& $config;

to

$_config[0] =& $config;
return $_config[0];
Posted in: < Website Server >
me@grafxflow avatar

me@grafxflow


I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Visitors also viewed these posts

14 Thoughts

  1. 18 Dec
    2014

    avatar

    Peter

    THX a lot, that's perfect!
  2. 23 Feb
    2015

    avatar

    Eh?

    Why are you advising people to edit core CodeIgniter files? That some seriously bad practice. And MAMP, in 2014/2015, really?
  3. 23 Feb
    2015

    avatar

    me@grafxflow

    Yes correct not the best practise, but as was pointed out - it's a well known issue with older versions of CodeIgniter conflicting with newer versions of php. If you have another workaround to solve the problem please post it.
  4. 17 Mar
    2015

    avatar

    Paul Delaney

    I love the video you post on YouTube, install of MAMP. Everything worked well until I get to the point to start the server MAMP, I get the message port 8888 already in use.

    will be above procedure take care of the problem and then allow me to proceed to the next step? If I sound a little confused, I am.

    Thanks, look forward to hearing from you
  5. 17 Mar
    2015

    avatar

    me@grafxflow

    Hi Paul,

    Not sure which YouTube video your talking off? but anyway try the above regarding the port and see what happens.
  6. 17 Mar
    2015

    avatar

    Paul Delaney

    https://www.youtube.com/watch?v=n0mfBDc0j68

    sorry, above link
  7. 23 Mar
    2015

    avatar

    me@grafxflow

    Hi Paul,

    Have you tried my example above?
  8. 16 Aug
    2015

    avatar

    Ben

    Important note about serving multiple subdomains -
    You need to add "NameVirtualHost *:80" to the httpd.conf file in order to differentiate between different subdomains via ServerName value.
  9. 16 Aug
    2015

    avatar

    me@grafxflow

    Thanks Ben for the info I have updated the post.
  10. 13 Jan
    2016

    avatar

    nicolas

    Thanks
  11. 24 Jan
    2016

    avatar

    Sam

    I can't update Apache's port to 80, every time i set that it reverse it back to 8888 for me automatically after restart the server. I can only set Nginx server's port to 80. So this is a no-go for me.
  12. 26 Jan
    2016

    avatar

    me@grafxflow

    Is the httpd.conf file getting changed?
  13. 09 Jun
    2016

    avatar

    Freddy Cano

    If you are having problems, errors; make sure to put the document path inside " " quote marks.

    Example is in:
    /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
  14. 14 Sep
    2016

    avatar

    Dave

    do I need to edit the httpd-vhosts.conf file at all or just add the subdomains to httpd.conf?

Add comment

Add comment