Draft of new codelab for review

src/site/codelabs/deploy/index.markdown

+---
+layout: tutorial
+title: "Code Lab: Deploy the Pirates"
+description: "Get it out there."

[sethladd, 2014/01/14 22:44:06]

what's better than "it" ? think SEO :)

[mem, 2014/01/15 23:22:51]

Done.

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

[sethladd, 2014/01/14 22:44:06]

global: can we add a diagram showing the pieces? the app, the build dir, the
HTTP server, running "in the cloud" ?

[sethladd, 2014/01/14 22:44:06]

suggestion: show how to use dev tools to open the local app on your phone

[mem, 2014/01/15 23:22:51]

Done.

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

Done.

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

Done.

+
+In this code lab,
+you learn to build an existing app

[sethladd, 2014/01/14 22:44:06]

you also learn how to build a basic http server

[mem, 2014/01/15 23:22:51]

Done.

+and deploy it to 
+<a href="https://devcenter.heroku.com/">Heroku</a>.
+Heroku is just one of many options

[sethladd, 2014/01/14 22:44:06]

I wonder if we should define what heroku is.

[mem, 2014/01/15 23:22:51]

Done.

+you could choose for deploying an app.
+Other options include
+Google App Engine and Amazon Web Services.
+
+This code lab assumes that you have written and run
+a Dart web app before.

[sethladd, 2014/01/14 22:44:06]

link to step 1?

[mem, 2014/01/15 23:22:51]

Done.

+
+{% comment %}
+<div class="trydart-note" markdown="1">
+
+<strong>Note:</strong> You will be deploying
+the Pirate Badge app from the
+[Ready the Pirates](/codelabs/darrrt/) code lab.
+You can do this code lab successfully without doing
+the previous, but familiarizing yourself with
+the app's files and code could be helpful.
+
+</div>
+{% endcomment %}
+
+<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)
+* [Step 4: Deploy to Heroku](#step-four)
+* [Step 5: Run the app online and mobile](#step-five)
+* [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.
+  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`
+
+<div class="row"> <div class="col-md-7">
+
+<div class="trydart-step-details" markdown="1">
+
+Double click on `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">
+
+Click on `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)
+
+</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,
+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.
+
+{% 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` means any version of the package will do.

[sethladd, 2014/01/14 22:44:06]

clarify that it also means the latest package that matches your SDK?

[mem, 2014/01/15 23:22:51]

Done.

[mem, 2014/01/15 23:22:51]

Done.

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

[sethladd, 2014/01/14 22:44:06]

underscore. http_server

[mem, 2014/01/15 23:22:51]

Done.

+  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.
+
+</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!
+$
+{% 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.
+  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">
+
+Using a browser such a Firefix or Safari,
+open `deploy-codelab-master/build/piratebadge.html` using **File > Open File...**.

[sethladd, 2014/01/14 22:44:06]

Do you mean to use the OS's file browser ? or the browser's File > Open

[mem, 2014/01/15 23:22:51]

Done.

+
+</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}
+
+Heroku requires that you provide a static file server with your project.
+The one provided with the Pirate Badge app
+originates from the Heroku buildpack written by Ilya Grigorik.

[sethladd, 2014/01/14 22:44:06]

too much info?

[mem, 2014/01/15 23:22:51]

Done.

+
+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
+  for this app.
+
+* The server binds to a host `0.0.0.0`, which designates an unknown target.

[sethladd, 2014/01/14 22:44:06]

0.0.0.0 is INADDR_ANY, 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

[mem, 2014/01/15 23:22:51]

Done.

+  Heroku provides a host later.
+
+* 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 environment variables
+  so that the port number can be passed to your app.

[sethladd, 2014/01/14 22:44:06]

I think user-env-compile only is used to pass env variables to the build script
during deploy. It's not used for $PORT

[mem, 2014/01/15 23:22:51]

Done.

+
+* You must use a special build of the Dart SDK that is compatible with Heroku.
+  This special build is at the URL specified by `DART_SDK_URL`.

[sethladd, 2014/01/14 22:44:06]

Define what "special" means. Also, disclaimer that we are pointing to an
unsupported build.

[mem, 2014/01/15 23:22:51]

Done.

+
+* 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`.
+
+  {% 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.
+
+### <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/mobile_better.png" height="400">

[sethladd, 2014/01/14 22:44:06]

this is an iOS screenshot in an android phone.

[mem, 2014/01/15 23:22:51]

Done.

+
+</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.
+
+* <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/"

[sethladd, 2014/01/14 22:44:06]

I don't know if this is working. I clicked it but the text didn't show up

[mem, 2014/01/15 23:22:51]

Done.

+   data-hashtags="dartlang">Tweet</a> </p>
+
+* <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">
+
+* Write the pirate web app in [Code Lab: Ready the Pirates](/codelabs/darrrt/).
+* Visit [Dart by Example](/dart-by-example/) for a rich set of targeted Dart examples.
+* 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 %}