# Repo as a blueprint (boilerplate) for authoring components to distribute

**URL:** <https://discuss.emberjs.com/t/repo-as-a-blueprint-boilerplate-for-authoring-components-to-distribute/5370>\
**Category:** Uncategorized\
**Created:** [May 22, 2014, 3:32pm UTC](https://discuss.emberjs.com/t/repo-as-a-blueprint-boilerplate-for-authoring-components-to-distribute/5370 "2014-05-22T15:32:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pixelhandler](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pixelhandler/32/18649_2.png) [@pixelhandler](https://discuss.emberjs.com/u/pixelhandler)\
**Post date:** [May 22, 2014, 3:32pm UTC](https://discuss.emberjs.com/t/repo-as-a-blueprint-boilerplate-for-authoring-components-to-distribute/5370/1 "2014-05-22T15:32:14Z")

</div>

Anyone interested in building components for sharing? It would be awesome to have a common set of tools and common way to distribute Ember Components. I think we would all benefit from shared resources for building applications.

**Emberella Component Blueprint:** A recipe for creating structured, tested, reusable,Ember components [https://github.com/realityendshere/emberella-component-blueprint](https://github.com/realityendshere/emberella-component-blueprint) (by Dana Franklin)

- Simple Install
- Start development/testing cycle easily
- Build package for (amd, cjs, global) distribution easily

Component _example_ [https://github.com/realityendshere/emberella-cube-component](https://github.com/realityendshere/emberella-cube-component) …built with emberella-component-blueprint (test/build friendly tools) Also, using these tools a microlib (service + components): [https://github.com/pixelhandler/ember-bucket](https://github.com/pixelhandler/ember-bucket)

From the emberella-component-blueprint README:

```
Other projects, like Ember CLI exist to jumpstart app development. If your goal is to create a reusable, fully-tested module for Ember, then a tool like Ember CLI seems like overkill. Wrangling the newest build tools to work together to develop, test, build, and release a small bit of code turned out to be a bigger challenge than I anticipated. This project will help you and others to get started building awesome components more rapidly.

Ember Components appear poised to empower developers to build modular, reusable bits of user interface. For example, IC Tabs provides WAI-ARIA accessible tabs for your Ember.js applications. It's relatively easy to consume the ic-tabs component using Bower ($ bower install ic-tabs), but developing or contributing to open source components like ic-tabs is slightly more challenging, often requiring multiple terminal screens.

```

I agree with… “Whenever the component packaging for #emberjs gets figured out: game over.” –Brian Cardarella, CEO of DockYard [https://twitter.com/bcardarella/status/456864844554452992](https://twitter.com/bcardarella/status/456864844554452992) I hope the blueprint project helps reach the goal of common component packaging.

---

<div class="post-metadata">

**Author:** ![mandrakus](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/mandrakus/32/15160_2.png) [@mandrakus](https://discuss.emberjs.com/u/mandrakus)\
**Post date:** [May 22, 2014, 5:45pm UTC](https://discuss.emberjs.com/t/repo-as-a-blueprint-boilerplate-for-authoring-components-to-distribute/5370/2 "2014-05-22T17:45:01Z")

</div>

I would definitely be interested in this. I saw on an Ember Weekly email a few months back that someone had been building a site where Ember components could be shared, but I’m not sure how that turned out. In any case, I don’t think it was geared towards actual distribution like you’re suggesting, mostly just code samples.

---

<div class="post-metadata">

**Author:** ![pixelhandler](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/pixelhandler/32/18649_2.png) [@pixelhandler](https://discuss.emberjs.com/u/pixelhandler)\
**Post date:** [May 23, 2014, 7:08am UTC](https://discuss.emberjs.com/t/repo-as-a-blueprint-boilerplate-for-authoring-components-to-distribute/5370/3 "2014-05-23T07:08:07Z")

</div>

What I like about this blueprint is that it makes me happy to have tooling for:

- a test runner using testem,
- setup for using ember-qunit,
- an example component using a custom container for testing
- live reload
- simple setup, install with `npm install`
- broccoli setup for distributing amd, cjs, global versions using `./grunt dist`
- broccoli setup for using sass, coffee too
- simple to launch, `./testem` kicks off, and reloads when broccoli rebuilds, uses broccoli watcher for app changes and testem watched test files
- an example app to share working demo served on same port as testem
- tests execute on [http://localhost:7357/](http://localhost:7357/)
- example app at [http://localhost:7357/examples/index.html](http://localhost:7357/examples/index.html)
- authoring with es6 modules
- using ic-styles
- Travis CI works using `./node_modules/.bin/testem ci`

I used the blueprint for this project [https://github.com/pixelhandler/ember-bucket](https://github.com/pixelhandler/ember-bucket) and I was very happy developing a micro lib with this blueprint setup.

My questions for anyone creating and sharing Ember components are:

- Are you using a custom tagname for your component?
- How about using ic-styles for the css?
- Travis ci setup?
- How about using testem to drive the tests?
- How about distributing amd, cjs, along with global?

As a community if we come up with a strong boilerplate for authoring and distributing Ember Components we are all better off.
