Tapas with Ember

A Brunch skeleton for rapid Ember development. Including Ember installation scripts, environment-specific builds, generators, and Ember.vim support.

• Features
• Setup
• Frequently Asked Questions
• Technology
• Updating Libraries
  • Ember
  • Ember Data
  • Ember Model
• Generators
• Compiling for Production
• Deploy
• Scripts
• Pow.cx
• Testing
• Ember.vim Support
• Updating Tapas with Ember
• Thanks To

Features

• Ember Install Script - Cakefile scripts to install the latest Ember, Ember Data, and Ember Model.
• Environments - Custom code to allow for environment detection in the browser and at compile time. Automatically uses Ember's production build when in production just like ember-rails.
• Automatic File Loading - Automatically loads you code, no script tags or superfluous requires necessary.
• Ember.vim support - Navigate to and create models, controllers, templates, and views with ease.

Brunch Plugins

• digest-brunch - Add a unique SHA to your assets in your production build.
• auto-reload-brunch - Adds automatic browser reloading support to Brunch.
• uglify-js-brunch - Adds UglifyJS minification support to Brunch.

Setup

Before using Tapas with Ember you will need to install Node, CoffeeScript, Brunch, and Bower.

npm install -g brunch coffee-script bower

Now that you've got Brunch installed, you're three commands away from a running Ember app!

brunch new gh:mutewinter/tapas-with-ember <appname>
cd <appname>
cake server

Open localhost:7435 and check out your brand new Ember app! Every time you save a file, the browser will automatically refresh.

Tapas with Ember runs the latest release channel Ember and latest beta of Ember Data. You can update to Beta or Canary builds using cake ember:install. It's also easy to install the latest Ember Data or Ember Model using the cake scripts below.

Frequently Asked Questions

See the FAQ in the Wiki for answers to questions like:

• How do I add a JavaScript / CSS Library?
• How do I add Bootstrap?
• How do I detect the environment?
• How do I set Ember feature flags?

Technology

• Ember 1.5.1
• Ember Data 1.0.0-beta.8
• Brunch 1.7.13
• Bower
• Handlebars 1.3.0
• jQuery 1.11.0
• CoffeeScript 1.7.1
• Stylus
• HTML5 Boilerplate
• Normalize.css
• Optional Ember Model

This will always say out of date because I'm using jQuery 1.X for IE compatibility.

Updating Libraries

Ember

Tapas with Ember ships with the latest release channel Ember. You can install other versions of Ember using the commands below.

cake ember:install
# cake -t "v1.5.1" ember:install # for v1.5.1 tagged release
# cake -c "beta" ember:install # for beta
# cake -c "canary" ember:install # for canary

Note: cake ember:list displays the tagged releases since 1.0.0.

Ember Data

cake ember-data:install
# cake -t "v1.0.0-beta.8" ember-data:install # for v1.0.0-beta.8 tagged release
# cake -c "canary" ember-data:install # for canary

Note: cake ember-data:list displays all tagged releases.

Ember Model

cake ember-model:install

Note: Ember Model can not be used with Ember Data.

Generators

This skeleton makes use of scaffolt generators to help you create common files quicker.

To use first install scaffolt globally with npm install -g scaffolt. Then you can use the following command to generate files.

scaffolt arraycontroller <name>   →    app/controllers/<name>s.coffee
scaffolt component <name>         →    app/components/<name>.coffee
                                       app/templates/components/<name>.hbs
scaffolt controller <name>        →    app/controllers/<name>.coffee
scaffolt helper <name>            →    app/helpers/<name>.coffee
scaffolt initializer <name>       →    app/initializers/<name>.coffee
scaffolt mixin <name>             →    app/mixins/<name>.coffee
scaffolt model <name>             →    app/models/name.coffee
scaffolt route <name>             →    app/routes/<name>.coffee
scaffolt router                   →    app/config/router.coffee
scaffolt template <name>          →    app/template/<name>.hbs
scaffolt view <name>              →    app/views/<name>.coffee

Compiling for Production

Both the development and production versions of Ember are installed via the ember:install cake task. To compile your project with the production version of Ember with hashed file names, run:

cake build

Now the public folder will contain your production-ready Ember app.

Deploy

Tapas with Ember comes with a Mina deployment script to deploy your app to your own server.

1. Install Mina by running gem install mina
2. Fill in your credentials in config/deploy.rb
3. Setup your server, I use Nginx with this config
4. Run mina setup
5. Run mina deploy

Scripts

The following cake scripts are provided.

cake server               # start the Brunch server in development
cake watch                # continiously rebuild app without a server
cake build                # build for production (delete public folder first)
cake test                 # run the tests
cake ember:install        # install latest Ember
cake ember:list           # list the known versions of Ember
cake ember-data:install   # install latest Ember Data
cake ember-data:list      # list the known versions of Ember Data
cake ember-model:install  # install latest Ember Model
cake handlebars:install   # install latest Handlebars

Pow.cx

To use this app with Pow.cx, follow these simple steps:

1. Install Pow.cx
2. echo 7435 > ~/.pow/<appname>
3. Start the server with cake server
4. Open http://appname.dev

Testing

To run you will need Testem and you will need to install phantomjs.

brew update && brew install phantomjs

To run tests continiously as you write code and tests (for now) you must open two terminal windows. One running brunch to continiously build the application and the other running testem.

cake test # starts brunch in test environment
npm test  # starts testem

If you want to run your tests on other browsers, modify your testem.json file to include the additional browsers. For example:

"launch_in_dev": ["PhantomJS", "Chrome", "Firefox", "Safari"]

You can see a list of available launchers by running the command testem launchers.

Ember.vim Support

Custom Ember.vim support is provided via portkey.json. You can navigate to files via these commands:

:Eadapter
:Easset <name>       → app/assets/<name>
:Ecomponent <name>   → app/components/<name>.coffee
:Econfig <name>      → app/config/<name>.coffee
:Econtroller <name>  → app/controllers/<name>.coffee
:Ehelper <name>      → app/helpers/<name>.coffee
:Einitialize
:Einitializer <name> → app/initializers/<name>.coffee
:Emixin <name>       → app/mixins/<name>.coffee
:Emodel <name>       → app/models/<name>.coffee
:Eroute <name>       → app/routes/<name>.coffee
:Estyle <name>       → app/styles/<name>.styl
:Etemplate <name>    → app/templates/<name>.hbs
:Etest <name>        → test/<name>_test.coffee
:Eutility <name>     → app/utility/<name>.coffee
:Eview <name>        → app/views/<name>.coffee

Updating Tapas with Ember

Tapas with Ember has a built-in update script.

cake tapas:update

It updates and overwites Cakefile, package.json, portkey.json, config.coffee, generators/*.

Thanks To

• @gcollazo for making brunch-with-ember-reloaded, which Tapas with Ember is based on.
• @cavneb for his excellent contributions via his fork, yet-another-ember-brunch.