How to fix the container error while creating a azure web app for angular appilcation from github

Question

I was deploying a angular code which is in github to create an endpoint in azure web app. I was

I am not using any docker file

Answer 1

Hi Srikanth Adepu IN010104981-MSP01,

Thanks for reaching out to Microsoft Q&A.

The error in the log shows that the container for the Azure Web App is failing to start due to a lack of response on port 8080. This is common when deploying applications that don’t explicitly listen on the port Azure expects (usually 8080). Here are steps you can try to resolve this:

Steps to Resolve

1. Ensure Angular App Configuration for Static Web App: Since you’re deploying an Angular app, you don’t need a Docker container. Azure provides services like Azure Static Web Apps or App Service for static site hosting for Angular or other frontend applications. Consider using Azure Static Web Apps, which is optimized for Angular and GitHub deployments without needing a Docker configuration.
2. Check package.json Scripts: If you're using a Node server to serve your Angular app, ensure that the server listens on the expected port (8080). In package.json, check your start script and modify it to: "start": "node server.js" In server.js, set up the server to listen on process.env.PORT:

      const port = process.env.PORT || 8080;
      app.listen(port, () => {
          console.log(`Server is running on port ${port}`);
      });
      
      
   

3. Update Azure App Settings (If Necessary):
   • Go to Azure Portal > Your Web App > Configuration > Application Settings.
   • Ensure there’s an environment variable PORT set to 8080. This tells Azure which port the app should listen on.
   1. Use a Node.js Startup Command (Only if necessary): If you’re not using Docker, Azure App Service might still expect a specific startup command. Ensure there’s a correct Node.js startup command in the Startup Command field under Configuration > General Settings if necessary.
   2. Enable Logging:
      • Go to Azure Portal > Your Web App > Diagnostics settings and enable application logging. This will help you capture additional details that may explain why the container is not responding as expected.
   3. Redeploy: After making these changes, redeploy your application from GitHub.

Consider Azure Static Web Apps for Angular

If you only need a frontend, Azure Static Web Apps might be a more suitable choice, as it’s optimized for Angular, React, and similar frameworks without needing to set up a server. This service automatically builds and deploys from GitHub without needing a container or custom port configuration.

Please feel free to click the 'Upvote' (Thumbs-up) button and 'Accept as Answer'. This helps the community by allowing others with similar queries to easily find the solution.