Angular CLI app not running when deploying to Linux App Service

Question

I'm trying to deploy an Angular CLI app to Azure App Service on Linux OS, using Azure Dev Ops - but no success. I get Image 1. No error in the server or application logs.

This is what I done so far:

Built the Angular CLI app using DevOps Build and placed the resulted "dist" folder to the "drop" folder. See below (Image 2) the tasks that compose my build. This is working fine and creating the expected files.

Created a release in DevOps, deploying all the dist files in the wwwroot folder in the Azure App Service in Linux. Shown below are both, the wwwroot folder (left) and my local dist folder (right) after I run a ng build --prod.

I have the suspicion that I need to kickstart the angular by feeding some time of command when doing the deployment. I have tried running "ng serve --host 0.0.0.0" but that didn't work.

what are you talking about? this is an app building question not a networking one. there are thousands of questions similar to this one in SO. — Dustin, Mar 10 '19 at 22:17

Dave Skender · Answer 1 · 2023-06-20T05:30:45.740

9

Check the Azure App Service > Linux section on this page. Essentially, you have to serve the app.

Add npx serve -s in the App Service Configuration > General Settings > Startup Command

In addition to the Azure Web App setting (above), you can also execute the startup after a deployment. If you are using Azure Pipelines, you'd kick it off with something like:

- task: AzureRmWebAppDeployment@4
  displayName: 'Deploy website'
  inputs:
    azureSubscription: '[your Azure subscription]'
    appType: webAppLinux
    WebAppName: '[your Azure web app]'
    packageForLinux: '[artifacts]/package.zip'
    StartupCommand: 'npx serve -s'

2023 UPDATE: you no longer need to configure this with a ecoysystem.config.js PM2 file in the root directory, with this inside as originally answered.

module.exports = {
    apps: [
        {
            script: "npx serve -s"
        }
    ]
};

Old reference: https://burkeholland.github.io/posts/static-site-azure

edited Jun 20 '23 at 05:30

answered Jun 14 '19 at 03:05

Dave Skender

611
5
11

that does not seem to work anymore, check https://stackoverflow.com/questions/63660012/azure-app-service-suddenly-delivers-file-directory-overview-instead-of-angular-a – barracuda317 Aug 31 '20 at 12:29
Mine still works with this setup https://stock-charts.azurewebsites.net – Dave Skender Sep 01 '20 at 13:59
You no longer need the PM2 file aspect in Azure. I typically run it immediately after a deployment, but also have it in the Startup Command so it restarts automatically. – Dave Skender Jun 20 '23 at 05:17

score 4 · Answer 2 · answered Jan 22 '20 at 15:59

4

I had to give the npx serve -s as the startup command

Then set the Runtime Stack with node framework 10.16 (NODE|10.16). See below

Then everything started working.

answered Jan 22 '20 at 15:59

sunil

6,444
1
32
44

score 1 · Answer 3 · edited May 22 '19 at 10:41

1

If you still want to use App Service - Web App you can just the Windows OS instead of Linux.

Here are the parameters I Used:

Since the output of building angular is a static web app, IIS will serve the site right away.

edited May 22 '19 at 10:41

double-beep

5,031
17
33
41

answered May 22 '19 at 10:39

JM Tee

121
1
5

score 1 · Answer 4 · answered Jan 15 '20 at 08:22

1

When using Linux App Service container, you may also select PHP stack containing Apache2 Server. Since, Angular files are static ones (JS, CSS, HTML), so you just need some web server to serve this content.

Example configuration:

answered Jan 15 '20 at 08:22

Thomas Weglinski

1,094
1
10
21

score 0 · Answer 5 · answered Mar 11 '19 at 09:57

0

If you look at the default 'Deploy Node.js App to Azure App Service' release template, it uses the 'Deploy Azure App Service' task and adds the following commands to the task. this might help you out.

answered Mar 11 '19 at 09:57

Remco Brilstra

798
5
13

Yeah I discovered this was a necessary step when do you deployments to Windows based App Service. However, I don't think is necessary to include a web.config for Linux service. – Dustin Mar 11 '19 at 14:44
oh right, the 'iisnode' part should have given it way to me *facepalm*. When using Linux it does seem the add "-WEBSITE_NODE_DEFAULT_VERSION 6.9.1" to the App settings section. but apart from that i'm not seeing any interesting configuration being passes along – Remco Brilstra Mar 11 '19 at 15:04

score 0 · Accepted Answer · answered Mar 13 '19 at 02:21

There is a subtle and big difference between the Linux and Windows App service: IIS - which in Windows is actively looking to serve any app, whereas in Linux you have to spin up something on your own to serve it - Express for example.

After some research I discovered that I don't need a full App service dedicated to run a static app (such as Angular or React). It can be done just as efficiently and much cheaper with something like Storage. -> https://code.visualstudio.com/tutorials/static-website/getting-started

score 0 · Answer 7 · answered May 16 '21 at 22:29

0

I had the same problem on Azure App Service with Linux and Node, solved it using below startup command

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

answered May 16 '21 at 22:29

Shivinder Singh

143
1
7

The deployment works fine, but I get a 404 after deployment – CBC_NS Jan 15 '22 at 01:19

Angular CLI app not running when deploying to Linux App Service

7 Answers7

Linked