Codekit 2.0, WordPress, and MAMP

I upgraded to Codekit 2.0 a few days ago and so far it’s great. I thought the browser refresh feature was broken but it turns out I was just doing it wrong. If you’ve used Codekit 1.x you’ll know that it refreshed what ever browser you had open and in front at the time. The new version doesn’t work that way which is, in my opinion, both good and bad.

The good news is that Codekit runs as it’s own server now, so you can auto refresh any browser, including external devices like phones and tablets. Click on the SERVER tab and you’ll see two addresses, one running on Bonjour, one not. Either one works to load site.

The downside (and again, this downside is my early opinion) is that you’ll need to run sites using the address specified. I’ve been used to using MAMP Pro addresses for development sites and set a unique URL for each site, so my workflow will need to change there. I can see this being an issue using a tool like 1Password, as every site will have the same URL and the credential list can/will get long to browse through.

Codekit will refresh static sites natively, but if you develop on a CMS like WordPress, you’ll need to set up an ‘external server.’ I’m going to guess this means using MAMP or similar. In the project settings turn on the External Server Required on, and enter the server address from MAMP:

Codekit External Server Settings Panel

That should get you up and running. Perhaps in a few weeks I’ll post a more robust review after I’ve put the new Codekit through it’s paces.

29 thoughts on “Codekit 2.0, WordPress, and MAMP

  1. Unfortunately your solution didn\’t work for me.

    When I use CodeKit 2.0 server it works fine, but I like to keep using MAMP. So, if I use http://localhost/projectname/ the auto refresh doesn\’t work.

    I turned on the external server, added \”http://localhost/\” as external server address and \”projectname/\” as preview subpath.

    Do u have any ideas?

  2. This article will be an interesting read when you update it on your findings.

    I currently use dropbox have you found a fix around this? Bryan has noted that Codekit v2 does not work due to a bug with OSX..

  3. Facing the same problem, I carefully read the official docs

    IMPORTANT: you still go to the address for CodeKit\’s internal server (the one that opens when you click the \”Preview\” button). That\’s the only address that CodeKit will reload. If you open the External Server address directly, that page will not auto-refresh.

    So you need to work with an address provided by codekit (e.g. http://pro.local:5757/), but works fine for me, refreshing works also magically PHP generated paths for assets (via WordPress Core Functions) get somehow updated with the codekit address, so images work for me, too when working woth the codekit url

  4. I had the same auto-refresh problem using WordPress + CodeKit.
    I mailed the developer of CodeKit (Bryan Jones ).
    He told me that this is due to elements at the end of the which is against the specs.
    I wrote a small WordPress plugin that deletes those elements et voilà it worked.

    So I asked Bryan if he could fix the problem by allowing elements also to be in the .
    He refused since this is against the specs – ignoring that this is common practise. In WordPress this behaviour can be even triggered using wp_enqueue_script + $in_footer = true.

    It\’s frustrating, guys. You can only change all plugins that don\’t meet the, catch all the output and rewrite (performance penalty!) or use an alternative to CodeKit.

      1. I verified my observation with some lines of code that use output buffering to remove the link tags. As soon as they are removed the auto-refresh works flawlessly.
        But thanks for the advice. Thought of moving to grunt, too.

  5. Hi guys – I really need some help with this! I\’m currently developing a WordPress site for a client but installing codekit has broken my entire mamp/wordpress development environment!

    In order to install codekit I had to allow it to edit my php.ini file to turn off the OpCache function. Having done this, I entered my external browser address (http://localhost/) where I store my WordPress websites, and then I pressed I preview the site in codekit which opened up my localhost folder in the browser… I then clicked on the folder I am currently working in (http://localhost/clientswebsite), yet to my horror none of the php is working (i.e. all I can see is html and i can\’t get into my WordPress dashboard)!

    Do you guys have any insight into what I can try to rectify this problem?

    I\’m on OSX 10.9.3 running MAMP basics (apache port 80 with a document root of documents > web-design > sites.

    1. This is how Codekit works now. You need to use the server page or IP that Codekit provides. I, like you, prefer the previous refresh action, but it\’s now more compact and I no longer run into the issue of unwanted browser page refreshes.

  6. Hi

    I have recently installed MAMP Pro coming from MAMP. And I have setup my localhost WordPress installs but cannot get the refresh to work correctly.

    When trying the Codekit Preview URL: http://huwrowlndssimac.local:5757/ I get “this webpage is not available”, but using the non-bonjour URL it works:

    I have entered the correct External Server Address.

    Any help would be appreciated.

  7. If you want to use CodeKit with a wordpress site running off Mamp set up the external server address to point to your mamp url for the site (for me this is etc…) then just use the Non-Bonjour address to view it – works a treat for me 🙂 I am using a complex structure/htacess set up as well.

    1. Yeah, that’s what I’m currently doing but before I uninstalled MAMP and installed MAMP PRO, the ‘normal’ address option worked.
      So not sure if it’s something in MAMP PRO?


  8. Hi All – I just solved a problem I was having with getting CodeKit to show the proper page upon enabling the external server. My problem was that if I was just using flat files, CodeKit\’s browser refresh worked great and I saw my pages render in my browser at xyxyx.localhost:5757. But then as soon as I turned on the external server option, instead of seeing my pages, I would just see a blank page that said \”Index of /\”.

    I use MAMP, and I eventually figured out that I was seeing the empty directory of the document root. I finally rewatched the video explaining how to set up the browser refresh and I noticed that I was supposed to change the document root to be the folder where my project is. He spent less than a second on it, and I missed it the first time.

    Anyway, I changed my document root and it all worked. Maybe I am the only one having this problem, but in case anyone else is as well, there you go.

Leave a Reply

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

Ready for a refreshing experience on your next website design?