Ask DN: Alternatives to CodeKit environment

over 6 years ago from , Evil Mastermind

For the past few years I've used CodeKit as my frontend environment. It takes care of compiling my HAML and SASS into HTML and CSS, and it also sets up a local server so that I can go to 'example.local:5757' on my phone and see the site I'm working on, even if it's a static HTML demo not running a local server.

What do you guys use for designing in code? I want to review my tool belt.


  • Hamish TaplinHamish Taplin, over 6 years ago

    Gulp or Grunt are much more powerful and flexible for running these tasks. However, the learning curve is steep if you aren't familiar with the Node/NPM stack.

    5 points
  • Ian WilliamsIan Williams, over 6 years ago

    Hey Ix,

    As everyone here is suggesting, a build to like Gulp or Grunt will do. Though the learning curve is steep if you're new to the command line and node, it has one major benefit:

    There are no external dependencies for development in your repo.

    When working with other people on a project, or even working on a project you did a year ago, removing dependencies in your dev environment is a life saver. Next time you want to have someone pull a repo you've been working on, just tell them to do this:

    $ git pull [repo name] && cd [repo name] $ npm install

    No need to have someone set up CodeKit. They both virtually do the same thing, but build systems that run on node (if you are already working with npm for dependencies) are a major plus.

    4 points
  • Guy MeyerGuy Meyer, over 6 years ago

    I'm a bit biased here, but why isn't CodeKit working for you specifically? We're always open to ideas to make CodeKit work for how people WANT to work.

    3 points
    • Ix Techau, over 6 years ago

      It's not that it isn't working, it's just that every time I re-install my computer (after every OS X release basically) I do a software audit before I install anything to make sure I'm not missing out on anything newer and better. Perhaps CodeKit is the ideal software for me, I just want to check out the alternatives before I install it again.

      2 points
  • Taurean BryantTaurean Bryant, over 6 years ago

    If working in terminal is a roadblock for you for any reason, I would seriously consider checking out Hammer. The project had been dead for a while but a different company has since picked it up and started to maintain it/build new features.

    Worth looking into.

    1 point
  • Ix Techau, over 6 years ago (edited over 6 years ago )

    Lots of suggestions for Gulp/Grunt, but there's a problem with those techs - they don't seamlessly work across different languages. I design in static HTML/CSS/JS, but I code in Rails. CodeKit works seamlessly for both scenarios, whereas (as I understand it) Gulp/Grunt is either incompatible or useless for Rails (which has its own compiler and all that jazz), no?

    0 points
  • Xavi EsteveXavi Esteve, over 6 years ago

    I use:

    • Gulp & Vagrant/VirtualBox: for medium/big projects

    • Koala app + MAMP: open-source, free CodeKit alternative; great for small/personal/quick projects

    0 points
  • Jan Haaland, over 6 years ago

    I just started working with Yeoman. It's a great introduction to gulp/grunt and the command line. You really don't need to know how it works to get started, just learn it as you go.

    0 points
  • Christoph Hochstrasser, over 6 years ago (edited over 6 years ago )

    WebPack looks like an interesting alternative. Module support is one of the features that I miss the most in CodeKit. Also, setting up WebPack looks a lot simpler than Grunt.

    0 points
  • Anthony MoralesAnthony Morales, over 6 years ago (edited over 6 years ago )

    I like CodeKit but needed things like includes/partial templates. I know I can do that with CodeKit's language but it doesn't work if I'm the only person using CodeKit. So, I use Middleman for designing in code. It sets up a local server like CodeKit. Ruby-based, but it's pretty easy to setup.

    0 points
  • Mike BusbyMike Busby, over 6 years ago

    Drop codekit as soon as you can...

    Use gulp or grunt, gulp is much easier and seems to be winning out, I do SCSS compilation, localserver, HTML file includes, js minification all in 100 lines of JavaScript thanks to gulp.

    I've shared my build process on GitHub. https://github.com/MikeBusby/cobalt

    It's very basic, no read me yet even but I use it as a starting point for builds

    0 points
  • Constantine KiriazeConstantine Kiriaze, over 6 years ago

    I've used Codekit from the get-go and its been awesome - super quick and painless setup, fast, and as long as the people you're developing the project with also have Codekit then everything's peachy*. There in lies the problem, and as others have mentioned - the dependency issue arrises - others must also have Codekit and be working on a mac ( similar apps of that type that are cross platform are PrePros and Koala - and then there was Mixture but that even closed up shop in favor of Gulp/Grunt ), although there are some workarounds which would probably clutter up your repo.

    Thus working with cross platform tools such as node allows a cleaner and more open ended collaborative experience, and it's really not that hard to get started - personally I'd recommend Gulp over Grunt but its up to you. And honestly, you could do pretty much everything Gulp does with just node.js. I still use Codekit now and then for quick prototypes as I really do enjoy the simplicity and ease of the app, it just works. But opting to move towards the node/npm/gulp/etc workflows will open up a lot more possibilities for you and you'll learn a lot more, and as far as local servers and synchronized browser testing - BrowserSync and local apache setup for mac FTW - and definitely Vagrant/VirtualBox if you want everyone and every instance of your app on the same system. Also check out Bitnami!

    tl;dr Node, NPM, Express/BrowserSync, Gulp, Bower, Vagrant/OSX.

    0 points
  • Chris PorterChris Porter, over 6 years ago

    Same as the others, I use Codepen to build prototypes, components and templates. Then I flesh it all out and create the whole system locally thru Grunt.

    0 points
  • Sean O'GradySean O'Grady, over 6 years ago

    As others have said above. Gulp is what I've been using for the last 18-24 months and while its not quick to setup, once you do set it up, it will save you countless hours.

    0 points
  • Pete MillerPete Miller, over 6 years ago

    Codepen.io for static demos - can't beat it for small components or pages at a time

    0 points
  • Zack Davis, over 6 years ago

    I used CodeKit until 2 came out and I started having issues with frameworks and Sass versions as code kit was behind some of the frameworks I was using and it would cause issues compiling.

    I switched to Gulp and never looked back. For simple server you can use browser sync and run a watch task for Sass, HAML, Image minification, and javascript. There are a ton of plugins and while it has a bit of learning curve there are enough recipes out there to get your started pretty easily. (check out yeoman for easy setups) I also found it a much easier syntax to understand than grunt.

    If you are running a linux (or MS) server in the background look into vagrant and using browser sync on a proxy.

    0 points
  • Win LinWin Lin, over 6 years ago (edited over 6 years ago )

    Hey there, here are my suggestions:

    1. Gulp/Grunt - not 'that' hard if you take it easy and use available guides. Check this out

    2. Hasn't been updated in a while, but I've used headstart.io which is a good transition/ease into using straight gulp/grunt

    3. Cactus - from the creators of Framer.js and recently made free to use, has a GUI and is similar to CodeKit

    Overall I would say to try and learn Gulp, it'll make you more free from 3rd party tools and is also very versatile so you that can use a ton of other NPM modules.

    0 points
  • Srdjan MarkovicSrdjan Markovic, over 6 years ago

    MAMP as a server and PHP Storm for all compiling and helper stuff. You can use python to setup simple server on osx too. Adobe Edge Inspect is a great add-on because it allows you to test and debug code on multiple devices.

    0 points