4

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. Success in deployment

Deployment details 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.

enter image description here

Now it shows the error.

enter image description here

Now, I have gone a step further. enter image description here

When I visit the published URL aka https://azuret01.azurewebsites.net/enter image description here

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.

Improve this question
7
  • 1
    You could try specifying a higher version of node to run. It's saying it's running 1.4.28, version I have currently is 5.3.0.. Commented Oct 25, 2017 at 12:08
  • Can you please guide me, where I can change that. I have 4.2.0 version in my local system. Commented Oct 25, 2017 at 12:15
  • 1
    Take a look at this so question Commented Oct 25, 2017 at 12:23
  • I have followed it, now there is another set of errors, I am working on it. if I get success in solving this, I will post my answer, else will add more details in question. but thanks for the tip to upgrade version @Milo, it did help. Commented Oct 25, 2017 at 13:05
  • 1
    You can check this so question and check this tutorial to further troubleshoot Commented Oct 25, 2017 at 13:42

1 Answer 1

Reset to default
10

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.

    enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

you are life savor for me. Thanks a lot for this help.
the virtual applications and directories part saved me. Thanks!
I have spent countless hours trying to deploy my VueJS App on Azure, the virtual directory tip solved it for me. Thanks a lot!
Inside the virtual applications and directories config section I also have the option "Application or directory", which one should I choose? It's not visible in your screenshot unfortunately.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.