Application setup

« Previous Next »

There are many different ways to structure an app built using web technologies, and making organizational decisions can take time. Fortunately, when working with a command line tool such as Ember CLI, the application structure is determined for you. This makes it easy to quickly scaffold new resources or templates and automate repetitive tasks, leaving you with more time to focus on improving your application. This article covers using Ember CLI to create a new app.

Creating your app

Though we are deferring a decent amount of responsibility to Ember CLI, it is still important to familiarize yourself with the way these projects are set up. Let's get started by creating a new project. We will generate the basic app skeleton and serve it locally to be viewed in the browser. Later in the quickstart, we will work with this skeleton to create a simple clock application with timezone support.

The first step is to think up a name for your project. This should be short and memorable — in this case we'll use world-clock.
From your terminal or command line, navigate to a memorable directory on your hard drive where you want to create your app:
```
cd path-to-directory
```
Create your new project with the following command:
```
ember new world-clock
```
Ember will generate a new directory containing your project in the current directory. This folder contains all the tools and resources needed for a basic Ember application. Though it may seem like a lot to keep track of, you'll find this structure provides great flexibility when you want to add more functionality to your application.

cd into your project's root directory and have a look around:

cd world-clock
ls (use the dir command instead on Windows)

Starting your app

As you edit your application files, Ember CLI will automatically compile and concatenate your scripts for you. Ember CLI also provides a development server that allows you to view and debug your changes as you make them. To start your app:

From the root of your project, run the following command:
```
ember serve
```
If you get the message Run 'bower install' to install missing dependencies, run the command bower install in your command line/terminal then try ember serve again.
Another message that can appear is 'ENOGIT git is not installed or not in the PATH' — this means that Git is not available; install Git then try again.
Open your browser and navigate to http://localhost:4200/. You should see a blank page with a single heading, "Welcome to Ember.js"

Application structure

There is no need to explain all of the items in your new app's structure now; you'll learn more about you work through subsequent sections of the quickstart. However, we wanted to explain a couple of things to you now.

First of all, stop the development server by going to your terminal/command line and pressing Ctrl + C. look at the directory structure again using ls/dir.

You'll notice a dist directory in the application structure. Whenever Ember CLI builds your application, it places the final production-ready files of your app in this directory. You should never edit any of these files directly, as they will be overwritten any time Ember CLI builds your files.
You'll also see an app directory: this is where you make direct changes to your application's code. The contents of this directory are built then copied into dist when you run ember serve.
There is also a public directory, where you put raw assets such as fonts and images that don't require any building. This is copied over to the dist directory unchanged when you run ember serve.
There's a package.json file in your root directory, which contains configuration information, such as the name of the app, what dependencies it has and how to serve it.

Note: A more detailed explanation of your app structure can be found in the ember documentation.

Creating a Firefox OS manifest file

If you are planning to submit your application to the Firefox Marketplace so that it is available for download on Firefox OS devices, you will want to create a manifest file.

The concept of a manifest file is common practice, and you may be familiar with it from building tools or apps for various different environments. It provides important details about your application (e.g. name, description, version) and should be placed in the root directory of your project.

Using Ember CLI, we can install an add-on that generates this manifest file for us:

From the root of your project, install the add-on by running the following command:
```
npm install ember-cli-fxos --save-dev
```
We can now generate a manifest file with:
```
ember g fxos-manifest
```

This will create a manifest.webapp file in your application's /public directory. When Ember CLI builds your files, this manifest file will be copied over to the /dist folder, which as explained above is the final production directory for your code.

The manifest file created for you is pre-filled with the minimum configuration you'll need to get started. Any values prefixed with @@ (e.g. @@appName) will be pulled from your package.json file at build time. As you iterate on your application, you may need to add properties or adjust values in your manifest.

Note: You can find a full reference of Firefox OS manifest configuration options on MDN.

Next steps

We now have a fresh application running locally that we can begin working with. Next, we'll look into the developer tools that will help you view, test and debug your application as you build.