I’ve been mucking around with Ember.js for about 6 months now and seriously enjoy working with it. The whole product is really easy to use (admittedly, once you get your head around it) and it’s fantastic. The product I’m working on at the moment consists of a 3 part system;
I decided to keep the admin and web components completely separate so they could be extricated later on if need be, but about 3 months in I realized I was duplicating a hell of a lot of code. In some situations, I was copy-pasting entire files because there was so much crossover.
I considered rolling the two ember apps into one, but it still didn’t make sense to the way the apps are designed. I wanted them kept completely separate so I was going to make sure they were. My initial attempts included;
Next I turned to Github, and had an answer within minutes. Robert Jackson to the rescue with ember addons.
So, I followed a couple of tutorials and instructions but there was nothing that fit exactly what I was doing, so it was a bit of trial and error. Anyway, without further ado, this is how it went.
The easiest way to setup an addon is using NPM, which worried me until I realized private NPM packages exist and are easy to setup. So, I created my folder ‘shared’ and added a couple of files:
The important aspects here are you must include the keywords ‘ember-addon’ and, if you don’t want to publish your code, set ‘private’.
These files aren’t specifically required, but I found I was using a lot of the same vendor code, so to manage dependencies, I pulled all of them back to the shared module and, to fit with ember’s settings, set the bower directory to ‘vendor’.
And the Shared Addon is now setup.
The ember addon structure will call ‘treeFor’ for a number of different files. I got a little confused here because it doesn’t match the Ember App setup exactly. As far as I can tell the distinction is based on file type more than anything else. My folder structure looks a little like this.
This tree gets merged with the application, so my files are available as if they were a part of the original application.
And that’s it. You’re all setup.
To include your addon in an ember app, it takes just one command:
npm install ../shared
(You can use a relative or absolute path here.)
Ember static assets are dropped in the ‘public’ folder, but this folder isn’t pulled across by ember addons. To combat that, I dropped my static files in an ‘assets’ folder in the addon and my ‘brocfile.js’ looks like this:
It’s a little messy, but it works and I can share my fonts and images between apps.
Who am I? I'm Maddison Joyce. I've worked in all areas of software development and before that I was in tech support. I love writing code, learning new technologies, reading books and talking to people. I can help you with your next software project.
© Maddison Joyce, 2014.