Setting Up Ember CLI with Emblem and CoffeeScript

July 24, 2014 • Damien White

I’ve been using Ember CLI for various projects. Two things that I like to do right out of the gate is to enable CoffeeScript (instead of JavaScript) and Emblem JS (instead of Handlebars templates). Both of these tasks are pretty easy thanks to Broccoli.

Start by creating a new Ember CLI application:

ember new <my_app>

CoffeeScript

Now let’s get CoffeeScript working, it’s as easy as installing a Broccoli component

npm install --save-dev broccoli-coffee

Now, let’s modify router.js to router.coffee, it’ll look like this when you are done. Note the import and export are wrapped in backticks as CoffeeScript doesn’t support ES6 Module syntax.

`import Ember from 'ember'`

Router = Ember.Router.extend
  location: <YourAppName>ENV.locationType

Router.map ->

`export default Router`

Next, app.js to app.coffee

`import Ember from 'ember'`
`import Resolver from 'ember/resolver'`
`import loadInitializers from 'ember/load-initializers'`

Ember.MODEL_FACTORY_INJECTIONS = true

App = Ember.Application.extend
  modulePrefix: '<YourAppName (lowercase)>' # TODO: loaded via config
  Resolver: Resolver

loadInitializers(App, '<YourAppName (lowercase)>')

`export default App`

Now run ember serve, and if all is successful, you should see “Welcome to Ember js”.

Emblem JS

Like CoffeeScript, we’ll use a Broccoli package for Emblem JS.

npm install --save-dev broccoli-emblem-compiler

Then we can convert application.hbs to application.emblem

h2#title Welcome to Ember.js

== outlet

Restart the Ember server (CTRL+C to stop, ember serve to start), and again we should see “Welcome to Ember.js”

That’s all it takes. Broccoli makes theses tasks trivial.

Posted in ember, javascript and tagged with coffeescript, ember-cli, emblem, javascript

Damien White

I am a software architect with over 16 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I know in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails, Ember.js, and ASP.NET MVC.

comments powered by Disqus