Setup Rails with Ember.js CLI and Emblem
Hello Guys, I became irregular again! :P
I was experimenting with Ember.js these days. No worry, this post is no advocacy in favour of Ember. It's just a tutorial post.
Anyway, as usual I'm using Rails for my API and backend app. The problem I faced is setting it up with latest Ember. In Ember land, everything from 3-4 months ago, is outdated. I found tutorials to setup like any normal JS library. That works. But problem is, in Ember land, now Ember CLI is the standard. And in coming days, they are gonna release Ember 2.0, which is already in beta channel. Ember 2.0 is gonna depend on Ember CLI very much.
SO, I think we should better move to Ember CLI ASAP. That's where this tutorial comes in. I found some tutorials, but didn't satisfy me. So I decided to document my own.
Ok, had a lot of chitchat. Let's get started.
You'd need to have Nodejs installed as Ember CLI is a npm package.
Let's install that first.
$ npm install ember-cli -g
$ ember -v
version: 1.13.8
node: 0.12.7
npm: 2.13.4
os: darwin x64
If you have similar output, you're good to go.
Prepare Rails app
First, get running with your Rails environment. We'll call our app, EmbC.
Let's create that:
rails new EmbC
Now, cleanup the Gemfile. Remove turbolinks and possibly jquery-ujs. Add ember-cli-rails gem and puma gem. Puma is not required for Ember, but I like to have it. You could also remove SASS and Coffee gem, if you don't like.
Now run bundle.
Setup Rails with Ember CLI
We've got a generator from Ember gem. Let's create initialiser file with that.
$ rails g ember-cli:init
With config/initializers/ember.rb you can configure you Ember apps with Rails. By default it'll have only one app, called :frontend. This app should live in Rails root + /frontend directory.
You can change the path if you want, this default is good for local development performance.
Now let's fixup Rails routes.
root 'frontend#index'
We'll need a catchall route as well for Ember to work.
get '/*path' => 'frontend#index'
Create the controller FrontendController with index method. We'll need the view as well. Create a empty view for index method inside app/views/frontend/index.html.erb
I would like to have a separate layout as well. You might want to use the default layout with other things. So create the file app/views/layouts/frontend.html.erb with below content.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EmbC</title>
<%= stylesheet_link_tag 'frontend' %>
<%= include_ember_script_tags :frontend %>
</head>
<body>
<%= yield %>
</body>
</html>
Don't forget to create the app/assets/stylesheets/frontend.css file and add it to Rails asset pipeline.
Open config/initializers/assets.rb and add this line:
Rails.application.config.assets.precompile += %w( frontend.css )
We're almost there. Let's handle Ember now.
Creating the Ember project
We've the ember command from Node. We'll use that to initialize our Ember App.
$ ember new frontend --skip-git
This will create our app.
Go to the frontend directory, we'd need to more npm package.
$ cd frontend
$ ember install ember-cli-rails-addo
$ ember install ember-cli-emblem
$ cd ..
Ok, let's add the ember view now. Create the file frontend/app/templates/index.emblem and paste this inside the file:
p Hello Ember CLI
Also convert the Ember layout to Emblem. Rename frontend/app/templates/application.hbs to frontend/app/templates/application.emblem and paste the following:
h2#title Welcome to Ember
= outlet
Okay, now start the start the server boy, let's see!
rails s
If you see a blank page for first hit, don't worry. Sometimes it takes time to build the JS file on the go for first hit.
Hit again. You would see the welcome message.
Congrats, we've successfully install Rails with Ember CLI and Emblem. Have fun!
Update: If you run into any problem you can reference this git repo for what you have done differently: https://github.com/albabar/embc