In order to migrate an existing Ember.js application to an Ember CLI-compatible application, the first thing you need to do is to install Ember CLI in the project's root folder using the following command:
npm install –save-dev ember-cli
This should add a package.json file in your project's root, with Ember CLI as its dependency.
Now you should be able to run the ember command from the project's root directory.
The next step is to initialize an empty Ember CLI application using the ember init command.
Running the ember init command will initialize an empty Ember CLI, the same structure we discussed in the section, Creating a new application. It will also install the bower and node dependencies automatically, like the ember new command.
When ember init finishes, you should run the ember server to start the development server, if you see the appropriate Welcome to Ember.js screen. This means that the project has been initialized properly.
The main task left now is to make your code compatible with Ember CLI's resolver, which resolves different components based on the ES6 module. It is exported from a file whose name is based on Ember.js conventions.
|
Without Ember CLI |
With Ember CLI |
|---|---|
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['something','else'];
}
}); |
// app/routes/index.js
import Ember from 'ember'
export default Ember.Route.extend({
model: function(){
return ["something","else"];
}
}); |
Here are some of the things that should be paid some attention while converting your exiting application to Ember CLI:
- Ember CLI uses a custom resolver, which uses different conventions to resolve Ember.js components. Earlier a resolver was used to resolve components from the global namespace, like
App. Ember CLI uses a resolver that resolves components from the ES6 compatible modules that are exported from the different files present in their designated folder. For example, post controller will be resolved from the module that is exported from thepost.jsfile, present inside<your-application>/app/controllers/post.js, instead ofApp.PostController. - The script tag no longer surrounds the
.hbsorhandlebars.jstemplates. The templates are automatically compiled from the<your-application>/app/templates/location. Here too, the name of the template file should match with that of the route, or the template that is used elsewhere. - Remember to always import Ember with
import Ember from "ember";. - Ember CLI makes it easy to import third-party libraries using bower. You will have to add the necessary import statements in
Brofile.js, in order for these libraries to be made available to the application, via the broccoli asset pipeline. - To include the libraries that can't be installed via bower, you can put them in a
vendordirectory, and import them to broccoli.