Starter App

for Windows

@FormidableLabs |

Tip - space bar advances slides


Let's get a starter application installed, up and running to build on...


You will need the following basic tools on your development machine:


Download from


Test it out!

$ node --version
$ npm --version


Download from and pick following choices...

Git Choices

  • "Select Components" → Defaults
  • "Adjusting your PATH environment" → "Run Git from the Windows Command Prompt"
  • "Configuring the line ending conversions" → "Checkout as-is, commit Unix-style line endings"


Test it out!

$ git --version


Notes is an example of a modern frontend application, test and infrastructure.

Git Clone

Open up a terminal (cmd, Console, etc.):

$ git clone

which creates "\PATH\TO\REPOS\notes"

The Starter

We provide a "skeleton" and "full" version of the app.

We'll copy and use the "skeleton"...

Copy Skeleton

Copy "skeleton\amd" to your own folder.

$ xcopy /h /e skeleton\amd PATH\TO\APP_NAME

An example - "my-app"...

$ mkdir my-app
$ xcopy /h /e notes\skeleton\amd my-app
$ cd my-app

Install Skeleton

Now install all the components.

$ npm install

Build Skeleton

Now let's build everything and run all the tests!

$ node_modules\.bin\grunt

... SNIPPED ...

Done, without errors.

Our Lifecycles

... a teaser ...

Development Lifecycle

  • Write new code.
  • Experiment in dev. server (_dist=0)
  • Write and run tests.
  • Check code quality.
  • Commit!
  • ... rinse, and repeat ...

Release Lifecycle

  • Check code quality.
  • Run multi-browser tests.
  • Bundle for production.
  • Deploy!
  • ... rinse, and repeat ...

Application Tour

Let's see what we're starting with!

Dev. Server

Start the development server

$ node_modules\.bin\grunt server
Running "nodemon:dev" (nodemon) task
[nodemon] v1.0.19
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /PATH/TO/notes/skeleton/amd/server/**/*
[nodemon] starting `node server/index.js`

Dev. Server

Kick the tires at:

The App!

Our JavaScript web application:

(gh) app/app.js | (local) app/app.js

Anatomy of a Web App

Let's look at our web app file hierarchy.


And let's see some Jasmine tests at:

And mocha tests here:

Anatomy of Tests

Let's look at our test file hierarchy.

Get it started!