Cannot GET index.html Azure Linux Web App

Question

We created a Linux Web App in Microsoft Azure. The application is static written with React (html and Javascript). We copied the code into the wwwroot folder, but the application only showing only hostingstart.html and when we try to get page index.html we have this error: Cannot GET /index.html

We tried with a sample of Azure in GitHub (https://github.com/Azure-Samples/html-docs-hello-world) but the error is the same. The url is this: https://consoleadmin.azurewebsites.net/index.html

Last week the application was running correctly.

We forget to do something?

Answer 1

MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.

I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question. While the accepted answer is a nice workaround (but requires more work than just adding the index.js file), there's something a simpler than that.

You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:

1. The web app by default points to opt/startup/hostingstart.html

2. It also puts a hostingstart.html in home/site/wwwroot

When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.

So how to change the default pointer? It's simpler than it looks:

Go to Configuration tab on your web app and add the following code to startup script:

pm2 serve /home/site/wwwroot --no-daemon

If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:

pm2 serve /home/site/wwwroot --no-daemon --spa

This will tell the web app to serve wwwroot folder. And that's it.

Image for reference: Screenshot explaination

PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.

Answer 2

Ok you are gonna love this. This happened to me today also. Same exact thing. I am pretty sure the azure team flipped a switch somewhere and we fell through a crack.

I found this obscure answer with no votes and it did the trick (with a little extra finagling)

BONUS! this also fixed my router issues I was having only on the deployed site (not local):

Credit: @stormwild: Default documents not serving on node web app hosted on Azure

From @stormwild's post see here: https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome

Steps:

1. Go to your azure portal, select your app service and launch ssh
2. 
3. In ssh terminal, navigate via command line to /home/site/wwwroot

4. create index.js there with the following code:

   var express = require('express');
   
   var server = express();
   
   var options = {
   
   index: 'index.html'
   
   };
   
   server.use('/', express.static('/home/site/wwwroot', options));
   
   server.listen(process.env.PORT);
   

5. NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup

6. Be sure to restart your app service if it doesn't do so automagically

Answer 3

A workaround, I changed the webapp stack to PHP 7

Answer 4

Another solution would be to add a file called ecoysystem.config.js right next to your index.html file.

module.exports = {
  apps: [
    {
      script: "npx serve -s"
    }
  ]
};

This will tell pm2 to associate all requests to index.html as your app service starts up.

Very helpful information here: https://burkeholland.github.io/posts/static-site-azure/