Blog - Web Design, Illustration, Photography and more Letraset Neon Markers Review i'm now on dribbble!

Latest Posts

Diet Coda, MAMP with Vhosts and WordPress

Posted by Jordan on 15th October 2012

I recently made the switch over to Coda 2 so that I could use my iPad with Diet Coda’s AirPreview feature. My existing setup is MAMP (Standard not Pro) with Vhosts to set up various local sites including WordPress sites.

I started Coda 2, set my site up, set up Diet Coda on the iPad, clicked the AirPreview button on Coda 2 and… nothing. I got a blank page, no URL bar, just the machine name and the eject button, no URL bar. A bit puzzled I changed the ‘Local URL’ in Coda 2 site options, this time to include http:// – still nothing on the page but now the URL bar appeared and had “//index.php” in it.

After a lot of searching, I couldn’t find an answer online that didn’t mean switching to Serverpress’s sneakily priced Desktop Server Premium or just using Adobe Edge Inspect as an alternative to Diet Coda’s AirPreview.

I tried Adobe Edge Inspect and had similar issues (Note:the fix below also fixed the problem I had with Adobe Edge Inspect) and I didn’t really want to switch to Desktop Server Premium (Serverpress show it as $49.95 and claim MAMP Pro is $59.95 but fail to tell you that MAMP Pro is a one-off fee and their product is a annual payment of $49.95)!

Eventually I was able to mash together snippets of information from various places and using the 37signals’ free to use DNS service xip.io to come up with the following solution:

Please Note: The following instructions assume some knowledge of working with MAMP, WordPress and Coda. I’ll be happy to answer to any comments left below the post.

PLEASE NOTE: Your machine must have static IP otherwise you will need to update your HTTPD.conf and wordpress everytime the DHCP lease is renewed.

Step 1 – Hosts file

In terminal type sudo pico /private/etc/hosts (you may need to type in your machine password if you have one). You may also want to create a backup of your hosts file in case you need to revert back.

Add in the name you want for your for your virtual host (throughout this example, I will use ‘portfolio’) on the same lines as localhost (put a tab space in between them). You can add multiple site names, just include a tab space between them.

Step 2 – MAMP vHost setup

