Azure error when deploying Angular front end to webapp

Question

Azure error when deploying Angular front end to webapp

hpbcrowe 51

I have deployed a SQL server DB on Azure, along with a .NET API they both work and communication with each other. When I run the Angular front end locally the full stack works the local front end talks to the API, database on Azure. I tried to deply the Angular front end to Azure the deployment gets past creating the zip package... says the size of the zip package and then says an error has occured but doesn't say what the error is. This is the output window:

This is what the Azure Activity Log Window says:

When I click on that link this is the webpage it displays:

It tells me that an error has occured but doesn't give me a number or what error occurred.

I am using VS Code it is the latest version.

Any ideas on what the error could be or where to find what it is?
How can I fix this error when I find out what it is?

Thanks in advance for your help.

Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2022-07-13T08:01:20.157+00:00

Hello @hpbcrowe ,

Welcome to Microsoft Q&A forum.

Since Visual Studio Code(different from VS IDE) is currently not supported in Microsoft Q&A(the supported products are listed over here: https://learn.microsoft.com/en-us/answers/products/), I suggest you also post this question on Stack Overflow - Visual Studio Code. I will help to remove the Visual Studio related tags(vs-debugging and vs-extensions) and keep Azure related tags.

Thanks for your understanding.

Regards,
Tianyu
hpbcrowe 51 Reputation points

2022-07-13T15:40:20.137+00:00

Thank you for your response. Would you recommend trying to deploy the front end from Visual Studio instead?

2 answers

Your answer

Tianyu Sun-MSFT 34,436 Reputation points Microsoft External Staff

2022-07-13T08:01:20.157+00:00

Hello @hpbcrowe ,

Welcome to Microsoft Q&A forum.

Since Visual Studio Code(different from VS IDE) is currently not supported in Microsoft Q&A(the supported products are listed over here: https://learn.microsoft.com/en-us/answers/products/), I suggest you also post this question on Stack Overflow - Visual Studio Code. I will help to remove the Visual Studio related tags(vs-debugging and vs-extensions) and keep Azure related tags.

Thanks for your understanding.

Regards,
Tianyu
hpbcrowe 51 Reputation points

2022-07-13T15:40:20.137+00:00

Thank you for your response. Would you recommend trying to deploy the front end from Visual Studio instead?

Answer 1

ajkuma 28,036 Microsoft Employee Moderator

hpbcrowe-4216. What App Service version are you leveraging? (Windows or Linux)

Starting from Node 14 LTS, the container doesn't automatically start your app with PM2.
To start your app with PM2, set the startup command to pm2 start <.js-file-or-PM2-file> --no-daemon. Be sure to use the --no-daemon argument because PM2 needs to run in the foreground for the container to work properly.

On Azure Portal, navigate 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/dist/projectname --no-daemon –spa
or
pm2 serve /home/site/wwwroot --no-daemon –spa

Additionally , take a look at the step-step instructions on How to deploy Angular app to Azure App Service running Linux from GitHub
Angular Deployment on App Service Linux

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2022-07-14T19:08:55.103+00:00

Adding more:

--You may leverage App Service diagnostics from Azure Portal> Navigate to your App Service app in the Azure Portal.
--In the left navigation, click on Diagnose and solve problems – Checkout the tile for “Diagnostic Tools” > “Availability and Performance” & "Best Practices" and review to fetch additional information to isolate further.

-You may enable logs from Azure Portal (App Service logs blade) to fetch more pointers on the error. You may enable these logs– Application logging, Web Server logging, Detailed Error Messages

--Kindly checkout the process here - >>Enable diagnostics logging for apps in Azure App Service

--You can inspect the log files from Kudu console at `https://yourwebsite.scm.azurewebsites.net/api/logs/docker and fetch more details on the issue

Kindly let us know how it goes, we will follow-up with you further.

Answer 2

hpbcrowe 51

I figured out what I had done wrong. I didn't manually select the folder inside of the dist folder when deploying to the app. It wasn't deploying the "zipped folder" to Azure. I re did and then chose "browse" selecting the sub folder in dist and then it worked like a charm.
Thanks for your help!

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2022-07-15T07:57:34.253+00:00

@hpbcrowe , Glad to know that the issue is sorted out! Thanks for posting the solution that worked for you. Much appreciate the follow-up.

--

To benefit the community find the right answers, please do mark the post which was helpful by clicking on ‘Accept Answer’ & ‘Up-Vote’.

Share via

Azure error when deploying Angular front end to webapp

2 answers

Your answer