Angular app in Azure displays raw js text - node.js

Question

I've got an angular app that runs fine locally. I can run http-server and access the page. Now I am trying to move it to run in Azure. When I access the sitename.azurewebsites.net URL all I see is the actual text of my app.js file. Its not rendering as if it were on a nodejs server.
Here is the local directory structure. From the command line I cd to the app folder (app.js is in app\scripts folder) and use http-server to start it up. I see the angular app rendered as expected.
In Azure, I have web.config files that points to app/scripts/app.js file. When I access the sitename.azurewebsites.net URL, instead of the angular app running, I just get the app.js file served up to me as text. Like so:
Not sure what Azure setting is missing to let it know to run this as an Angular app. In the app Service I have an entry under Application Settings for Node:
WEBSITE_NODE_DEFAULT_VERSION 6.9.1
Here is the directory structure in Azure:
Here is the web config:
<?xml version="1.0" encoding="utf-8"?>
<!--
This configuration file is required if iisnode is used to run node processes behind
IIS or IIS Express. For more information, visit:
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
<configuration>
<system.webServer>
<!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
<webSocket enabled="false" />
<handlers>
<!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
<add name="iisnode" path="app\scripts\app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
<rules>
<!-- Do not interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="app\scripts\^app.js\/debug[\/]?" />
</rule>
<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>
<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="app\scripts\app.js"/>
</rule>
</rules>
</rewrite>
<!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
<security>
<requestFiltering>
<hiddenSegments>
<remove segment="bin"/>
</hiddenSegments>
</requestFiltering>
</security>
<!-- Make sure error responses are left untouched -->
<httpErrors existingResponse="PassThrough" />
</system.webServer>
</configuration>

Answer 1

Well there were a few issues here but what I discovered :
the contents of the dist folder are all that was needed - I don't even have the web.config file anymore
the dist did not generate all files. The /scripts/vendor*.js file that was generated was empty. I fixed that by following suggestions here: Grunt build not populate scripts.js with bower_components
Updated the App Service-> Application Settings->Virtual applications and directories to point to site\wwwroot\dist - this probably isn't needed, I copied the dist folder instead of just it's contents. If I put the contents at the wwwroot level I probably would need this change.