title: Why is my browser downloads an index.html instead of to show it?
body: <p>I'm trying to set up a <strong>Nginx</strong> web server for serving a SPA based on <strong>AngularJS</strong> with single entry point at <code>index.html</code> file.</p>
  
  <h3>Here is my configuration:</h3>
  
  <pre><code>server {
      server_name aislc.dev;
      root        /var/www/aislc/dist;
  
      # API backend
      location ~ ^/api/(.*)$ {
          fastcgi_pass   unix:/var/run/php5-fpm.sock;
          include        /etc/nginx/fastcgi_params;
          fastcgi_param  SCRIPT_FILENAME /var/www/aislc-api/index.php;
      }
  
      location / {
          try_files $uri /index.html;
      }
  
      types {
          text/cache-manifest appcache;
          application/json    js.map;
      }
  }
  </code></pre>
  
  <p>When I try to open the site, the browser downloads a file with an unknown name and extension in which the contents of the `index.html</p>
  
  <h2>Contents of <code>index.html</code>:</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;link href="app.css" rel="stylesheet"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Loading...&lt;/p&gt;
  
      &lt;script src="app.js" type="text/javascript" async&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>Chrome screenshot</h3>
  
  <p><img src="https://i.stack.imgur.com/f6ddf.png" alt="chrome"></p>
  
  <h3>Firefox screenshot</h3>
  
  <p><img src="https://i.stack.imgur.com/t0CGf.png" alt="firefox"></p>
  
  <h1>Where am I wrong?</h1>