Angular App not running inside Azure App Service

Issue

I am having problems deploying my Angular App to a new Azure App service.

I set up deployment correctly. For CI, I set it up so it checks my github repo on the main branch and redeploys if there is a check in. It created a github actions yml file and I updated it to install, build, and deploy my app. I have verified that it is deploying the built files. When I push to that branch my github action workflow is kicked off which is detected by the Deployment Center for my App service and it completes successfully.

When I navigate to the url for the application page I get the message "Your web app is running and waiting for your content".

I have verified that my files have uploaded into the site/wwwroot/ directory through the scm.azurewebsites.net debug console. When I deploy changes, the files in that directory reflect the changes. I have tried including a web.config file that worked with a previous Angular App on an App Service. I have verified that it too is uploaded into the root folder as well.

Nothing works. It looks like I have everything in place, only it doesn't recognize the content. How do I get the app service to recognize my content/index.html file?

Solution

There are a few things you're going to want to check:

1. Make sure that you've correctly set your Runtime Stack to Node {Version}
2. You're going to need the correct path to your Angular site and in App Settings --> Configuration --> General Settings you'll want to add the following to Startup Command:

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

Obviously, you'll want to replace your path in the command.

UPDATE: If your Angular App is a static site, you might want to look into hosting the site using an Azure Storage Account. You can create a new Azure Storage Account, and once the resource is created, you can use the Data management --> Static Website option to set your Storage Account up to serve static content. If you'd like to add a custom domain and SSL certificates, you can then create a new CDN Profile that serves the files from your $web directly in your newly created storage account. Personally, I've found that this method works excellently and reduces hosting costs. You can find a full walk-through for this here.

Answered By - akseli