How to use ember cli for existing ember project


#1

We are in the process of re-writing our entire php application to ember.js. we are almost finish with re-writing the application. Now, we realized that it would really beneficial if we started our project with ember cli. Is any one converted their non ember cli project to ember cli project ? It would be really beneficial for us if some one share how they are using ember cli for existing ember project. Thanks in advance.


#2

I am too struggling from migrating a existing emberJS project into ember-cli! Good to read I’m not the only one :wink:

Most changes required are small, even tiny, but to find out the correct screws to get it working is the tricky part. I would not mind if some one else would share their experience with that. A few things which gave me a big headache:

  • In ember-cli the naming conventions go even further and apply to file names as well. Where I could call the file of my controller before whatever I liked, I now have to call every file as it’s purpose and be sure to put it in the correct folder
  • The hbs templates are not surrounded by script tags anymore and go in seperate files. again: naming!
  • You have to export every controller, view, route… that is (as far as I understood) the ES6 way of doing it now… App.InstituteController = Ember.ArrayController.extend({... becomes export default Ember.ObjectController.extend({... in the file app/controllers/institute.js
  • Remeber to always import Ember with import Ember from "ember";
  • I’m still trying to understand why but some third party libraries were adjusted for ember-cli and you can just install them with npm, then import the needed class and already can start fancy stuff. E.g. ember-simple-auth for ember-cli, you just import stuff you need after installing the package: import UnauthenticatedRouteMixin from 'simple-auth/mixins/unauthenticated-route-mixin';
  • Packages which were not made for ember cli, are easier to install and manage with bower. You then just have to make sure that you tell JSHint in the file .jshintrc and also import the package into the ember app. E.g. The package CLDR was just installed with bower bower install cldrjs. Then added "CLDR", to the "predef": [ key in .jshintrc and then imported the package in the Brocfile.js with app.import('bower_components/cldr/plurals.js');

I’m still converting by the way and there is still many things that haven’t made sense to me yet, but we’ll get there. The ember app does not really change in the core, it’s just the way of including the resources that’s giving me a hard time.