Codekit 2.0, WordPress, and MAMP

29 Comments

  1. peer

    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?

    1. @peer – I believe you\’d need to put http://localhost/projectname/ as the external server address and leave the preview subpath alone.

  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

    1. Thanks, Benedikt. Your simple fix works for me and a MAMP/Joomla install.

  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. @Björn – I haven\’t had this issue, but maybe it\’s a good time to give grunt.js a go?

      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. Tom

    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!

    Basically…
    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. Hi Tom, the external browser address needs to be specific to the site rather than the global MAMP address. Try entering http://localhost/clientwebsite instead.

  6. Stefan

    This definitely doesn\’t work for me. I\’m using MAMP Pro, turned on \”External server required\” and put in the correct address (http://myproject.dev/) but the refresh just doesn\’t happen on that domain.
    I\’ve tried clicking \”Preview\” first but that only opens the CodeKit server page (http://macbookpro-123456.local:5757/) instead of my MAMP page.

    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.

  7. Andrew Misplon

    Thanks Bryan. I didn\’t really read the docs coming from 1.0 and totally missed this shift.

    1. That was my problem at first too Andrew – failed to read the docs 🙂

  8. Huw Rowlands

    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: http://192.168.0.3:5757/.

    I have entered the correct External Server Address.

    Any help would be appreciated.

    1. Hi Huw, I haven\’t come across that, but I wonder if it\’s an issue with your MAMP setup. What do your local URL\’s look like?

      You might want to give a shout to the developer Bryan Jones: https://twitter.com/bdkjones – He\’s been pretty quick to answer questions in the past.

      1. Huw Rowlands

        Yeah, possibly the MAMP setup. I’m getting permission issues too.

        I’ll give him a nudge.

        Thanks

  9. Simon

    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 http://local.mysite.com 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. Huw Rowlands

      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?

      Thanks

      1. If MAMP Pro is rendering fine outside of Codekit\’s internal server, then it\’s probably not a MAMP issue…

        Side note, I\’ve personally moved away from Codekit and am running Gulp tasks instead. Here\’s how I\’m currently doing it: https://spigotdesign.com/wordpress-development-gulp/

  10. Shana

    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.

    1. Thanks for the insight Shana, it\’ll certainly help others with similar issues.

  11. Dorian

    Any idea why my wordpress theme css files and js files aren\’t being loaded when browsing at http://localmac.local:5757/ ? All works fine when loading the site at http://localhost:8888/site in MAMP.

    Thanks in advance.

    Dorian

    1. It\’s tough to say without seeing your setup. What is the URL for the files are being rendered at when you view source?

      1. Dorian

        Hello, the browser is looking for the css files at http://localmac.local:5757/site/… Looking at the console in chrome it\’s not finding resolving any of the paths to css or js files .

      2. Dorian, I\’m not sure what the issue could be. My guess is it\’s your MAMP setup… are you using the pro version or free? It\’s been quite a while since I\’ve used the free version, well before Codekit 2 came out.

        I\’ve moved on from Codekit, BTW. Here\’s my current setup: https://spigotdesign.com/wordpress-development-gulp/

  12. Michel

    Here is very nice script i build that will handle that and much much it offers two solutions a terminal script app and a web app. Both will get latest wordpress and installed it and configure mamp to map and create your lcoal host here is the link https://github.com/michelve/wordpress-mamp-localhost-generator

    1. That is a nice script Michel, thanks for the link.

      1. I have updated it into a standalone app check it out https://pilotkit.co

Leave a Reply

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