Enyo error: "Uncaught referenceError: App is not defined"
<p>I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components. </p>

<p>app.js (in source folder):</p>

<pre><code>enyo.kind({
name: "App",
kind: "FittableRows", 
classes: "enyo-fit enyo-unselectable",
components: [
      {
      kind: "onyx.Toolbar",
      layoutKind:"FittableColumnsLayout",
      components: [
          {
              kind:onyx.Button,
              style:"width:80px;background:green;",
              ontap:"handleBtnBack", 
              content:"Back"
          },
          {
              content:"Header",
              style:"text-align:center;",
              fit:true
          },
          {
              kind:onyx.Button,
              style:"width:80px;background:red;",
              ontap:"handleBtnNext",
              content:"Next"
          }
      ]
  },
  {
      kind: "Scroller", 
      horizontal:"hidden", 
      touch:true,
      fit:true,
      thumb:true, 
      components:[
         {
              tag:"h1",
              //This is how we insert css class.
              classes:"padding15px",
              content:"This is content area...Hello World!!!"
          }
      ]              
  },
  {
        kind: "onyx.Toolbar",
        // The footer
        layoutKind:"FittableColumnsLayout",
        components:[
            {
                  kind:"onyx.Button",
                  content:"Go Next Page",
                  ontap:"handleBtnNextPage",
                  fit:true   
            }
        ]
  }
],
create: function(){
    this.inherited(arguments);
    console.log("App is created in memory");
},
rendered : function(){
    this.inherited(arguments);
    console.log("App is created in rendered into DOM");
},
    handleBtnNextPage : function(inSender,inEvent){
        new Page2().renderInto(document.body);
    },
    handleBtnNext: function(inSender,inEvent){
        new Page2().renderInto(document.body);
    },
    handleBtnBack: function(inSender,inEvent){
        //For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself.
        alert("Back Button");
    }
});
</code></pre>

<p>package.js (in source folder):</p>

<pre><code>enyo.depends(
// Layout library
"$lib/layout",
// Onyx UI library
"$lib/onyx",    // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less
// CSS/LESS style files
"../assets/css/app.css",
// Include our default entry point
"App.js",
"Page2.js"
);
</code></pre>

<p>index.html (in root folder):</p>

<pre><code> &lt;!--My Copy--&gt;

   &lt;!DOCTYPE html&gt;
   &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;IsGoodStuff.com Tutorial #2&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;

        &lt;link rel="shortcut icon" href="assets/favicon.ico"/&gt;

        &lt;script src="enyo/enyo.js" type="text/javascript"&gt;&lt;/script&gt;

        &lt;!-- --&gt;
        &lt;script src="package.js" type="text/javascript"&gt; &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;script type="text/javascript"&gt;
        new App().renderInto(document.body);

        &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
</code></pre>