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.

Expellee

Answer 1

I resolved this by:

1. Creating a Web App by selecting the Runtime stack as ASP.NET V4.7 and selecting the OS as Windows.
2. Deploy the angular app using Azure DevOps.

The steps are in this blog post: http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html

Expellee

Answer 2

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

Penetralia

This saved my day. Thank you very much @Penetralia – Equally

I was trying "ng serve" and confused why the app is not published even when the package is available in site/wwwroot. Thanks a lot – Lemmons

The app crashes on startup with pm2: not found – Juryrig

There is no way to pay for this answer. Thanks Luis, you made my day. I was going crazy and I knew having a config.web or not had little to do with my linux OS – Karol

without the --spa flag it works for me – Castellan

Answer 3

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

Lambkin

Answer 4

Well,

you need a webserver to run your angular website. The Node Runtime stack by default does not have a webserver running, so nothing can be displayed.

You could host your website using some node.js webserver (express.js) but this will require additional npm packages and configuration. Better option is to switch operating system to windows. Then IIS will be used to host your website you deployed to your app service. Have a look at https://angular.io/guide/deployment#server-configuration for required rewrite rule configuration for angular hosted in IIS

Hallowell

Answer 5

There is another way to resolve this issue. Backstory: Web App OS: Linux, Runtime stack: Node.js

You could sign in the container from here. ssl login entry

run pm2 list there is already a static site called "default-static-stie". It is located in "/opt/startup". Then run pm2 show default-static-stie then you could browser the related folders for more details.

As the message in the console suggested, " Any data outside '/home' is not persisted."

So what you need to do is just copy the existing project to '/home' folder. Do some modification on the 'startup.sh' and 'default-static-site.js'.

startup.sh:

#!/bin/sh

#turn off the default static site
pm2 stop default-static-site

# Enter the source directory to make sure the script runs where the user 
 expects
cd "/home/site/wwwroot"

export NODE_PATH=$(npm root --quiet -g):$NODE_PATH
if [ -z "$PORT" ]; then
            export PORT=8080
fi

pm2 start -n my-static-site  --no-daemon /home/my-static-site/default-static-site.js

default-static-site.js:

server.use('/', express.static('/home/site/wwwroot', options));

By the way, add a code snippet before the above line:

server.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: '/home/site/wwwroot' });

});

In the end: put a start up command

put a start up command here, to refer to '/home/my-static-site/startup.sh'.

So, everything is done.

Mors