Draft of new codelab for review

src/site/codelabs/deploy/index.markdown

+---
+layout: tutorial
+title: "Code Lab: Deploy the Pirates"
+description: "Deploy your Dart app to the internet."
+has-permalinks: true
+tutorial:
+  id: buildanddeploy
+js:
+- url: /js/os-switcher.js
+  defer: true
+- url: /js/editor-downloads-analytics.js
+  defer: true
+- url: /js/editor-version.js
+  defer: true
+header:
+  css: ["/codelabs/darrrt/darrrt.css"]
+---
+
+# {{ page.title }}
+
+After you finish developing a web app,
+you need to put it on the internet so that people can use it.
+
+The following diagram summarizes the process
+for deploying a Dart web app.
+
+![The build and deploy process](images/process.png)
+
+In this code lab,
+you learn to launch an app to the internet using
+<a href="https://devcenter.heroku.com/">Heroku</a>,
+which is a cloud application platform
+for building and deploying web apps.
+Heroku is just one of many options
+you could choose for deploying an app.
+Other options include
+Google App Engine and Amazon Web Services.
+
+In this code lab, you deploy the Pirate Badge app from the
+[Code Lab: Pirate Convention](/codelabs/darrrt/).
+By doing so, you learn how to build the app for deployment,
+how to write a basic static file server,
+which Heroku requires to serve your app,
+and finally, how to deploy to Heroku.
+
+This code lab assumes that you have written and run
+a Dart web app before.
+If you have not, consider doing the
+[Code Lab: Pirate Convention](/codelabs/darrrt/).
+
+<hr>
+
+<div markdown="1">
+
+## Table of Contents
+
+* [Step 0: Set up](#step-zero)
+* [Step 1: Run the app in Dart Editor](#step-one)
+* [Step 2: Build the app and run as JavaScript](#step-two)
+* [Step 3: Code walkthrough of a static server](#step-three)

[Kathy Walrath, 2014/01/16 00:01:29]

It's weird to have a non-action-oriented name. Maybe:

Build a static server for Heroku

[mem, 2014/01/16 22:49:00]

Done.

+* [Step 4: Deploy to Heroku](#step-four)
+* [Step 5: Run the app online and mobile](#step-five)
+* [Resources](#resources)
+* [What next?](#what-next)
+
+{% comment %}
+consider writing section showing how to use
+dev tools to run web page on phone
+{% endcomment %}
+
+</div>
+
+<hr>
+
+##Step 0: Set up {#step-zero}
+
+In this step, you download Dart and get the code for the app that you will be deploying.
+This code lab uses Dart Editor.
+
+### <i class="fa fa-anchor"> </i> Get Dart.
+
+<div class="trydart-step-details" markdown="1">
+If you haven't already done so,
+get the Dart download.
+Unzip the ZIP file, which creates a directory called `dart`.
+
+<!--style here is a hack to remove the arrow, which was only partially showing. -->
+<div style="padding-left: 10px"> 
+  {% include downloads/_dart-editor.html buttonclass="btn btn-primary btn-lg" %}
+</div>
+
+<p class="os-choices" markdown="1">
+  The Dart tools
+  work in recent versions of
+  {% include os-choices.html %}
+</p>
+</div>
+
+### <i class="fa fa-anchor"> </i> Start Dart Editor.
+
+<div class="trydart-step-details" markdown="1">
+Go to the `dart` directory and double-click **DartEditor**.
+
+**Got questions? Having trouble?** Go to the
+[Troubleshooting Dart Editor](/tools/editor/troubleshoot.html) page.
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Get the code.
+
+<div class="trydart-step-details" markdown="1">
+<a href="https://github.com/marycampione/deploy-codelab/archive/master.zip">Download</a>
+the code for the app that you will deploy.
+Unzip the ZIP file,
+which creates a directory called `deploy-codelab-master`.
+</div>
+
+### <i class="fa fa-anchor"> </i> Open deploy-codelab-master.
+
+<div class="trydart-step-details" markdown="1">
+In Dart Editor,
+use **File > Open Existing Folder...**
+to open the `deploy-codelab-master` directory.
+</div>
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+![The files and directories in the deploy-codelab-master directory](images/filesanddirs.png)
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* The `packages` directory, as well as the `pubspec.yaml` and `pubspec.lock` files are
+  related to package dependencies.
+  This project has all the dependencies set up for you.
+  Dart Editor automatically installs the necessary packages.
+
+* The `web` directory contains the Pirate Badge app to deploy.
+
+* The `bin` directory contains the code for a static file server.
+  Heroku requires a server with your project.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+<hr>
+
+##Step 1: Run the app in Dart Editor {#step-one}
+
+Open the code for the Pirate Badge web app and run it locally.
+
+### <i class="fa fa-anchor"> </i> Expand the `web` directory.
+
+<div class="trydart-step-details" markdown="1">
+In Dart Editor, expand the `web` directory
+by clicking the little arrow
+![wee arrow](images/wee-arrow.png) to the left of its name.
+The directory contains four files:
+
+![Files for the app to deploy](images/appfiles.png)
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Two notes about `piratebadge.html`

[Kathy Walrath, 2014/01/16 00:01:29]

Um... What are the two notes?

Even if you're referring to the (three) list items to the side, I'd rename this
section. Maybe "Look at piratebadge.html."

(Note, the title should end with a period.)

[mem, 2014/01/16 22:49:00]

Done.

[mem, 2014/01/16 22:49:00]

Done.

+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Double click on `piratebadge.html` to open it.

[Kathy Walrath, 2014/01/16 00:01:29]

Double click on -> Double-click

(no "on", and use a hyphen)

[mem, 2014/01/16 22:49:00]

Done.

+
+{% prettify html %}
+...
+<head>
+  <meta charset="utf-8">
+  <title>Pirate badge</title>
+  [[highlight]]<meta name="viewport" content="width=device-width, initial-scale=1.0">[[/highlight]]
+  <link rel="stylesheet" href="piratebadge.css">
+</head>
+<body>
+  ...
+  [[highlight]]<script src="packages/browser/dart.js"></script>[[/highlight]]
+  ...
+</body>
+...
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">piratedbadge.dart</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* The <code>&lt;meta&gt;</code> tag sets attributes to
+  make the app scale correctly on mobile devices.
+
+* `dart.js` is a script that determines if the browser supports Dart,
+  and if it does, runs the app natively.
+  If it does not, the script loads the JavaScript version of the app.
+
+* `dart.js` is part of the `browser` pub package.
+
+</div></div>
+
+### <i class="fa fa-anchor"> </i> Run the app.
+
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Click on `piratebadge.html`

[Kathy Walrath, 2014/01/16 00:01:29]

Click on -> Select

[mem, 2014/01/16 22:49:00]

Done.

[mem, 2014/01/16 22:49:00]

Done.

+and click the Run button
+<img src="images/run.png" width="16" height="16"
+     alt="Run button">.
+
+![Click the run button](images/runtheapp.png)
+
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* Dart Editor launches *Dartium*, a special build of Chromium
+  that has the Dart Virtual Machine built in, and loads the app.
+
+</div></div>
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+You should see a text field and a button on the left,

[Kathy Walrath, 2014/01/16 00:01:29]

Describing the image seems weird, plus "as below"... sounds weird. Maybe:

The Pirate Badge app should appear, looking like this:

[mem, 2014/01/16 22:49:00]

Done.

+and a red and white name badge on the right as below.
+
+<iframe class="running-app-frame"
+        style="height:220px;width:550px;"
+        src="/codelabs/darrrt/examples/6-piratebadge_json/piratebadge.html">
+</iframe>
+
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* At this time, Dartium is the only browser that has the Dart VM built in.
+  To run a Dart app in other browsers you need to convert it to JavaScript,
+  which you do in the next step.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div></div>
+
+<hr>
+
+##Step 2: Build the app and run as JavaScript {#step-two}
+
+In this step, you use `pub build` to 
+generate the assets for the app
+and put them into a new directory named `build`.
+In addition to other tasks,
+this process generates minimized JavaScript that
+can be run by any modern browser.
+
+### <i class="fa fa-anchor"> </i> Check out pubspec.yaml
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Double click the `pubspec.yaml` file to open it.

[Kathy Walrath, 2014/01/16 00:01:29]

Double click -> Double-click

[mem, 2014/01/16 22:49:00]

Done.

+
+{% prettify dart %}
+name: deploy_codelab
+description: A sample deployment
+dependencies:
+  [[highlight]]browser: any[[/highlight]]
+  [[highlight]]http_server: any[[/highlight]]
+  [[highlight]]path: any[[/highlight]]
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">pubspec.yaml</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* A `pubspec.yaml` file in a directory identifies the directory
+  and its contents as an application.
+
+* `pubspec.yaml` configures the application
+  and lists the libraries on which the app depends.
+  The three libraries needed by this app are all hosted on
+  [pub.dartlang.org](https://pub.dartlang.org/))
+
+* `any` selects the latest package that matches your SDK.
+
+</div></div>
+
+### <i class="fa fa-anchor"> </i> Look at the packages directory
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+In Dart Editor, expand the `packages` directory.
+
+![Packages contains the code for the package dependencies](images/packagesfiles.png)
+
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+*  The `packages` directory contains the code for all of the dependencies
+   listed in the `pubspec.yaml` file.
+   These are installed automatically by Dart Editor.
+
+* The `browser` package contains the `dart.js` script
+  that checks for native Dart support.
+
+* The `http_server` package implements high-level HTTP server
+  functionality making it easier to provide content through HTTP servers.
+
+* The `path` package provides common path manipulation operations,
+  such as joining, splitting, and normalizing.
+
+*  The `mime` package is included because `http_server` has a dependency on it.

[Kathy Walrath, 2014/01/16 00:01:29]

has a dependency --> depends

[mem, 2014/01/16 22:49:00]

Done.

+
+</div></div>
+
+### <i class="fa fa-anchor"> </i> Run pub build
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Bring up a terminal window,

[Kathy Walrath, 2014/01/16 00:01:29]

I was surprised this was in a terminal window, instead of Dart Editor. Is there
a reason to do it this way?

(I guess I expected to stay in Dart Editor as long as possible, maybe with a
note to the right that you could instead run `pub build` in a terminal window.)

[mem, 2014/01/16 22:49:00]

it wasn't working in Dart Editor.

now it does.

+change into the `deploy-codelab-master` directory,
+and run `pub build`.
+
+{% prettify bash %}
+$ pub build
+Building deploy_codelab.....
+[Info in Dart2JS]:
+Generated deploy_codelab|web/piratebadge.dart.js (98287 characters) in 0:00:06.235360
+Built 8 files!
+$
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">terminal</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+*  The `pub build` command creates a `build` directory that contains
+   everything your app needs to be deployed, including a minimized
+   JavaScript file and the required packages.
+
+</div></div>
+
+### <i class="fa fa-anchor"> </i> Look at the `build` directory
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+The `pub build` command creates a `build` directory
+under `deploy-codelab-master`.
+
+![The build directory contains everything you need to deploy.](images/builddir.png)
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* The `piratebadge.dart.js` file is JavaScript file that has been minimized.

[Kathy Walrath, 2014/01/16 00:01:29]

is -> is a

[mem, 2014/01/16 22:49:00]

Done.

+  When deployed, this file runs in the browser.
+
+* The `packages` directory contains the package dependencies.
+
+* Note that the `build` directory contains no `piratebadge.dart` file.
+  It is not needed to deploy the app to JavaScript.
+
+</div></div>
+
+
+### <i class="fa fa-anchor"> </i> Run the app as JavaScript
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Open the app.
+Select **File > Open File...**
+in a browser such a Firefix or Safari
+and select the
+`deploy-codelab-master/build/piratebadge.html` file.
+
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* The app is running on the local machine using the `file` protocol.
+  To share your app with others, you need to deploy the app to a hosting service,
+  such as Heroku.
+
+</div></div>
+
+<hr>
+
+##Step 3: Code walkthrough of a static server {#step-three}
+

[Kathy Walrath, 2014/01/16 00:01:29]

I'd like some wording here about how you don't need to do this step if you're
deploying to Heroku.

But since they've come this far, why not learn how to run Dart code on a server?

[mem, 2014/01/16 22:49:00]

Done.

+Heroku requires that you provide a static file server with your project.
+One is provided with the sample code for this code lab.
+This step walks through the code for the server,
+which uses some interesting Dart APIs and
+two helpful pub packages.
+
+### <i class="fa fa-anchor"> </i> Setting the path to the app.
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+{% prettify dart %}
+import 'dart:io' show File, HttpServer, [[highlight]]Platform[[/highlight]];
+import 'dart:async' show runZoned;
+import 'package:http_server/http_server.dart' show VirtualDirectory;
+import 'package:path/path.dart' show [[highlight]]join, dirname;[[/highlight]]
+
+void main() {
+  [[highlight]]// Assumes the server lives in bin/ and that `pub build` ran[[/highlight]]
+  [[highlight]]var pathToBuild = join(dirname(Platform.script.toFilePath()),[[/highlight]]
+                    [[highlight]]'..', 'build');[[/highlight]]
+
+  ...
+}
+{% endprettify %}
+</div>
+
+<div class="trydart-filename">basic_http_server.dart</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* This code assumes that `pub build` has run.
+
+* In the next step, you will configure a Heroku buildpack
+  that runs `pub build` when you upload your app.
+
+* This code uses `join` along with `dirname` to
+  build a path to the `build` directory
+  based on the path of the running script.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+### <i class="fa fa-anchor"> </i> Serving `piratebadge.html`.
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+{% prettify dart %}
+import 'dart:io' show [[highlight]]File[[/highlight]], HttpServer, Platform;
+import 'dart:async' show runZoned;
+import 'package:http_server/http_server.dart' show [[highlight]]VirtualDirectory;[[/highlight]]
+import 'package:path/path.dart' show join, dirname;
+
+void main() {
+  ...
+  [[highlight]]var staticFiles = new VirtualDirectory(pathToBuild);[[/highlight]]
+  [[highlight]]staticFiles.allowDirectoryListing = true;[[/highlight]]
+  [[highlight]]staticFiles.directoryHandler = (dir, request) {[[/highlight]]
+    [[highlight]]// Redirect directory-requests to piratebadge.html file.[[/highlight]]
+    [[highlight]]var indexUri = new Uri.file(dir.path).resolve('piratebadge.html');[[/highlight]]
+    [[highlight]]staticFiles.serveFile(new File(indexUri.toFilePath()), request);[[/highlight]]
+  [[highlight]]};[[/highlight]]
+  ...
+}
+{% endprettify %}
+</div>
+
+<div class="trydart-filename">basic_http_server.dart</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* The `VirtualDirectory` class from the `http_server` package
+  provides a high-level interface for serving static files and directory listings to HttpRequests.
+
+* The code sets `allowDirectoryListing` to `true` so that all files
+  from the app can be served [xx I made that up].
+
+* This code redirects directory requests to `piratebadge.html`,
+  which is the main HTML file for this app.
+  This works because there is only one directory.
+
+* The `serveFile` method serves the requested static file
+  to the given HttpRequest object.
+
+* Without the `http_server` class, this code would be longer and more complex,
+  because you would have to use the lower-level `HttpServer`, `HttpRequest`,
+  and `HttpResponse` APIs.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+### <i class="fa fa-anchor"> </i> Using variable port numbers.
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+{% prettify %}
+import 'dart:io' show File, HttpServer, [[highlight]]Platform[[/highlight]];
+import 'dart:async' show runZoned;
+import 'package:http_server/http_server.dart' show VirtualDirectory;
+import 'package:path/path.dart' show join, dirname;
+
+void main() {
+  ...
+  [[highlight]]var portEnv = Platform.environment['PORT'];[[/highlight]]
+  [[highlight]]var port = portEnv == null ? 9999 : int.parse(portEnv);[[/highlight]]
+  ...
+}
+{% endprettify %}
+</div>
+
+<div class="trydart-filename">basic_http_server.dart</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* Heroku uses variable ports. Heroku sets the `$PORT` environment variable
+  with the port number that your app should listen to.
+
+* This code uses the port specified in the `$PORT` environment variable,
+  if present. Otherwise, it uses port 9999.
+
+* The `$PORT` environment variable might not be present if the server is running
+  in a non-Heroku environment.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+
+### <i class="fa fa-anchor"> </i> Using `runZoned()`.
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+
+{% prettify dart %}
+import 'dart:io' show File, HttpServer, Platform;
+import 'dart:async' show [[highlight]]runZoned[[/highlight]];
+import 'package:http_server/http_server.dart' show VirtualDirectory;
+import 'package:path/path.dart' show join, dirname;
+
+void main() {
+  ...
+  [[highlight]]runZoned(() {[[/highlight]]
+     ...
+  [[highlight]]},[[/highlight]]
+  [[highlight]]onError: (e, stackTrace) => print('Oh noes! $e $stackTrace'));[[/highlight]]
+}
+{% endprettify %}
+</div>
+
+<div class="trydart-filename">basic_http_server.dart</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* `runZoned` helps provide stability to your program.
+  It catches exceptions from all call stacks within its bounds,
+  allowing your program to continue running in spite of errors.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+### <i class="fa fa-anchor"> </i> About HTTP requests.
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+
+{% prettify dart %}
+import 'dart:io' show File, [[highlight]]HttpServer[[/highlight]], Platform;
+import 'dart:async' show runZoned;
+import 'package:http_server/http_server.dart' show VirtualDirectory;
+import 'package:path/path.dart' show join, dirname;
+
+void main() {
+  ...
+  runZoned(() {
+    [[highlight]]HttpServer.bind('0.0.0.0', port).then((server) {[[/highlight]]
+      [[highlight]]server.listen(staticFiles.serveRequest);[[/highlight]]
+    [[highlight]]});[[/highlight]]
+  },
+  onError: (e, stackTrace) => print('Oh noes! $e $stackTrace'));
+}
+{% endprettify %}
+</div>
+
+<div class="trydart-filename">basic_http_server.dart</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* Creates an `HttpServer` object which responds to HTTP requests

[Kathy Walrath, 2014/01/16 00:01:29]

Subject is missing here

[mem, 2014/01/16 22:49:00]

Done.

+  for this app.
+
+* The server binds to a host `0.0.0.0`.
+  which is is a special address that is guaranteed to receive from any network socket.
+  If you don't know what specific IP to listen to, you can use 0.0.0.0.
+
+* The server listens for requests and uses the `VirtualDirectory` object
+  named `staticFiles` to handle them.
+
+  {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+<hr>
+
+##Step 4: Deploy to Heroku {#step-four}
+
+In this step, you deploy your server and app to Heroku.
+
+### <i class="fa fa-anchor"> </i> Create a `Procfile`
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+In the `deploy-codelab-master` directory, create a file
+named `Procfile` and add the following line to it.
+
+{% prettify bash %}
+web: ./dart-sdk/bin/dart bin/basic_http_server.dart
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">Procfile</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* A `Procfile` tells Heroku what part of your app can be executed.
+
+* The `Procfile` for this example defines a web process type
+  in which the dart VM runs the static file server.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+
+### <i class="fa fa-anchor"> </i> Commit your changes to your local `deploy-codelab-master` git repo
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+{% prettify bash %}
+$ cd deploy-codelab-master
+$ git init
+$ git add -A .
+$ git commit -am "make it so"
+$
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">terminal</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* First, create a local repo with `git init`.
+
+* Next, add all of the files in `deploy-codelab-master` to it.
+
+* Finally, commit the new files in the `build` directory to your local
+  git repo.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+### <i class="fa fa-anchor"> </i> Create a Heroku app and configure it.
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+<strong>Important:</strong> Replace
+`myfirstdartappforheroku` with something unique.
+
+{% prettify bash %}
+$ heroku create [[highlight]]myfirstdartappforheroku[[/highlight]] -s cedar
+$ heroku labs:enable user-env-compile
+$ heroku config:set DART_SDK_URL=https://github.com/selkhateeb/heroku-vagrant-dart-build/releases/download/latest/dart-sdk.tar
+$ heroku config:add BUILDPACK_URL=https://github.com/igrigorik/heroku-buildpack-dart.git
+$
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">terminal</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* First, create a Heroku app.
+  Provide it with a unique name (NOT `myfirstdartappforheroku`).
+
+* Next, enable `user-env-compile` so that environment variables
+  can be passed to the build script during deploy.
+
+* Official builds of Dart do not support Heroku due to mismatched glibc
+  versions. In this code lab,
+  you'll use the (unsupported) [Vagrant Dart Build](https://github.com/selkhateeb/heroku-vagrant-dart-build),
+  which is a special build of the SDK that is compatible with Heroku.
+
+* A buildpack extends Heroku. The buildpack used here extends Heroku
+  to support Dart apps. The location of the buildpack
+  is specified with the `BUILDPACK_URL`.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+### <i class="fa fa-anchor"> </i> Push your app to Heroku
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+
+{% prettify bash %}
+$ [[highlight]]git push heroku master[[/highlight]]
+Initializing repository, done.
+
+...
+-----> Fetching custom git buildpack... done
+-----> Dart app detected
+...
+Dart VM version: 1.0.0.5_r30248_vagrant (Thu Nov 14 13:43:29 2013) on "linux_x64"
+...
+*** Running pub build
+Building with "pub build"
+Building deploy_codelab....................
+[Info in Dart2JS]:
+Generated deploy_codelab|web/piratebadge.dart.js (97701 characters) in 0:01:19.685114
+Built 6 files!
+...
+-----> Launching... done, v6
+       http://thawing-shore-4708.herokuapp.com deployed to Heroku
+
+To git@heroku.com:thawing-shore-4708.git
+ * [new branch]      master -> master
+$
+{% endprettify %}
+
+
+</div>
+
+<div class="trydart-filename">terminal</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+
+* Heroku uses git for deploying applications.
+
+* Your local git repository is associated with a remote Heroku repository,
+  usually named `heroku`.
+
+* When you push, Heroku runs the buildpack that you specified.
+
+* In addition to other tasks, this buildpack runs `pub build`.
+
+* When the push is finished, the process displays a URL for your app.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+### <i class="fa fa-anchor"> </i> Specify the scale
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+{% prettify bash %}
+$ heroku ps:scale  web=1 
+$
+{% endprettify %}
+
+</div>
+
+<div class="trydart-filename">terminal</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* Scale to one _dyno_, which is a Heroku lightweight container
+  that runs a single user-specified command.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+<hr>
+
+##Step 5: Run the app online and on mobile {#step-five}
+
+Now that your app is deployed, you can run it on the internet
+and on a mobile device.

[Kathy Walrath, 2014/01/16 00:01:29]

This seems to imply that you can't run the app on mobile until you've deployed
to the internet.

Could we run on mobile sooner?

If that's inconvenient, how about just saying "Run the app on the internet" and
include mobile as just one of the ways to run your app.

[mem, 2014/01/16 22:49:00]

I edited to make a new section.

mem

On 2014/01/16 00:01:29, Kathy Walrath wrote:

+
+### <i class="fa fa-anchor"> </i> Test your app
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+<iframe class="running-app-frame"
+        style="height:220px;width:550px;"
+        src="/codelabs/darrrt/examples/6-piratebadge_json/piratebadge.html">
+</iframe>
+
+
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* Use the URL displayed by the previous step to visit your app:
+  `http://myfirstdartappforheroku.herokuapp.com`
+
+</div> </div>
+
+
+### <i class="fa fa-anchor"> </i> Enter the URL in a browser
+
+<div class="row"> <div class="col-md-7" markdown="1">
+
+<div class="trydart-step-details" markdown="1">
+
+<img src="images/calebthebrave.png" height="400">
+
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* Use the URL from the previous step to load the app
+  into a browser on your mobile device.
+  `http://myfirstdartappforheroku.herokuapp.com`
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+
+
+<div class="trydart-step-details" markdown="1">
+</div>
+
+
+##Resources {#resources}
+
+For more information about the tools and libraries used
+in this code lab, check out these resources.
+
+<div class="trydart-step-details" markdown="1">
+
+#### SDK libraries, classes, and functions
+
+* The API docs for the
+<a href="https://api.dartlang.org/dart_io/File.html" target="_blank">File</a>,
+<a href="https://api.dartlang.org/dart_io/HttpServer.html" target="_blank">HttpServer</a>, and
+<a href="https://api.dartlang.org/dart_io/Platform.html" target="_blank">Platform</a>
+classes from the
+<a href="https://api.dartlang.org/dart_io.html" target="_blank">dart:io</a>
+library.
+* The API docs for the
+<a href="https://api.dartlang.org/dart_async.html#runZoned" target="_blank">runZoned()</a>
+function from the
+<a href="https://api.dartlang.org/dart_async.html" target="_blank">dart:async</a> library.
+
+#### Classes and functions from pub packages
+
+* The code for the
+<a href="https://pub.dartlang.org/packages/http_server">http_server pub package</a>,
+in particular 
+<a href="https://api.dartlang.org/http_server/VirtualDirectory.html" target="_blank">VirtualDirectory</a>
+class.
+* The code for the
+<a href="http://pub.dartlang.org/packages/path">path pub package</a>,
+in particular the
+<a href="https://api.dartlang.org/path.html#join" target="_blank">join()</a>
+and
+<a href="https://api.dartlang.org/path.html#dirname" target="_blank">dirname()</a>
+functions.
+
+#### Heroku tools
+
+* The <a href="https://devcenter.heroku.com/">Heroku Dev Center</a>
+* The Heroku-compatible build of the Dart SDK:
+[heroku-vagrant-dart-build](https://github.com/selkhateeb/heroku-vagrant-dart-build)
+* The Heroku buildpack for Dart:
+[heroku-buildpack-dart](https://github.com/igrigorik/heroku-buildpack-dart)
+
+#### The example code
+
+* The [deploy-codelab-master](https://github.com/marycampione/deploy-codelab)
+example code
+
+</div>
+
+##What next? {#what-next}
+
+Now that your app is deployed for the world to use.

[Kathy Walrath, 2014/01/16 00:01:29]

sentence fragment

[mem, 2014/01/16 22:49:00]

Done.

+What do you do now?
+Here are some suggestions.
+
+### <i class="fa fa-anchor"> </i> Share your app with the world!
+
+<div class="trydart-step-details" markdown="1">
+
+Share your Heroku URL with your followers and circles.
+
+* <a href="https://twitter.com/share" class="twitter-share-button" data-text="Arrr! I've deployed me app. http://dartlang.org/codelab/deploy/" data-count="none" data-hashtags="dartlang">Tweet</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+{% comment %}
+* <p class="share-button twitter">
+<a href="https://twitter.com/share"
+   class="twitter-share-button external-link"
+   data-count="none"
+   data-text="Arrr! I've deployed me app. http://dartlang.org/codelab/deploy/"
+   data-hashtags="dartlang">Tweet</a> </p>
+{% endcomment %}
+
+* <p>
+<script src="https://apis.google.com/js/plusone.js"></script>
+<g:plus action="share"></g:plus> </p>
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Jump to another ship.

[Kathy Walrath, 2014/01/16 00:01:29]

funny!

[mem, 2014/01/16 22:49:00]

thx :-)

+
+<div class="trydart-step-details" markdown="1">
+
+* Write the pirate web app in [Code Lab: Ready the Pirates](/codelabs/darrrt/).

[Kathy Walrath, 2014/01/16 00:01:29]

This seems weird, since it was kind of a prerequisite. (Also, the title
changed.) Maybe:

If you never went through the [Pirate Convention] code lab, do it now. 

[mem, 2014/01/16 22:49:00]

Done.

+* Visit [Dart by Example](/dart-by-example/) for a rich set of targeted Dart examples.

[Kathy Walrath, 2014/01/16 00:01:29]

smacks of buzzwords: rich! targeted!

Be more specific.

[mem, 2014/01/16 22:49:00]

Done.

+* Play with some [samples](/samples/).
+* Try the [tutorials](/docs/tutorials/).
+* Go write some awesome code.
+
+</div>
+
+{% comment %}
+### <i class="fa fa-anchor"> </i> Run the app on a mobile device
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+Open `build/piratebadge.html` using **File > Open File...**.
+
+  <img src="images/mobile_better.png" height="400">
+</div>
+
+</div> <div class="col-md-5" markdown="1">
+
+<i class="fa fa-key key-header"> </i> <strong> Key Information </strong>
+
+* The &lt;head&gt; section of the HTML file contains this line,
+  `&;lt;<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">&gt;',
+  which controls the size and scalable of the app helping it to fill the screen
+  of different sized mobile devices.
+
+ * The CSS code contains a small adjustment to the pirate badge's padding
+   to align it to the left when it floats under the widgets.
+
+* Use the URL from the previous step to load the app
+  into a browser on your mobile device.
+  `http://myfirstdartappforheroku.herokuapp.com`
+
+* The `dart.js` script included in `piratebadge.html` determines that the browser
+  does not support Dart and runs the JavaScript file instead.
+
+* You now know that the `pub build` process is working and that your app
+  runs successfully as JavaScript.
+
+</div></div>
+
+
+{% endcomment %}