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.

Devang Zala
  • 97
  • 1
  • 12
  • 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`.. – Milo Oct 25 '17 at 12:08
  • Can you please guide me, where I can change that. I have 4.2.0 version in my local system. – Devang Zala Oct 25 '17 at 12:15
  • 1
    Take a look at this [so question](https://stackoverflow.com/questions/34746480/upgrading-node-on-an-azure-website/39422959#39422959) – Milo Oct 25 '17 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. – Devang Zala Oct 25 '17 at 13:05
  • @Milo, I have updated my answer, now I dont have any errors, still I cant access the site, see if you can provide any help. – Devang Zala Oct 25 '17 at 13:29
  • 1
    You can check this [so question](https://stackoverflow.com/questions/33835172/azure-you-do-not-have-permission-to-view-this-directory-or-page) and check this [tutorial](https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/) to further troubleshoot – Milo Oct 25 '17 at 13:42
  • @Milo, those links leads me to Node js application while my application is in Angular JS. We don't have web.config and server.js in default Angualr app. – Devang Zala Oct 25 '17 at 14:09

1 Answers1

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

Aaron Chen
  • 9,835
  • 1
  • 16
  • 28
  • you are life savor for me. Thanks a lot for this help. – Devang Zala Oct 26 '17 at 05:42
  • 1
    the virtual applications and directories part saved me. Thanks! – Gaspa79 Mar 07 '18 at 19:59
  • 1
    I have spent countless hours trying to deploy my VueJS App on Azure, the virtual directory tip solved it for me. Thanks a lot! –  May 18 '18 at 21:37
  • 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. – Esteban Filardi Jan 29 '19 at 00:07