title: Default documents not serving on node web app hosted on Azure
body: <p>I've set up an angular4/node app on my local machine and I can <code>ng serve</code> and <code>npm start</code> the app just fine. I've created a web app on azure and used <a href="https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/" rel="nofollow noreferrer">John Papa's</a> guide to deploy it to azure. However; when I visit the site with chrome my index.html is not served up and I get a 404.<br>
  I've even eliminated all my documents under <code>Application Settings -&gt; Default Documents</code> to only list <code>index.html</code> and nothing else.  </p>
  
  <p><strong>However</strong>; when I visit <code>myapp.azurewebsites.com/index.html</code> the site is rendered. When I visit <code>myapp.azurewebsites.com</code> the site is not.  </p>
  
  <p>What am I missing?</p>
  
  <h1>server/index.js</h1>
  
  <pre><code>const express = require('express');
  const path = require('path');
  
  const root = './dist';
  const app = express();
  
  app.use(express.static(root));
  console.log(`server ${root}`);
  app.get('*', (req, res) =&gt; {
      res.sendFile(`index.html`);
  });
  
  const port = process.env.PORT || '3000';
  app.listen(port, () =&gt; console.log(`API running on localhost:${port}`));
  </code></pre>
  
  <h1>client/app/app.module.ts</h1>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './app.component';
  
  import { routes } from './app.routing';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          HttpModule,
  
          RouterModule.forRoot(routes)
      ],
      providers: [],
      bootstrap: [AppComponent]
      })
  export class AppModule { }
  </code></pre>
  
  <h1>client/app/app.routing.ts</h1>
  
  <pre><code>import { Route } from '@angular/router';
  
  import { AppComponent } from './app.component';
  
  export const routes: Route[] = [
      { path: '', component: AppComponent }
  ];
  </code></pre>
  
  <h3>web.config</h3>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!--
       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
  --&gt;
  
  &lt;configuration&gt;
    &lt;system.webServer&gt;
      &lt;!-- 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 --&gt;
      &lt;webSocket enabled="false" /&gt;
      &lt;handlers&gt;
        &lt;!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module --&gt;
        &lt;add name="iisnode" path="index.js" verb="*" modules="iisnode"/&gt;
      &lt;/handlers&gt;
      &lt;rewrite&gt;
        &lt;rules&gt;
          &lt;!-- Do not interfere with requests for node-inspector debugging --&gt;
          &lt;rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true"&gt;
            &lt;match url="^index.js\/debug[\/]?" /&gt;
          &lt;/rule&gt;
  
          &lt;!-- First we consider whether the incoming URL matches a physical file in the /public folder --&gt;
          &lt;rule name="StaticContent"&gt;
            &lt;action type="Rewrite" url="public{REQUEST_URI}"/&gt;
          &lt;/rule&gt;
  
          &lt;!-- All other URLs are mapped to the node.js site entry point --&gt;
          &lt;rule name="DynamicContent"&gt;
            &lt;conditions&gt;
              &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/&gt;
            &lt;/conditions&gt;
            &lt;action type="Rewrite" url="index.js"/&gt;
          &lt;/rule&gt;
        &lt;/rules&gt;
      &lt;/rewrite&gt;
  
      &lt;!-- 'bin' directory has no special meaning in node.js and apps can be placed in it --&gt;
      &lt;security&gt;
        &lt;requestFiltering&gt;
          &lt;hiddenSegments&gt;
            &lt;remove segment="bin"/&gt;
          &lt;/hiddenSegments&gt;
        &lt;/requestFiltering&gt;
      &lt;/security&gt;
  
      &lt;!-- Make sure error responses are left untouched --&gt;
      &lt;httpErrors existingResponse="PassThrough" /&gt;
  
      &lt;!--
        You can control how Node is hosted within IIS using the following options:
          * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
          * node_env: will be propagated to node as NODE_ENV environment variable
          * debuggingEnabled - controls whether the built-in debugger is enabled
  
        See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
      --&gt;
      &lt;!--&lt;iisnode watchedFiles="web.config;*.js"/&gt;--&gt;
    &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>