I’m using ember 2.10.0 here

In the 1st part of our Ember 2.10.0 tutorial series, we have already covered an overview and installation of ember. If you’ve missed the first part and not aware of installation and overview, kindly read the first part. So, after completing installation of ember cli, we scaffolded a new ember application by using the following command.

ember new yourProjectName

And we also ran the application using the command below.

ember server

At the end, we found the output page in port 4200 in the browser. Now when we have a project yourProjectName; in our case let us name it as MailBox, we can once go through the application architecture.

Ember application architecture

The default architecture of the scaffolded ember application is given in the picture. Inside the project MailBox we can see many configuration files including package.json. Apart from those files, there are few folders too; whose functionality is discussed below.

• node_modules/ : This folder contains the ember add-ons which are installed; as ember add-ons are nothing but node modules.
• bower_components/ : You can add bower components to your ember project. Ember-cli observes the bower.json and restarts the app for any new installation.
• vendor/ : Sometimes you may have been using some third party library which are not published as ember add-on or bower package. In this case you should place them in vendor/ folder. Remember, while managing your ember-cli-build.js you should only import assets, located in either bower_component/ or vendor/ folder.
• public/ : If it’s not a third party asset, then place it in public/ folder of the project. Eg: favicon, custom fonts, robot.txt etc.
• tests/ : As the name suggests, this folder is used for testing. You will get to know more when we will cover the Ember Testing.
• config/ : The configurations can be found and added in this folder. There will already be a file named environment.js with lot of application related configurations in it.
• tmp/ : You need to run the application once ($ ember s) to find this folder in the project directory. When the app is running, there will be multiple auto generated files in this folder.
• dist/ : When build is completed, the generated output are stored inside this folder. You atleast have to run the project once to get this folder.
• app/ : This is the most important folder, which contains all components of your application. As you can see there are multiple files & folders inside the app/ and the folder names indicated what they will contain. The app.js is the entry point of your application. In router.js you will find router maps etc and the resolver.js helps resolving AMD modules and also things like compiling ES6 to ES5 etc.
• ember-cli-build.js : You can import more files here to include them in the final build of your project. Remember, the assets must be from bowser_components/ or vendor/ folders.

How it works

Well, I’m not covering how ember cli itself runs each things one by one, but how the application parts are being executed. app.js

import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

The app.js in the folder app/ is the bootstraper. You can see after importing ember, it has extended the Ember.Application with some options. modulePrefix and prodModulePrefix are kind of the name of the project, used in building modules. Resolver helps resolving the AMD modules. The ember-resolver by default does the conversion of ES6 to ES5 using babel. ember-load-initializers helps loading the initializers. There are two kind of initializers; application initializer and application instance initializer. The initializers can be used for dependency injection. Will give a brief about it later in the tutorial series. Ember runs on convention. So even if you can see nothing in controllers, routes or templates folder; ember actually created (not saved in the disk) a controller, a route and a template all named as application. However you can override them and create your own.

Let’s print a hello world

Well, I hope your application is already running. If not, you can run it by $ ember s in the root directory of your project. Ember is convention driven. So, to change the page template which is being displayed in localhost:4200, all we need to do is to create a template named application. Run the command below to do that.

$ ember generate template application

After running this, you will find a application.hbs file in app/templates/ folder. Put the following code in application.hbs and check localhost:4200 in the browser.

Hello World

Introduce a controller too

$ ember generate controller application

After running the above command, an application.js will be created in app/controllers. Now modify that file as below.

import Ember from 'ember';
export default Ember.Controller.extend({
    myVal: "Void Canvas"
});

And also change the application.hbs a little bit.

Hello World {{myVal}}

Now the output in localhost:4200 will be like below.

Next part

So now you are able to understand how to scaffold ember, how it works etc. In the next part of this series we will cover template syntaxes and helpers.