Next, we will create an Ember.js application, a route ('`/`'), and convert our static mockup into a Handlebars template.
Inside your `js` directory, add a file for the application at `js/application.js` and a file for the router at `js/router.js`. You may place these files anywhere you like (even just putting all code into the same file), but this guide will assume you have separated them into their own files and named them as indicated.
Inside `js/application.js` add the following code:
```javascript
window.Todos = Ember.Application.create();
```
This will create a new instance of `Ember.Application` and make it available as a variable named `Todos` within your browser's JavaScript environment.
Inside `js/router.js` add the following code:
```javascript
Todos.Router.map(function() {
this.resource('todos', { path: '/' });
});
```
This will tell Ember.js to detect when the application's URL matches `'/'` and to render the `todos` template.
Next, update your `index.html` to wrap the inner contents of `` in a Handlebars script tag and include `js/application.js` and `js/router.js` after Ember.js and other javascript dependencies:
```html
```
Reload your web browser to ensure that all files have been referenced correctly and no errors occur.
### Live Preview
Ember.js • TodoMVC
### Additional Resources
* [Changes in this step in `diff` format](https://github.com/emberjs/quickstart-code-sample/commit/8775d1bf4c05eb82adf178be4429e5b868ac145b)
* [Handlebars Guide](../../templates/handlebars-basics/)
* [Ember.Application Guide](../../application/)
* [Ember.Application API Documentation](http://emberjs.com/api/classes/Ember.Application.html/)