compy - simple way of building webapps

Published:

Compy is a simple, ‘zero’ configuration web app builder/compiller integrated with client package manager component.
Although there is almost no configuration it gives you all flexibility to code the way you like.

Start

Install compy with npm :

1
$ npm install compy -g

To start an app all you need is to tell compy where is the beginning. To do that you need package.json file with compy.main property pointing to main js file of your app.

1
2
3
4
5
6
{
"name" : "app",
"compy" : {
"main" : "appstart.js"
}

}

appstart.js file will be executed right after the page load.

To compile app, just run $compy compile

Compy will generate ./dist folder with app.js, app.css and index.html. All css in your directory will be concatenated/minified into app.css file.

Compy have static server so you can check the result with

1
$ compy server [watch]

adding watch option will recompile the app and livereload the changes in a browser.

Components

Most powerful part of compy local require and integration with component.

To install jquery:

1
$ compy install jquerycomp/jquery

to use jquery in code:

1
2
var $ = require('jquery');
$(document.body).html("Hallo world");

Local require will work the same as in node.js

1
2
3
4
//filename: add.js
module.exports = function(a, b){
return a + b;
}

1
2
3
//filename: appstart.js
var add = require('./add');
add(2,2); //4

Plugins

compy support component‘s plugins.

Given that you can use those to work with language/template you want.
For example to use coffeescript you will need to install plugin in your root folder.

1
$ npm install component-coffee

Now after recompilation all your coffee files will be used as javascript. That also means you can use both js and coffee files in same repo.

1
2
3
#filename: add.coffee
module.exports = (a, b) =>
a + b
1
2
3
//filename: appstart.js
var add = require('./add');
add(2,2); //4

And there is more

Compy is built ontop of grunt. Basically it is just grunt setup. So no magic here. Though lots of stuff available:

  • components support
  • local require
  • supporting coffeescript, sass, jade and other plugins
  • static server + livereload
  • karma runner
  • grunt extendable

May the force be with you!