CODEWITHSUNDEEP
angularazurecommand-line-interfaceazure-web-app-servicekudu
user1675891
user1675891

Reputation:

How to run "ng serve" command in Kudu Console to make Azure serve my Angular website

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.

Upvotes: 0

Views: 2052

Answers (2)

Kirk Larkin
Kirk Larkin

Reputation: 93073

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.

Upvotes: 1

Joe Clay
Joe Clay

Reputation: 35797

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

Upvotes: 2

Related Questions