Deploy default angular application on azure from github gives error

Question

I have created a basic angular application. the source code is at https://github.com/devang-zala-sa/azure1

The azure web app URL is http://azuret01.azurewebsites.net/

---

Update @Milo provided right direction, with that I was able to get rid of the errors.

Now there is no error, and deployment is successful, but still I cant access http://azuret01.azurewebsites.net/.

More details. Success in deployment.

Deployment details

Generating Deployment Script View Log

Running Deployment Command View Log

Actual Deplyement script, from location D:\home\site\deployments\tools\deploy.cmd using kudu.

Still I can't access this default Angular App, please help.

---

I want to create a web application in azure.

I have created web application with below commands in azure portal.

az group create --name testrg --location "East US" testrg   AZUREACCOUNT
az appservice plan create --name testas --resource-group testrg --sku FREE
az webapp create --name azuret01 --resource-group testrg --plan testas.

I have connected the github repo with azure. please find the steps I have followed.

Now it shows the error.

Now, I have gone a step further.

When I visit the published URL aka https://azuret01.azurewebsites.net/

Please find the logfile for error, please find few of them as bullets for easy reference.

• Looking for app.js/server.js under site root.
• Invalid start-up command "ng serve" in package.json. Please use the format "node ".
• Missing server.js/app.js files, web.config is not generated
• The package.json file does not specify node.js engine version constraints.
• The node.js application will run with the default node.js version 0.10.40.
• Selected npm version 1.4.28
• npm ERR! 404 Not Found
• npm ERR! 404
• npm ERR! 404 'angular/http' is not in the npm registry.
• npm ERR! 404 You should bug the author to publish it
• Failed exitCode=1, command="D:\Program Files (x86)\nodejs\0.10.40\node.exe" "D:\Program Files (x86)\npm\1.4.28\node_modules\npm\bin\npm-cli.js" install --production
• npm ERR! 404 It was specified as a dependency of 'azure1'
• An error has occurred during web site deployment.
• npm ERR! 404

I have spent quite a lot time on deploying my actual angular app in azure, but that was not successful, so I did try with this minimal approach and even this does not works.

Has anyone encountered this, or can anyone guide me what I am doing wrong?

Any help is highly appreciated.

Answer 1

You'll need to build your angular project after deploying the source code to Azure.

1. Add "postinstall": "npm run build" script to scripts section from the package.json as below:

   "scripts": {
       "ng": "ng",
       "start": "ng serve",
       "build": "ng build --prod",
       "test": "ng test",
       "lint": "ng lint",
       "e2e": "ng e2e",
       "postinstall": "npm run build"
   },
   

   Then commit this change and push it to your GitHub repo. This will build your app and places it into the dist/ directory after all npm packages are installed.

2. Change virtual directory from site\wwwroot to site\wwwroot\dist in the Application settings blade via Azure portal.