node package manager


Yeoman generator for Keboola Connection UI application

Keboola Connection UI App Generator

Based on generator-angular

Scaffolds new angular based application ready for deploy into Keboola Connection.

Install generator-kbc-ui-app:

npm install -g yo generator-kbc-ui-app

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo kbc-ui-app

Please follow these:

  • Github repository name - keboola/kbc-ui-your-app
  • Application module name - kbc.yourApp (You will be asked for this name by generator)

Available generators:

Note: Generators are to be run from the root directory of your app.

Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator also optionally installs AngularJS modules, such as angular-resource.


yo angular

Generates a controller and view, and configures a route in app/scripts/app.js connecting them.


yo angular:route myroute

Produces app/scripts/controllers/myroute.js:

angular.module('myMod').controller('MyrouteCtrl', function ($scope) {
  // ... 

Produces app/views/myroute.html:

<p>This is the myroute view</p>

Generates a controller in app/scripts/controllers.


yo angular:controller user

Produces app/scripts/controllers/user.js:

angular.module('myMod').controller('UserCtrl', function ($scope) {
  // ... 

Generates a directive in app/scripts/directives.


yo angular:directive myDirective

Produces app/scripts/directives/myDirective.js:

angular.module('myMod').directive('myDirective', function () {
  return {
    template: '<div></div>',
    restrict: 'E',
    link: function postLink(scope, element, attrs) {
      element.text('this is the myDirective directive');

Generates a filter in app/scripts/filters.


yo angular:filter myFilter

Produces app/scripts/filters/myFilter.js:

angular.module('myMod').filter('myFilter', function () {
  return function (input) {
    return 'myFilter filter:' + input;

Generates an HTML view file in app/views.


yo angular:view user

Produces app/views/user.html:

<p>This is the user view</p>

Generates an AngularJS service.


yo angular:service myService

Produces app/scripts/services/myService.js:

angular.module('myMod').service('myService', function () {
  // ... 

You can also do yo angular:factory, yo angular:provider, yo angular:value, and yo angular:constant for other types of services.

Generates an AngularJS service decorator.


yo angular:decorator serviceName

Produces app/scripts/decorators/serviceNameDecorator.js:

angular.module('myMod').config(function ($provide) {
    $provide.decorator('serviceName', function ($delegate) {
      // ... 
      return $delegate;

To be able to deploy application to AWS S3 you have to provide AWS access keys.


yo kbc-ui-app:keys

Produces: aws-keys.json which is read by grunt:

   "AWSAccessKeyId": "your_id",
   "AWSSecretKey": "your_secret"

The following packages are always installed by the app generator:

  • angular
  • angular-mocks
  • angular-scenario
  • angular-kb

The following additional modules are available as components on bower, and installable via bower install:

  • angular-cookies
  • angular-loader
  • angular-resource
  • angular-sanitize
  • angular-route

All of these can be updated with bower update as new versions of AngularJS are released.

Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.

To be able to build generated project on Travis please follow these steps:

  • Create new project on Github and push project into that project
  • Run gem install travis
  • travis login - login using github credentials
  • travis enable - set up github travis webhook
  • travis encrypt AWS_ACCESS_KEY_ID=your_key --add
  • travis encrypt AWS_SECRET_ACCESS_KEY=your_secret --add
  • Commit and push changes in .travis.yml file
  • Visit your project should be builded now