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 applic

Answer 1

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/

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
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

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.