Azure App service won't display my website

Precious Seun 20 Reputation points
2024-04-27T20:07:22.2233333+00:00

I have deployed my application using Azure DevOps. I configured my pipeline to install Node.js, Npm install, Copy files and Publish artifact. The release is created from same pipeline and released to App service. When i visit the App service website link, it still displays the Microsoft default web page and not my application. I have checked using kudu and can verify that my application files are loaded to the resource including the build folder. It seems the App service won't just read the index.html in the build folder and render the application.

Kindly help.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,949 questions
0 comments No comments
{count} votes

Accepted answer
  1. Olufunso Adewumi 305 Reputation points Microsoft Employee
    2024-04-27T20:16:03.8366667+00:00

    It appears that your Azure App Service is not set up to correctly serve your application’s index.html file as the default document. This issue is common and can be fixed with a few steps. Here are some suggestions based on typical solutions:

    1. Express Server Configuration: If you are using Node.js, create an index.js file with the code below to serve your index.html:

    JavaScript

    var
    

    AI-generated code. Review and use carefully. More info on FAQ.

    Add this file and restart your app service.

    1. PM2 Process Manager: You can also use PM2, a process manager for Node.js applications. Add the following startup command for your app:
    pm2 serve /home/site/wwwroot --no-daemon
    

    This command will serve the index.html from the wwwroot directory. Restart the app service after adding this command.

    1. Configuration in Azure Portal: The issue might also be due to Azure configuration. In the Configuration tab of your web app, add the following code to the startup script:
    pm2 serve /home/site/wwwroot --no-daemon --spa
    

    The --spa flag is useful if your application is a single-page application and you are having issues with routing.

    Ensure you apply these changes and restart your Azure App Service for the new settings to take effect. If problems persist, check that the root URL is correctly mapped to serve your index.html file in the Azure App Service configuration.It appears that your Azure App Service is not set up to correctly serve your application’s index.html file as the default document. This issue is common and can be fixed with a few steps. Here are some suggestions based on typical solutions:

    1. Express Server Configuration: If you are using Node.js, create an index.js file with the code below to serve your index.html:

    JavaScript

    var
    

    AI-generated code. Review and use carefully. More info on FAQ.

    Add this file and restart your app service.

    1. PM2 Process Manager: You can also use PM2, a process manager for Node.js applications. Add the following startup command for your app:
    pm2 serve /home/site/wwwroot --no-daemon
    

    This command will serve the index.html from the wwwroot directory. Restart the app service after adding this command.

    1. Configuration in Azure Portal: The issue might also be due to Azure configuration. In the Configuration tab of your web app, add the following code to the startup script:
    pm2 serve /home/site/wwwroot --no-daemon --spa
    

    The --spa flag is useful if your application is a single-page application and you are having issues with routing.

    Ensure you apply these changes and restart your Azure App Service for the new settings to take effect. If problems persist, check that the root URL is correctly mapped to serve your index.html file in the Azure App Service configuration.

    0 comments No comments

0 additional answers

Sort by: Most helpful