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.