Deployed angular app to Azure web app - But showing the default Azure page

Question

I created a Web App in Azure to host an angular application. I selected the runtime as bellow:

But my local setup details:

1. Node version: v13.0.1
2. Angular version: 8.2.11

I used Anguler cli to create the application and then I ran ng build --prod to create the dist. Then I tried following methods to deploy the Angular app to Web app: 1. Used Azure App Service extension in VS Code 2. FTP using FileZilla with the ftp details from the Web app's deployment center.

But when I brows the url: https://eventzweb.azurewebsites.net/ I see the following page but not my page from the angular app.

Any idea why this is happening? Why I'm not seeing my page?

Thank you for your help in advanced.

Answer 1

Simplest solution:

Go to your app service > Configuration

Under Configuration, select the tab -> General Settings

On the Startup Command field, enter the following command:

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

Now your app should be able to appear instead of the default page.

The reason your app is not running is because it is running on Linux, and Linux does not have a IIS server to handle routes of your node app (it goes something along those lines).

Watch this video, this guy deserves all the credits (go like his video if this saved you): https://www.youtube.com/watch?v=HLhlKIIfaZs

Answer 2

What worked for me, is to have Node 12 runtime + setting the startup script in General settings given by @LouisDev22 (Thanks a lot):

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

and then set the SCM_TARGET_PATH variable to /home/site/wwwroot in the Application settings, this variable is only needed if you first run your app service with another runtime.

PS1: You can find the General and Applications settings in the app service Configuration menu.

PS2: Bravo Azure