Open http://localhost:4200 in your browser
of choice. You should see an Ember welcome page and not much
else. Congratulations! You just created and booted your first Ember
app.

Let's create a new template using the ember generate command.

ember generate template application

The application template is always on screen while the user has your
application loaded. In your editor, open
app/templates/application.hbs and add the following:

<h1>PeopleTracker</h1>
{{outlet}}

Notice that Ember detects the new file and automatically reloads the
page for you in the background. You should see that the welcome page
has been replaced by "PeopleTracker". You also added an {{outlet}} to this page, which means that any nested route will be rendered in that place.

Define a Route

Let's build an application that shows a list of scientists. To do that,
the first step is to create a route. For now, you can think of routes as
being the different pages that make up your application.

Ember comes with generators that automate the boilerplate code for
common tasks. To generate a route, type this in your terminal:

Open the newly-created template in app/templates/scientists.hbs and add
the following HTML:

<h2>List of Scientists</h2>

In your browser, open
http://localhost:4200/scientists. You should
see the <h2> you put in the scientists.hbs template, right below the
<h1> from our application.hbs template.

Now that we've got the scientists template rendering, let's give it some
data to render. We do that by specifying a model for that route, and
we can specify a model by editing app/routes/scientists.js.

We'll take the code created for us by the generator and add a model()
method to the Route:

In a route's model() method, you return whatever data you want to make
available to the template. If you need to fetch data asynchronously, the
model() method supports any library that uses JavaScript
Promises.

Now let's tell Ember how to turn that array of strings into HTML. Open
the scientists template and add some Handlebars code to loop through the
array and print it:

Here, we use the each helper to loop over each item in the array we
provided from the model() hook and print it inside an <li> element.

Create a UI Component

As your application grows and you notice you are sharing UI elements
between multiple pages (or using them multiple times on the same page),
Ember makes it easy to refactor your templates into reusable components.

Let's create a people-list component that we can use
in multiple places to show a list of people.

As usual, there's a generator that makes this easy for us. Make a new
component by typing:

ember generate component people-list

Copy and paste the scientists template into the people-list
component's template and edit it to look as follows:

Note that we've changed the title from a hard-coded string ("List of
Scientists") to a dynamic property ({{title}}). We've also renamed
scientist to the more-generic person, decreasing the coupling of our
component to where it's used.

Save this template and switch back to the scientists template. Replace all
our old code with our new componentized version. Components look like
HTML tags but instead of using angle brackets (<tag>) they use double
curly braces ({{component}}). We're going to tell our component:

What title to use, via the title attribute.

What array of people to use, via the people attribute. We'll
provide this route's model as the list of people.

Go back to your browser and you should see that the UI looks identical.
The only difference is that now we've componentized our list into a
version that's more reusable and more maintainable.

You can see this in action if you create a new route that shows a
different list of people. As an exercise for the reader, you may try to
create a programmers route that shows a list of famous programmers. By
re-using the people-list component, you can do it in almost no code at
all.

Building For Production

Now that we've written our application and verified that it works in
development, it's time to get it ready to deploy to our users. To do so,
run the following command:

ember build --env production

The build command packages up all of the assets that make up your
application—JavaScript, templates, CSS, web fonts, images, and
more.

In this case, we told Ember to build for the production environment via
the --env flag. This creates an optimized bundle that's ready to
upload to your web host. Once the build finishes, you'll find all of the
concatenated and minified assets in your application's dist/
directory.

The Ember community values collaboration and building common tools that
everyone relies on. If you're interested in deploying your app to
production in a fast and reliable way, check out the Ember CLI
Deploy addon.

If you deploy your application to an Apache web server, first create a new virtual host for the application.
To make sure all routes are handled by index.html,
add the following directive to the application's virtual host configuration