Creating an ember cli component addon for javascript library

23:36 Anil Maurya 1 Comments

Create addon with generator command

ember addon <addon-name>


ember addon ember-cli-holderjs

Add bower dependency

 create blueprint to install dependency
 ember g blueprint <addon-name>


ember g blueprint ember-cli-holderjs

Two files will be created

installing blueprint
  create blueprints/.jshintrc
  create blueprints/ember-cli-holderjs/index.js

Edit blueprints/<addon-name>/index.js

Add afterInstall hook to add javascript library package to bower.json

afterInstall: function(options) {
    return this.addBowerPackageToProject('holderjs', '2.9.0');

Generate component

ember g component <addon-name>


ember g component ember-cli-holderjs

This will create following files

installing component
  create addon/components/ember-cli-holderjs.js
  create addon/templates/components/ember-cli-holderjs.hbs
installing component-test
  create tests/integration/components/ember-cli-holderjs-test.js
installing component-addon
  create app/components/ember-cli-holderjs.js

Edit addon/components/<addon-name> according to your need.


import Ember from 'ember';
import layout from '../templates/components/ember-cli-holderjs';

export default Ember.Component.extend({
 layout: layout,
 didInsertElement: function() { {;

Edit  addon/templates/components/<addon-name>


<img data-src={{src_url}} alt='holderjs image' class={{class}} />

update package.json dependencies

"dependencies": {
    "ember-cli-babel": "^5.1.3",
   // Add ember-cli-htmlbars for compiling templates
    "ember-cli-htmlbars": "0.7.9"

Add dummy app

update index.js

/* jshint node: true */

'use strict';

module.exports = {
  name: 'ember-cli-holderjs',

  included: function(app){
    // Include library js file + '/holderjs/holder.min.js');

update bower.json, add devDependencies

"devDependencies": {
    "holderjs": "2.9.0" // Javascript library 

update tests/dummy/app/templates/application.hbs


{{ember-cli-holderjs src_url="holder.js/132x128?text=Upload Photo"}}

Check if addon is working properly

Run server:

ember server

Browse : localhost://4200

1 comment :