# Getting started with Ember App Kit

DevFeed: [Getting started with Ember App Kit](<https://devfeed.tech/articles/getting-started-with-ember-app-kit-20369.md>)

Original publisher: [Read original article](<https://blog.sensible.io/2014/03/07/getting-started-with-ember-app-kit.html>)

Author: sensible.io team

Published: 2014-03-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Sensible](<https://devfeed.tech/sources/sensible.md>)

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [ECMAScript](<https://devfeed.tech/topics/ecmascript.md>), [Development](<https://devfeed.tech/topics/development.md>)

Tags: [cli](<https://devfeed.tech/tags/cli.md>), [component](<https://devfeed.tech/tags/component.md>), [es6](<https://devfeed.tech/tags/es6.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [git](<https://devfeed.tech/tags/git.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [install](<https://devfeed.tech/tags/install.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [modules](<https://devfeed.tech/tags/modules.md>), [npm](<https://devfeed.tech/tags/npm.md>), [port](<https://devfeed.tech/tags/port.md>), [svg](<https://devfeed.tech/tags/svg.md>), [web-browser](<https://devfeed.tech/tags/web-browser.md>)

## AI overview

A tutorial for building a simple Ember.js app that logs daily water intake using Ember App Kit. It covers creating a project, installing Grunt, Bower, and Loom, starting a development server, generating routes and controllers, and building a bottle component with an SVG-based water-level display.

## Source excerpt

In the following tutorial we'll create a simple Ember.js app for logging your water intake. Besides learning the basics of Ember.js, you will also learn how to use Ember App Kit. You can see the final application right below: Link to Demo About Ember App Kit EAK is the basic building block of your app. It helps you to rapidly start the development with features such as the ES6 module transpiler, automatic reloading, the Grunt task runner, the Bower package manager... EAK uses ECMAScript 6 Modules, which means you can keep your namespace clean and only import objects you need to the current scope. Thanks to es6-module-transpiler you can use the current ES6 module syntax and it will be automatically compiled into today's JavaScript. Creating a project Create your project by cloning EAK ➤ git clone git@github.com:stefanpenner/ember-app-kit.git waterize ➤ cd waterize Optionally you can get rid of the Git history and start fresh ➤ rm -rf .git ➤ git init Install required node binaries This only needs to be done once. Install Grunt, Bower and Loom (if you want to use generate command to easily generate controllers/models etc.). ➤ npm install -g grunt-cli bower loom Starting a development server Install the required node packages and start the server ➤ npm install ➤ grunt server Finally open our project in the web browser (port defaults to 8000). open http://localhost:8000 Generating basic routes and controllers We'll use day controller for storing our water intake per that day. Now let's generate an object controller with Loom In Ember.js, controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server. Ember.js guide - Controllers ➤ generate controller day Select o since we want an object controller, then generate a route for the controller When your application starts, the router is responsible for displaying