Lesson 3

Creating the project

14

⚠️ This tutorial uses an old version of Ember. Some things might have changed!

We're now ready to start our project! In this lesson we'll go through what it is we want to build, we'll initialize the Ember app, and finally take a look at the file structure so that we know what we're doing.

What we want to build

In this course we will create a web app called Chirper, a simplified clone of Twitter, using Ember.


It might not be the most original-looking thing in the world, but it's a great way to learn!


Why would we want to create a Twitter clone you might ask? In my opinion, Twitter is a very simple service that most of us understand, but it also has the most important parts of an ambitious social application:

  • Authentication (the ability to create a new user, log in, and stay logged in)

  • Posting new items (in this case, tweets) and getting a list of those

  • Setting up a profile

  • The ability to follow and unfollow other users

A good starting point when beginning a new project is to first draw some wireframes of the interface and create high-fidelity mockups in a program like Sketch or Photoshop. However, this is not a prototyping course, so I have already done that for you!


If you have Sketch for Mac, feel free to download the following file and take a peak at what we'll build:

bgCombined Shape

Create a new project with Ember CLI

Time to bring up the terminal again. cd your way into the directory you want to put your project folder in, and then run:

This will automatically create a project folder called chirper for you, with all the necessary dependencies.


Don't worry if this goes on for a while. Just let it run. It can take a few minutes.


When it's done, go into the folder and launch the Ember server to see your newly created project in action!


After the build, this is what you should see if you go to localhost:4200 in your browser


Understanding the file structure

Alright, let's dive into the project folder that Ember has created for us and go through its contents file by file! Don't worry if some of the explanations seem a little confusing right now, we will understand their purpose much better as we actually use them in our project.

  • app: this is the folder where you'll be spending by far most of your time. All of the templates, models, controllers, stylesheets, etc. reside in here.

  • bower_components: where your bower dependencies get downloaded.

  • bower.json: since the bower_components-folder isn't added in Git by default, it's this file that keeps track of your Bower packages and their versioning.

  • config: global app configurations. Right now it only contains an environment.js file, which let's you set special variables and behaviours that depend on if your app is in development, in testing or in production.

  • dist: this contains the final result of your app, and is what's running in the background when you go to localhost:4200. You should never have to manually change the contents of this folder, since it's only a compilation of all the code you write elsewhere.

  • ember-cli-build.js : this file let's you decide which external packages (from Bower for example) should be concatenated with the rest of your JavaScript code. It's basically a library importer.

  • node_modules: same as the bower-components-folder, but for libraries installed through NPM.

  • package.json: same as bower.json, but for libraries installed through NPM.

  • public: this is where you put all of your static assets, like images, video clips and fonts for example.

  • README.md: every good project contains a README-file to explain how the app works for collaborators.

  • testem.json: configurations for your tests.

  • tests: this is where all the logic for your QUnit tests resides.

  • tmp: some temporary files created during the build process. This folder shouldn't be touched.

  • vendor: here you put all the third-party libraries that can't be installed through NPM or Bower for whatever reason.

Adding the image assets

As you can see from the mockups, we're using a few images in our app, so make sure you download the following zip-file, unzip it, and put the content of the folder in public/images.

bgCombined Shape



In the next chapter, we will write some of our own code for the first time to see how Ember works.

Comments

Frik Strecker

Where do I download the project files from?

Frik Strecker

I understand, but the point is that if I make a mistake nothing works... so I need to compare my result with the complete project source code. Where can I download the ember project containing the complete source code? That is how every other training module does it btw.

Tristan Edwards

@frikstrecker: That's what we're generating in this lesson.

Daniel Jeffery

Hey Frik, I was able to build this by copy and pasting without any issues - so although I can see why you'd like to have the source code to compare it to, you should be able to come back here to see what is wrong with your code!

profile/avatar/default
Bradfirebase

I am not able to get Ember server working on my Mac at this early point in the lesson. I get an error which makes it sound like the Ember resolver js file cannot be found. I cannot find any help for this error anywhere else. Any Ideas? Thanks!

profile/avatar/default
Andreas

The welcome page shows initially a nice {{welcome-page}}

profile/avatar/default
Andreas

I don't see any bower files

Tristan Edwards

@ludu-co: Bower has actually been deprecated so Ember doesn't include that anymore!