Folder layout

Edit pencil

The ember new command generates the files and boilerplate directory structure for an Ember application. The tables list the directories and files generated for a new application. See the Ember tutorial for more information how these are used when developing an application.

File/directory Purpose
app/ This is where folders and files for models, components, routes, templates and styles are stored. The majority of the project code is in this folder. See the table below for details.
config/ The config directory contains the environment.js where you can configure settings for your app and targets.js where the browser build targets are set
dist/ Contains the application's distributable output. Ember transpiles the code with Babel and concatenates the code into a file called <app-name>.js. The folder contents are deployed to the application's server
public/ This directory will be copied verbatim into the root of the built application. Use this for assets that don’t have a build step, such as images or fonts
tests/ Includes the application’s unit and integration tests, as well as various helpers to load and run the tests
node_modules/ npm dependencies (both default and user-installed)
vendor/ External dependencies not installed with npm
.editorconfig EditorConfig helps developers define and maintain consistent coding styles between different editors. See editorconfig.org
.eslintrc.js ESLint configuration
.eslintignore ESLint configuration for ignored files
.gitignore Git configuration for ignored files
.template-lintrc.js Configuration file for ember-template-lint rules
ember-cli-build.js This file describes how Ember CLI should build our app. Ember uses Broccoli to build the application
package.json npm configuration and dependency list
testem.js Ember CLI's test runner Testem is configured in testem.js.

Layout within app directory

File/directory Purpose
app/app.js The application’s entry point. This is the first executed module
app/index.html The only page of the generated single-page app. Includes dependencies, and kickstarts your Ember application. See app/index.html below
app/router.js The applications route configuration. The routes defined here correspond to routes in app/routes/
app/styles/ Contains the stylesheets, whether SASS, LESS, Stylus, Compass, or plain CSS (though only one type is allowed, see Asset Compilation). These are all compiled into /dist/assets/<app-name>.css
app/templates/ The application's HTMLBars templates. These are compiled to /dist/assets/<app-name>.js
app/controllers/, app/models/, etc. The JavaScript files or modules that contain the applications logic

Note: The files in the app/ directory are shown are for the classic project files layout. The layout will be slightly different if you use the pods project layout. See Project Layouts for the differences between the two layouts.

app/index.html

The app/index.html file lays the foundation for the Ember application. This is where the basic DOM structure is laid out, the title attribute is set, and stylesheet/JavaScript includes are done.

In addition to this, the file includes hooks - {{content-for 'head'}} and {{content-for 'body'}} - that can be used by addons to inject content into the application’s head or body.

These hooks need to be left in place for the application to function properly however, they can be safely ignored unless you are directly working with a particular addon.

Naming conventions

Ember Resolver is responsible for looking up code in your application and resolving its dependencies. The Resolver asks that you follow Ember's naming conventions.

If you use Ember CLI (ember generate) to create components, routes, etc., Ember will create files with correct names. In case you may manually create files, let's go over the naming conventions.

File and directory names

File and directory names use kebab-case with lowercase letters and a hyphen between words.

app/models/user.js
import Model from '@ember-data/model';

export default class UserModel extends Model {};
app/helpers/round-up.js
import { helper } from '@ember/component/helper';

export default helper(function roundUp(params/*, hash*/) {
  return params;
});

Files can also be nested to better manage your applications, for example:

app/routes/posts/new.js
import Route from '@ember/routing/route';

export default class PostsNewRoute extends Route {};

Nested files can be referenced as either posts/new or posts.new when used in templates or JavaScript.

Components

PascalCase is used for components. For example, the nav-bar component

app/components/nav-bar.hbs
<nav>
  ...
</nav>

would be resolved from the PascalCase component name in a template.

app/templates/application.hbs
<NavBar />

Component files can also be nested. You will need to use a special syntax to resolve a nested component. For example, if the nav-bar component were in the ui directory,

app/components/ui/nav-bar.hbs
<nav>
  ...
</nav>
app/templates/application.hbs
<Ui::NavBar />

If a component is nested more than one level deep, separate each directory using double colons.

Tests

When you use Ember CLI, Ember automatically creates a test file and suffixes the name with -test.js. If you want to manually create the file, make sure to suffix the name with -test.js so that your tests can run.

On this page