0

I've created a webpage and when I execute

ng serve

I get to browse to the index page at localhost:4200. Then, I created a new app service in Azure and accessed Kudu Console cloning the page from BitBucket. It seems I was successful installing Angular CLI tools because I can transpile to dist by

ng build but when I run the service command, I get stuck.

The command window says that webpack compiled successfully but when I browse to my site at whatever.azurewebsites.net, I only get the error stating that

You do not have permission to view this directory or page

which, of course, is weird since I'm serving the application. If I suffix the URL by /src, I get to see the contents of the static index.html file but that poses two problems: (a) it's not in the production file but the repository version (not wise to distribute the code openly, perhaps, and Webpack's serving doesn't create a physical junk at all) and (b) it doesn't render the Angular application (the tag app-root is still an empty app-root and this is the actual problem, of course).

Googling for a few hours produced a lot info but all of it aims at CI and automation. At this point, I was to do the things manually to gain full control and understanding, though. Depending on how well I've diagnosed the issue, one of the following questions should be the one. At the moment I'm a bit confused. Please have patience if I'm asking in a moronic way.

  • How should I be exposing the page?
  • Do I serve it properly?
  • What URL should I enter to access my page?

2 Answers2

2

You should never use ng serve in production! It actually says as much in the command line output, if you pass the -prod flag:

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION USE!
****************************************************************************************

Instead, you should run ng build -prod to create an optimized build of your application, and then use a server such as Apache or NGINX (maybe IIS, since you're on Azure) to serve the files.

An example of one way to upload and serve static files via Azure can be found here: How to deploy a simple static micro site on Microsoft Azure

Joe Clay
  • 33,401
  • 4
  • 85
  • 85
  • I thought that the Angular application doesn't could as a static file. Am I confused again? –  Aug 14 '17 at 15:44
  • 1
    @AndyJ: Angular applications generally compile down to static HTML/CSS/JavaScript. You might have a dynamic backend (e.g. a REST API server), but the single page app itself is static. All `ng serve` does is start up a Webpack development server, which auto-compiles/reloads the files in memory when you make changes. – Joe Clay Aug 14 '17 at 15:45
  • @AndyJ: And please don't take my answer being strongly worded as me being critical of you - just don't want your server getting hacked :) I think most people have trouble wrapping their head around how to serve Angular apps at first, you're definitely not alone. – Joe Clay Aug 14 '17 at 15:56
  • 2
    Oh, I didn't even consider your answer as hard worded, be that my slight Asperger predisposition or not being a native speaker of English. One way or the other, I rather appreciated the clarity of your remark. The silence from my side is due to me knocking on the freakishly slow PowerShell thingy to verify what's been said. (I even +1'ed you.) –  Aug 14 '17 at 16:05
1

You're attempting to serve the web-site twice: once with ng serve and once with an Azure App Service (which is using some flavour of IIS behind the scenes). ng serve is serving on http://localhost:4200 and IIS is serving on http://whatever.azurewebsites.net:80.

Although you are serving on http://localhost:4200, that's not going to be available external to the machine. To make it work via the Azure App Service, you'll want to go into the Application Settings (found under the App Service in the Azure Portal) and update the Virtual applications and directories section to include the dist folder, as shown:

As you've already suggested, this is not the recommended approach to serving your Angular application within an Azure App Service. I won't cover that here as you've already found better sources of knowledge for that.

Kirk Larkin
  • 84,915
  • 16
  • 214
  • 203
  • Ahem... How do I access the Application Settings, please? I've check all the option sI could find in Kudu thingy but there's nothing like your screeny. What am I missing? –  Aug 14 '17 at 15:46
  • Sorry, the application settings are found in the Azure portal under the App Service itself. I'll update the answer. On a side note, although I think the answer I gave solves your immediate problem, you should really go with what @JoeClay suggests in the long run. – Kirk Larkin Aug 14 '17 at 15:48
  • Oh, absolutely. Like you very correctly perceived - I'm only playing around to learn the tools and tricks. In the long run, I'll follow the best practices, of course. Good thing that you hint on that, though. I simply want to see if the site will render at all or if I'll stay at the unredered *app-root* tag. Also, I just learned about setting virtual dirs in Azure (it resembles the settings from IIS, which feels more "at home"). –  Aug 14 '17 at 15:51