Github small

Hello World!

Let’s build a Hello World app first. We can ensure that we have our development environment setup and get a high level view of how Ember works.

Create a New Rails App

The app we’re going to build in this tutorial is a CRM. We can reuse this hello world code when we start the app, so let’s name our Rails app ember-crm.

First create new rvm gemset to sandbox our gems:

rvm gemset create ember-crm
rvm gemset use ember-crm
gem install rails

Now generate the Rails app:

rails new ember-crm -d postgresql
cd ember-crm
bundle
rake db:create

If you run rails s and visit localhost:3000 then you should see the Rails Welcome Aboard page.

Remove Turbolinks

You’ll need to remove Turbolinks because it conflicts with Ember. Make sure to remove it from all of the following places:

Add Ember Rails

I am going to use Ember Rails for this tutorial. It’s stable and works great. I think Ember CLI may replace Ember Rails as the default Rails/Ember integration gem, but it’s pre 1.0 right now so I’m going with Ember Rails for this tutorial.

Add following gems to your Gemfile:

gem 'ember-rails'
gem 'ember-source', '~> 1.8.1'
gem 'emblem-rails'

And bundle:

bundle

Ember Rails provides a generator that will create a skeleton for our Ember app. The -n flag tells it to name the Ember app App, which is the typical convention.

For Javascript:

rails g ember:bootstrap -n App --javascript-engine js

If you want the generated files to use CoffeeScript then add a flag:

rails g ember:bootstrap -n App --javascript-engine coffee

Ember Rails comes with default Ember versions, but let’s explicitly install Ember 1.5.0 and Ember Data 1.0.0 beta 7 so that your version is the same as mine. They will be installed to vendor/assets/ember.

rails g ember:install --tag=v1.5.0 --ember
rails g ember:install --tag=v1.0.0-beta.7 --ember-data

Add the following lines to your environment files. These tell Ember Rails which version of ember.js to use in each environment. The production version is minified and has no logging, while the development version is not minified and allows for logging.

# config/environments/test.rb
config.ember.variant = :development

# config/environments/development.rb
config.ember.variant = :development

# config/environments/production.rb
config.ember.variant = :production

Ember Rails generates an application.js.coffee for us, so lets use that. Delete application.js. The generated application.js.coffee requires jquery, but not jquery_ujs, so make sure to require it right below jquery:

# app/assets/javascripts/application.js.coffee
#= require jquery_ujs

Making Ember Work

We’ll need a basic Rails controller and view so that we can output something from Ember. I’m going to make a controller named HomeController with an index view and make it the root path.

Add the route:

# config/routes.rb
root to: 'home#index'

Create the controller:

# app/controllers/home_controller.rb
class HomeController < ApplicationController
end

Create an index view. It’s going to be blank:

<!-- app/views/home/index.html.erb -->

Last but not least, we need to create a template for Ember to render. Ember looks for an application template by default, so all we need to do is create it:

// app/assets/javascripts/templates/application.js.emblem
h1 Hello World
outlet

Restart your server then visit http://localhost:3000. You should see ‘Hello World’ printed on the screen. If you see it then congratulations! You’re one step closer to being an Embereño. Yes, Embereño is a thing, though I kind of like Emberista.

If you don’t see Hello World, you should clone my hello world repo and see what you’ve done differently.

Very Basic Debugging

If you open your console you should see output that looks like this:

DEBUG: ------------------------------- ember.js?body=1:3522
DEBUG: Ember      : 1.5.0 ember.js?body=1:3522
DEBUG: Handlebars : 1.3.0 ember.js?body=1:3522
DEBUG: jQuery     : 1.11.0 ember.js?body=1:3522
DEBUG: -------------------------------

If you don’t see this output then your Ember javascripts are not being loaded properly.

There’s a whole page on debugging Ember in the guides. I suggest that you check it out if you ever get stuck.

The first thing I usually do if things aren’t working is place a debugger in the code and open Chrome dev tools. If that doesn’t help then the next thing I’ll do is log my route transitions to get more insight:

# app/assets/javascripts/application.js.coffee
window.App = Ember.Application.create
  LOG_TRANSITIONS: true
  LOG_TRANSITIONS_INTERNAL: true
  LOG_VIEW_LOOKUPS: true
// app/assets/javascripts/application.js
window.App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_TRANSITIONS_INTERNAL: true,
  LOG_VIEW_LOOKUPS: true
})

Beyond that I suggest reading in the guides for more detailed tips on debugging, and of course using the Ember Inspector…

The Ember Inspector

The Ember Inspector is an invaluable tool for debugging Ember. It’s a Chrome Extension that helps you see what’s going on in your app. You can get it here.

Once it’s installed refresh your browser and open Chrome dev tools. You should see a tab titled Ember. Inside are all sorts of helpful tools. View Tree will show you exactly what’s being rendered and where it came from. Routes show you all the routes in your app, and what other objects each one looks for. The route you are currently on will be bold. Data will show you all the active records in your app. You can click on a record to view all of its attributes.

I can’t say enough good things about the Ember Inspector. It makes the inner workings of your app very visible.

Conclusion

As you’ve seen it doesn’t take much time to get our Ember App up and running. Most of the work is in preparing the Rails app.

If you’ve still got issues getting this working then please post your issue in the comments below. This hello world app is also on GitHub if you want to look at it.

These comments support markdown so you can post code.