Setting up the App

Now that our development environment is setup, we can now focus on creating the TodoMVC application.

If you're not familiar with TodoMVC, it's a community project to help developers test out new JavaScript libraries and frameworks.

From their website:

"To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV concepts in most of the popular JavaScript MV frameworks of today."

Let's get right to it. We're first going to need an index.html and an entry JavaScript file, app.ts.

$ touch index.html
$ touch app.ts

Now, let's add some life to the index.html file:

index.html

<!doctype html>
<html lang="en" ng-app="todomvc">
    <head>
        <meta charset="utf-8">
        <title>Typescript & AngularJS • TodoMVC</title>
        <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
        <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    </head>
    <body>
        <section class="todoapp">
        </section>
        <footer class="info">
            <p>Double-click to edit a todo</p>
            <p>Created by <a href="http://github.com/mjw56/">Mike Wilcox</a></p>
            <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
        </footer>
        <script src="node_modules/todomvc-common/base.js"></script>
        <script src="dist/bundle.js"></script>
    </body>
</html>

We're leveraging the markup from the TodoMVC project. Also, we're leveraging the CSS and base JS from the TodoMVC package that we installed earlier in the installing dependencies section. You should also probably repace the footer content with your own information. :)

Next, let's add the app.ts file. This file will serve as the entry point to our application.

$ touch app.ts

Great, now, let's add angular to our project. Inside of app.ts, let's add our first ES6 import.

app.ts

import 'angular';

What we've done above is we have imported the angular node module which we installed earlier. ES6 modules use the module pattern known as CommonJS. If you're interested to learn more about what CommonJS modules are, I encourage you to go check out this paper by Addy Osmani: Writing Modular JavaScript With AMD, CommonJS & ES Harmony.

Alright, so now that we have our introductory JavaScript file setup, let's add our components folder.

$ mkdir components

Alright, we should be all set to actually run the app for the first time. if you want to give it a shot, test out the grunt build task that we setup earlier...

$ grunt build

hopefully you should see an output looking something like:

Running "tslint:files" (tslint) task
>> 1 file lint free.

Running "browserify:proto" (browserify) task
>> Bundle dist/bundle.js created.

Running "connect:server" (connect) task
Started connect web server on http://localhost:9999

Running "watch" task
Waiting...

Now open your browser and go to a new tab. Open http://localhost:9999. You should see at least a page with a footer and some text from the TodoMVC app. Success! We have setup our build and we have a running app. Now time to add some components and make a fully working TodoMVC app! :)