Set up your Vhosts in Mamp (standard not pro) by locating your Httpd.conf file and uncommenting the include for the vHosts file by removing the hash (#) in front of the include line as shown below:
# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Next, in your vHosts file, add your sites in the following format (you’ll need to add the root folder for your site and also add in your local machines’ IP address into the Server Alias):


Note: to find your machines local IP address on Mac, go to system preferences > Web Sharing and turn on remote management – it will display your local IP address (don’t forget to turn it back off)!

Step 3 – Coda 2

In Coda 2, set up your site using your local root and set the local address the same as the Server Alias (the xip.io address e.g. http://portfolio.Your-Machines-IP-Here.xip.io).

Step 4 – WordPress

If you tried your site in AirPreview, it may work, however, nothing will be styled (it will just be plain HTML, no css/no js). This is because your iPad cannot ‘find’ the CSS or JS files.

To get your site to display, in the top of your themes’ functions.php file include the following:

define(‘WP_HOME’, ‘http://portfolio.Your-Machines-IP-Here.xip.io’);
define(‘WP_SITEURL’, ‘http://portfolio.Your-Machines-IP-Here.xip.io’);
define(‘THEME_ROOT’, ‘http://portfolio.Your-Machines-IP-Here.xip.io’ . ‘/wp-content/themes/YOURTHEMENAMEHERE/’);

You should use THEME_ROOT when enqueueing stylesheet/js files. These values can be amended when you put the site live. Your local WordPress site using vHosts should now be working using Coda 2/Diet Coda’s AirPreview feature.

There may be a better way to handle the WordPress side of things and I am definitely interested in hearing anyone elses take on how they would implement a .xip.io address across their WP site so feel free to drop a comment below.

Facebook Twitter Plusone Pinterest Linkedin Digg Delicious Reddit Tubmlr

6 responses to “Diet Coda, MAMP with Vhosts and WordPress”

  1. Pieter says:

    Thanks for this, really detailed and works like a charm. I used no-ip to deal with a dynamic IP, and it works fine. AirPreview’s awesome, when it works and you don’t have to pay for something like DesktopServer (extortion!).

    • Jordan says:

      thanks for the kind comment. Did you find a more ‘graceful’ way of handling it from the WordPress Theme end?

    • Steve says:

      I’ve just updated DS to support the latest update to Coda that breaks AirPreview with WordPress. It should post tonight. I’ve also optimized the hell out of it’s WordPress centric features that you don’t get with MAMP. The software doesn’t contain any “timers” that inhibit it after the 1 year so you don’t ever have to pay a dime more if you don’t want too. But I get understand your sentiment… of, extortion? Who doesn’t want a support slave for life? :-/

      • Jordan says:

        Ouch… looks like either my post or Pieter’s comment has touched a nerve. I am intrigued with the comment about timers though, which software product has timers in that inhibit it after 1 year and how is it inhibited?

        Let’s look at the situation: You have clearly seen a ‘need’ in the market, rightly so, many of struggling developers/designers trying to run multiple WordPress installs locally and use things like coda 2 and Airpreview (with ease as opposed to struggling with Mamp). You could have looked at the situation and thought, you know what, there’s a decent sized market for an alternative to Mamp/Wamp, I am going to make my product 20 times better and people will be begging to buy my software. Then, you decided to price it at $50 per year and are shocked that some people aren’t willing to pay for it when with a little bit of effort, Mamp can be used the same way?

        I think what has happened is you have realised that this is a unique feature you possess (as standard at least) and have decided to monetize on it before Coda find a way to get it working.

        Fifty bucks for Serverpress I could handle as a one-off fee or even per major update (i.e ServerPress 2, 3 etc), but per year?! Nope.

        Now, I actually almost bought ServerPress until I went through to the order page on your site (the homepage comparison led me to believe it was fifty bucks, not fifty bucks per year). “One-time fee” is shown clearly in bold and whilst you will no doubt argue that so is “for one year”, it is sneakily broken across two lines of text which is less likely to be read at a glance. Also, your pricing for Mamp Pro is also misleading as you are comparing your ‘annual fee’ software with their ‘for each version’ priced software. Also, your software has been $49.95 for a limited time only for at least 6 months!

        These are what some deem anti-usability design patterns… that is using clever designs to disguise the genuine facts about your services/pricing and that of your competitors too (or tricking people into buying something they think they will pay for once, but in fact will have to do so each year).

        Anyone reading can take a look over at http://www.darkpatterns.org for similar examples.

        What most software suppliers fail to see is that there are two very distinct markets for their products: the giant agencies and companies who can swallow up fifty bucks a year and not even realise and also the freelancers, who notice things a little bit more.

        Adobe have noticed this and delivered Creative Cloud which most people seem to say is expensive but it works out cheaper than buying a new version of Creative Suite every time it is released (which usually is a must when trying to work with multiple agencies as they may supply files with features/effects unique to the latest CS version).

        Now in the interests of being transparent, i’m going to share some of my costs with you (this isn’t a complete list – just a few bits of the top of my head):

        Monthly:
        – Adobe Creative Cloud £46 (once the £27 a month introductory price finishes)
        – Crazy Egg (£9 a month when bank charges were included for currency conversion – though I have just cancelled this service when they tried to take $1180 due to a daylight saving error?!)
        – Insurances £60 (Liability, indemnity and equipment cover, business use of car etc)
        – Hosting and domains £35 (averaged)
        – Phone & Internet £53

        Annual:
        – Business cards £40
        – Equipment £2000 (upgrading, repairs of devices, additional storage etc)
        – Stock/Royalty Free Images £60
        – Software £200 (averaged as many applications will only need to be replaced or upgraded every few years)
        – Stationery £150

        So £4,886 (approx $7,393) per year and that isn’t all of everything I have to pay for as a freelancer, there’s also my own heating/lighting/electricity which in the UK is getting pretty expensive.

        You can see how quickly it adds up so if I can get the same features to work with Mamp (standard edition, not pro) for FREE, I am going to do it.

        You mention all the optimising you do and updates, well… that’s part of the service you have to offer. I bought Coda and guess what, they update for free, without charging me each year.

        Now bearing in mind, Coda 1 lasted 5 years so even if Coda 2 lasts for 2 years without a major version update, that would mean it is cheaper than buying ServerPress for 2 years and Panic have a big team to support!

        Unless you are willing to publish your earnings from ServerPress and prove otherwise, you have no right to call yourself a “support slave” as I imagine what you are earning is not exactly slave wages.

        Also, “support slave for life”… as long as you keep renewing and paying fifty bucks a year.

  2. Thanks for this, it works for me to a point but I can’t get the WordPress part working: I get content but no CSS styling. I’ve put the required Defines into a new functions.php file in the blog theme directory. Perhaps it’s because I’m running multisite?

    And, does anyone have any idea of what one has to add to aDrupal site to make it work?

    • Jordan says:

      Hi Stuart,

      it’s possible that multisite is affecting it. Also, to clarify, when using the xip.io service, the local IP I am referring to is the specific machine IP address allocated by your router (not your overall connection IP).

      To be honest, I no longer use the air preview feature and have since just started to use safari on iOS and then viewing my mamp installation using the .xip.io wildcard dns service.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyrighted © 2011 | | All Rights Reserved | privacy policy

Valid CSS Valid XHTML