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
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
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.
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
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 +
You can change the path if you want, this default is good for local development performance.
Now let's fixup Rails routes.
We'll need a catchall route as well for Ember to work.
get '/*path' => 'frontend#index'
Create the controller
index method. We'll need the view as well. Create a empty view for index method inside
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.
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
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
$ 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.emblem and paste the following:
h2#title Welcome to Ember = outlet
Okay, now start the start the server boy, let's see!
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