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 write a web app,
+you need to put it on the internet so that people can use it.

[sethladd, 2014/01/17 00:07:23]

s/internet/web

[mem, 2014/01/17 21:33:59]

Done.

+
+In this code lab,
+you learn to deploy an app to the internet using the

[sethladd, 2014/01/17 00:07:23]

how about, "You will learn how to build a Dart app for deployment to web. You
will then learn how to serve that app so browsers can access it. Finally, you
will learn one way to deploy the app to the web."

In other words, can you descrive what they will learn as shown in your diagram?

[mem, 2014/01/17 21:33:59]

Done.

+<a href="https://devcenter.heroku.com/">Heroku</a>
+hosting service.
+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

[sethladd, 2014/01/17 00:07:23]

In this code lab leads two paragraphs

[mem, 2014/01/17 21:33:59]

Done.

+[Pirate Convention](/codelabs/darrrt/) code lab.
+By doing so, you learn how to build the app for deployment,
+how to write a basic static file server,
+how to inspect, test, and debug your app on a mobile device using DevTools,
+and finally, how to deploy to Heroku.
+
+![The process for deploying a Web app](images/process.png)
+
+This code lab assumes that you have written and run
+a Dart web app before.
+If you have not, consider doing the
+[Pirate Convention](/codelabs/darrrt/) code lab.
+
+<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: Build a static server](#step-three)
+* [Step 4: Inspect your app on a mobile device](#step-four)
+* [Step 5: Deploy to Heroku](#step-five)
+* [Step 6: Run the app online and mobile](#step-six)
+* [Resources](#resources)
+* [What next?](#what-next)
+
+</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.
+  You can use the server for testing and debugging your app
+  on your local machine and on mobile.
+  Also 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}

[sethladd, 2014/01/17 00:07:23]

Is it running in Dart Editor or Dartium?

[mem, 2014/01/17 21:33:59]

Done.

+
+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> Look at `piratebadge.html`.
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Double-click `piratebadge.html` to open it.
+
+{% 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">
+
+Select `piratebadge.html`
+and click the Run button
+<img src="images/run.png" width="16" height="16"
+     alt="Run button">.
+
+![Click the run button](images/runtheapp.png)

[Shams, 2014/01/17 17:23:09]

It failed to run. I had to manually do a "pub get" .

[mem, 2014/01/17 21:33:59]

Done.

+
+</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">
+
+
+The Pirage Badge app should appear, looking like this:
+
+<iframe class="running-app-frame"
+        style="height:220px;width:550px;"
+        src="/codelabs/darrrt/examples/6-piratebadge_json/piratebadge.html">
+</iframe>
+
+
+</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

[Shams, 2014/01/17 17:23:09]

minimized JavaScript -> minified JavaScript

[mem, 2014/01/17 21:33:59]

Done.

+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.
+
+{% 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` depends on it.
+
+</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,
+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!

[Shams, 2014/01/17 17:23:09]

Minor nit. For me it said it built 10 files.

[mem, 2014/01/17 21:33:59]

Done.

+$
+{% 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 a JavaScript file that has been minimized.
+  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: Build a static server {#step-three}

[Shams, 2014/01/17 17:23:09]

This step confused me. You actually provide the static server (in
bin/basic_http_server.dart) and this step walks through the code. Maybe add some
intro text that says. You need to build a static server, but we provided one for
you. Here is a walkthrough of the code.

Or something.  :)

Otherwise, I think I am supposed to be actively doing something here.

[mem, 2014/01/17 21:33:59]

Done.

+
+Heroku requires that you provide a static file server with your project.

[sethladd, 2014/01/17 00:07:23]

Can we lead with describing what a static file server is?  That is, why am I
building this at all?  (not because Heroku requires it, which is true, but
generally what role does this play in the greater scheme of things?)

[mem, 2014/01/17 21:33:59]

Done.

+Other hosting services do not, so you do not need to do this step
+if you're deploying to a different service.
+However, since you've come this far, why not learn how to 
+run Dart code on a server?
+
+A server 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>
+
+* `HttpServer.bind()` creates an HTTP server, which responds to HTTP requests
+  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.
+
+&nbsp; {% comment %} non-breaking space required for bootstrap/markdown bogosity {% endcomment %}
+
+</div> </div>
+
+<hr>
+
+##Step 4: Inspect your app on a mobile device {#step-four}

[Shams, 2014/01/17 17:23:09]

As you know, this step didn't succeed for me using your loaner Nexus 4.

Some of the info in this step applies specifically to an Android phone. Some of
it applies to everyone (such as starting the server). If you could separate the
two, that would be better. Many people do not own Android phones and will skip
this step entirely.

[mem, 2014/01/17 21:33:59]

Done.

+
+Before deploying your app,
+you can use the Chrome DevTools to check, debug, and modify
+your app on a mobile device.
+DevTools can debug Android devices natively
+and other devices using
+[Mobile Emulation](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation).
+
+### <i class="fa fa-anchor"> </i> Set up your computer and device
+
+<div class="trydart-step-details" markdown="1">
+
+Follow the instructions at
+[Remote Debugging Chrome on Android](https://developers.google.com/chrome-developer-tools/docs/remote-debugging)
+to set up your device, Chrome, and your computer.
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Run the server
+
+<div class="trydart-step-details" markdown="1">
+
+Run the server you wrote in [Step 3](#step-three).
+In Dart Editor, select `bin/basic_http_server.dart` and
+and click the Run button
+<img src="images/run.png" width="16" height="16"
+     alt="Run button">.
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Run the app
+
+<div class="trydart-step-details" markdown="1">
+
+On your computer, bring up a new window or tab in Chrome and type `0.0.0.0:9999`
+in the URL text field. Your app displays on the page.
+
+On your mobile device, bring up Chrome and find the 
+app's page in the list of windows and tabs.
+Select it.
+
+![Your tab appears under the Chrome heading](images/tabslist.png)

[sethladd, 2014/01/17 00:07:23]

this screenshot is too small, I can't see what you're pointing to :(

[mem, 2014/01/17 21:33:59]

Done.

+
+Your app appears on the screen.
+
+<img src="images/calebthebrave.png" height="400">
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Bring up Devices page
+
+<div class="trydart-step-details" markdown="1">
+
+In Chrome on your compouter,

[sethladd, 2014/01/17 00:07:23]

spelling

[mem, 2014/01/17 21:33:59]

Done.

+click the Android icon at the right side of the window

[Shams, 2014/01/17 17:23:09]

Maybe mention that the Android only appears if you are connected to the mobile
device.

[mem, 2014/01/17 21:33:59]

Done.

+and select **View Inspection Targets**.
+
+![Click the Android icon](images/androidicon.png)
+
+Your tab appears under the **Chrome** heading.
+
+![Your tab appears under the Chrome heading](images/tabappears.png)
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Bring up DevTools for the app
+
+<div class="trydart-step-details" markdown="1">
+
+On your computer, click `inspect` under the tab for your app.
+A DevTools window appears that is attached to your app running
+on the mobile device.
+
+
+![Your tab appears under the Chrome heading](images/devtoolsforphone.png)
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Experiment with changing the app
+
+<div class="trydart-step-details" markdown="1">
+
+Experiment by modifying the font size or color.
+The change happens instantly on your mobile device.
+
+</div>
+
+### <i class="fa fa-anchor"> </i> Save your changes
+
+<div class="trydart-step-details" markdown="1">
+
+If you want to, make any permanent changes to your source code and build the app again.
+
+</div>
+
+
+##Step 5: Deploy to Heroku {#step-five}
+
+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

[Shams, 2014/01/17 17:23:09]

This step surprised me. I didn't know I would have to create a Git repo. Maybe
introduce it a bit by saying that Heroku requires that you submit an app using a
Git repo. (If that is true, of course.)

[mem, 2014/01/17 21:33:59]

Done.

+
+<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

[Shams, 2014/01/17 17:23:09]

Having never used Heroku before, this didn't work. Maybe mention on the side
that you need to download the Heroku tools package and create a login.

[mem, 2014/01/17 21:33:59]

Done.

+$ 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 6: Run the app online and on mobile {#step-six}

[sethladd, 2014/01/17 00:07:23]

what does "online and on mobile" mean?

[mem, 2014/01/17 21:33:59]

Done.

+
+Now that your app is deployed, you can run it on the internet
+and on a mobile device.
+
+### <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,
+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.
+
+<div class="trydart-step-details" markdown="1">
+
+* If you never went through the [Pirate Convention](/codelabs/darrrt/) code lab, do it now.
+* For more code related to command-line apps, such as servers,
+  visit [Dart by Example](/dart-by-example/).
+* 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 %}