6

I've been trying to get my Angular app to run natively on an Azure Linux Web App. The only way I've been able to do it is with Docker, and while that is great, Azure seems to use Docker so I'm running a Docker container inside a Docker container. I'd much rather run the app natively. However, I've been unable to get the app to kick off as I get "ng is not a known command" when I try to serve the app. I don't see a way to get the Angular CLI installed. There is a surprising lack of documentation on this. Has anyone been able to pull this off?

Matt M
  • 1,093
  • 2
  • 11
  • 26

3 Answers3

2

I was able to run Angular 9 on a Linux Web app by choosing PHP 7.3 as runtime stack. I simply build (in DevOps) and deployed the result of my ng build --prod (no neasted folders, just the files) and it worked as PHP can serve my index.html.

You dont have to put any startup command.

I followed this video to make the build, and this one to make the release.

Luis Miranda
  • 75
  • 10
1

That is not the way to go.

You should use the Angular CLI to compile your project and create your release artifacts (ng build --prod) inside a build pipeline (e. g. Azure DevOps) rather then use it to serve your application on a hosted site. Then within a release pipeline, you will publish the (compiled) artifacts to the Azure Web App.

If you want to do this locally, it is very similar. You compile your project and upload the result e. g. using Kudu.

Martin Brandl
  • 56,134
  • 13
  • 133
  • 172
  • 1
    Hi Marin, yes, that is what I'm attempting to do. In my yml build, my steps are install node, install angular cli, install npm dependencies, ng build, ng test, zip up and copy over to artifact staging dir. in my release, i unzip and deploy out to my linux web app. however, i've never been able to get this to work. – Matt M Aug 09 '19 at 13:36
  • I wonder why Azure then outputs "ng is not a known command". You must be do something wrong. By the way, you don't need to unzip the artifacts in release, just publish it. – Martin Brandl Aug 09 '19 at 13:39
  • I mean, yes, obviously I'm doing something wrong haha. I tried using VS Code to deploy to my web app and the generic NodeJs page comes up (the one they serve when there is nothing else to serve saying "deploy your code here"). However, all my code is there in wwwroot. – Matt M Aug 09 '19 at 13:41
  • If I go into Configuration > General and add a Start Up Command "ng serve", application logs give me "/opt/startup/startup.sh: 45: /opt/startup/startup.sh: ng: not found" and then the page errors out instead of showing the default Node Js page – Matt M Aug 09 '19 at 14:21
  • You don't need ng serve here – Martin Brandl Aug 09 '19 at 15:33
  • OK I guess I'm missing something fundamental. How does the app know to serve up the angular app. What bootstraps it? – Matt M Aug 09 '19 at 16:37
1

I ended up abandoning this approach. The short answer is that I need something like Express to serve up the Angular app. However, Azure Blob Storage can be configured to serve up static web sites (e.g. Angular) and is dirt cheap. I'll need to set up Azure CDN to get a custom domain and SSL working, but this is so much easier and potentially much cheaper than the route I was going.

Matt M
  • 1,093
  • 2
  • 11
  • 26