I started working on Ember js using ember-cli and I want to migrate an existing code written in html, jquery and css. I am not sure if its best to put it in the index.html or application.hbs ?
It's best to put your code in application.hbs, except of tags which need to be put in <head> tag.
You can see that in index.html you have HTMLBars expression:
{{content-for 'body'}}
It's where your generated HTML application code is put, but first, it's wrapped in ember wrapper div, inside of which your application events are handled.
Imagine that you have put one of your divs in index.html - let's call it .main-div, then - in application.hbs - you've put code which has some Ember logic(so you can't put it in index.html too). Now, imagine you write CSS code to target one of children of .main-div. You target it like this in your CSS: .main-div > .dynamic-div, but it won't work. Why? Ember wrapped contents of application.hbs in its div and it's one level down. That's why it would be against developer intuition to put application HTML code in index.html - it could bite you if you forget that you have one layer more of Ember code even if in your editor you see it should be straight: .main-div > .dynamic-div.
Example of Ember.js wrapper div:
<div id="ember463" class="ember-view">