This is a walkthrough tutorial on how to get started with building a blog website using Ember-CLI. As we go along, you'll be getting your hands dirty with a real-world scenario of building a multi-page website for the fictitious travel company named Iconic Locations. This article is intended to be less high-level and more hands-on as it is meant to be followed in conjunction with the Ember.js Guides.

Prerequisites: I'm assuming you have already installed Ember-CLI on your machine along with the Chrome Ember Inspector.

If you get stuck at any point, feel free to browse my copy of the code at GitHub. For your convenience, I made a branch for each section of this article so you can jump in at any point.

Start at the Finish Line

Before we begin, let's look at a mockup of what we'll be building:

Index page:

Post page:

Here's a JSFiddle with the template HTML and CSS we'll be starting with:

What we have here is a blog page template made responsive by Bootstrap. We have an app bar, a header, an article section, and a footer that will have some dynamic controls on it. The process I have in mind here is that we'll start with this mockup and iteratively make parts of it work until we have a fully-working site. This way, we'll always have something to preview to make sure things are still working along the way.

Creating a project in Ember

Open up a terminal with node.js installed and type the following:

$ ember new iconic-locations

This instructs Ember-CLI to install a basic set of files you'll need to start your project. The part we will be doing most of the work is in the app folder. Once it's done, go to the root directory of your application.

$ cd iconic-locations

From here you can start the app.

$ ember serve

It will output something like this:

version: 0.1.12
Livereload server on port 35729
Serving on http://0.0.0.0:4200/

Okay, it told us it's serving at http://0.0.0.0:4200. Load that in your browser and you'll see:

It looks pretty plain, doesn't it? Let's add in our template next because we always want the project to look like the finished product. This will allow us to be able to turn stuff into the components, views and templates we need with minimal effort.

Add the Prototype Layout

Open app/templates/application.hbs. This is a handlebars file that will contain our template. Let's start by replacing everything in this file with the contents of the HTML pane of the JSFiddle editor. (Don't worry about the {{outlet}} tag just yet, we'll add it back once we need it.) Since we're running Ember-CLI at the moment, if you save the file the browser will automatically update with your changes. We've still got a few missing styles, so let's add them next.

Open the file app/styles/app.css and copy the remaining template styles from the CSS pane of the JSFiddle editor. After the browser refreshes, it should now look like the template.

As a matter of tidying things up a bit, go back to the application template and move the script tags to just below the other script tags in app/index.html. Now we're ready to start converting it to an Ember app.

Adding Routes and Templates

Let's add an index route template, which will be viewable from the starting directory and will list all the recent posts. Open up a second terminal window and change its current directory to the root iconic-locations path. Now type the following:

$ ember generate route index

Now simply move the bottom section of the template from the app/templates/application.hbs into app/templates/index.hbs, replacing file's contents. The entire file should now look like this:

<div class="container foreground">
...
</div>

And at the bottom of the application.hbs file, add an {{outlet}} tag, so the template you just moved will continue to show when you are at your website's root URL.

At this point, your browser should still look like the starting template when you reload the page.

Now let's add a route for viewing an individual post. Ember.js generated a default route for the index page, so we haven't needed to add one until now. Open app/router.js and add a resource inside the router's map method, like so:

...
Router.map(function() {
  this.resource('post', { path: '/:post_id' });
});
...

This adds a route named post, which will be accessible near the application's root directory at '/:post_id'. If we didn't specify a path, it would be located at /post/:post_id instead by default.

Since we don't want to display the full article text and header on every page, we should move those blocks into a separate template. In your terminal, type the following:

$ ember generate route post

This created a few files, one of them located at app/templates/post. Go back to app/templates/application.hbs and replace everything below the <div id="navbar"> section with an {{outlet}} tag, while replacing the contents of the app/templates/post.hbs file with the contents you removed.

To recap, your application template should now look like this:

<div id="navbar" class="navbar navbar-default navbar-page-title">
...
</div>

{{outlet}}