CODEWITHSUNDEEP
angularazureazure-devopsazure-webapps
Roshane Kekuluthotuwage
Roshane Kekuluthotuwage

Reputation: 678

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

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

enter image description here

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.

enter image description here

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

Thank you for your help in advanced.

Upvotes: 30

Views: 20253

Answers (5)

Mehdi Benmoha
Mehdi Benmoha

Reputation: 3935

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

Upvotes: 8

LuisDev99
LuisDev99

Reputation: 1837

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

Upvotes: 71

lulalagulu
lulalagulu

Reputation: 139

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.

Upvotes: 2

Roshane Kekuluthotuwage
Roshane Kekuluthotuwage

Reputation: 678

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

Upvotes: 2

A.Winnen
A.Winnen

Reputation: 1698

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

Upvotes: 3

Related Questions