Scaffolding kd.js with Yeoman

yeoman and kd.js logos http://creativecommons.org/licenses/by/4.0/

Everything started with my passion to update my homepage which I wasn’t touching for more than 3 years.

When I built the current homepage, to make things easier I’ve built a simple, markdown supported cms, called Nuf (it’s reverse of Fun which means nothing). I’ve written it in PHP and added some cool plugins to it, used bootstrap for the front-end requirements and applied a simple design. You still can get itand use it, but it is not the subject of this post.

This time, I was planning to make something fancy, and to make something fancy you need fancy tools!

At Koding we’re using our own framework to build Koding. It’s called kd.js, it’s an open source non-document focused framework for web applications. You can install it with npm or you can fork it from here. And yes, it’s one of the fancy tools here.

Starting to make something is the hardest part of the overall process. And I lose myself right there most of the time, while “starting”.

This sentence above is the reason why we are building Koding, we are trying hard to fill that gap. But, providing a development environment to kickstart the next big thing is not enough, we also need tools on top of these environments, like Yeoman. It helps you start your new project by providing a bootstrap data based on the generators written for it. There are currently ~3.4k generators.

Long story short, I’ve created a yeoman generator for kd.js and it’s fancy.
scaffolding a new kd.js project with yeoman and generator-kd.js

It’s that easy to start developing your next kd.js project!


Getting Started

$ ~ npm install -g yo gulp generator-kd.js # use sudo if needed
$ ~ mkdir koding
$ ~ cd koding
$ ~/koding/ yo kd.js koding
our new app is in action!

This will generate all the required files for the project, and will trigger npm install to install the required packages which are defined by the generator template*. When everything is completed you can start your app by calling gulp. Which will build the code (discovers dependencies with browserify, compiles coffee to js, stylus to css etc.) and open the browser (if you are not on a desktop machine, you may need to open localhost:9000)

Voila! You have a running kd.js project and it will be updated once you update the code and your changes will take effect immediately.

a project development in action with generator-kd.js

What is included in a project?

I’ve added support for CoffeeScript, Stylus and more fancy tools like gulp, browserify and browsersync. There is also minifying/uglifying support for production deploys.

We are developing kd.js with CoffeeScript so I thought using same language would make development projects with kd.js easier. Same goes for Stylus support which is the default css preprocessor that we currently use. kd.js is using gulp as default build system, so that was the reason behind that choice. This is the first time that I’m using Browsersync and I think it’s the best one for synchronised browser testing.

Using 3rd party npm packages

Since browserify support is included, all the requirements will be resolved before bundling, which allows you to easily include any npm package. Just install a package in your root folder, as you do with npm;

$ npm install some_cool_package --save

Then in your code just require it, browserify will do the rest;

cool = require 'some_cool_package'

Examples

I’ve created a blank example with kd.js generator for reference, and also created an example project; kodemirror.

kodemirror in action

You can try it from http://gokmen.koding.io/kodemirror/ It uses Codemirror like in CoffeePad (one of the other hobby project s— you can use coffeepad.rocks for your coffeescript experiments, it’s also built with kd.js) it’s executing the javascript code that you entered when Cmd+Enter is pressed.

Start developing now with Koding!

To get started to play with kd.js if you didn’t already, open koding.com and create a new account, which will provide you “the” development environment you need!

For more information please visit generator-kd.js Github page.

Enjoy!