0

The goal is two automate deployment in Windows Azure right after committing changes in the repo.

This is the steps that I did

  1. Download the Angular2 quickstarter (make sure it runs locally)
  2. Push the files in the repo (Bitbucket)
  3. Configure Continous Deployment in Azure (using Bitbucket integration in the Azure portal)

Upon configuring the continuous deployment in Azure, Azure automatically deploys whats in the repo and fails (see azure deployment logs below) enter image description here

Im searching for quite a while in the internet on how to do this. I don't want to use Visual Studio and I just want to use VS Code.

Is there anyone who can give step by step guide on doing this?

TIA

UPDATE - I am actually using Angular-CLI boilerplate and not the angular-quickstart. here's the package.json

{
  "name": "my-webapp",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular2-material/button": "^2.0.0-alpha.5-2",
    "@angular2-material/core": "^2.0.0-alpha.5-2",
    "@angular2-material/toolbar": "^2.0.0-alpha.5-2",
    "@angular2-material/icon": "^2.0.0-alpha.5-2",
    "@angular2-material/sidenav": "^2.0.0-alpha.5-2",
    "@angular2-material/list": "^2.0.0-alpha.5-2",
    "@angular2-material/card": "^2.0.0-alpha.5-2",
    "@angular2-material/input": "^2.0.0-alpha.5-2",
    "@angular2-material/radio": "^2.0.0-alpha.5-2",
    "@angular2-material/checkbox": "^2.0.0-alpha.5-2",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.8",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "1.8.10",
    "typings": "0.8.1"
  }
}
Improve this question

1 Answer 1

Reset to default
5

There are several modifications we should do in the package.json file to make the application successfully being deployed to Azure Web Apps.

  1. As the description at https://github.com/angular/quickstart#prerequisites, we need to specify the nodejs and npm verion on Azure. On the CONFIGURE tab on the portal of your Azure site, modify the WEBSITE_NODE_DEFAULT_VERSION to a higher version, e.g. to 5.4.0.enter image description here
  2. In the package.json file in the root directory, add the following section to specify the nodejs version of the web app's runtime: "engines":{"node":"5.4.0"},.
  3. Copy the following modules in the "devDependencies" section to "dependencies" section in package.json: "concurrently": "^2.0.0", "typescript": "^1.8.10", "typings": "^1.0.4",
  4. Modify the npm scripts in the "scripts" section in package.json, we need to change all the nodejs modules command to the relative local path on the Auzre directory architecture: "lite": "node_modules\\.bin\\lite-server", "tsc": "node_modules\\.bin\\tsc", "concurrently": "node_modules\\.bin\\concurrently", "tsc:w": "node_modules\\.bin\\tsc -w", "typings": "node_modules\\.bin\\typings",
  5. Create an empty file named web.config to present the Azure deployment task automatically create the web.config with a rewrite mod which you don't need in this application.
  6. After deployment, you can login to the Kudu console site or VSO, step into the root directory of your app, which is "D:\home\site\wwwroot\", run the command npm start to compile the application.

Additionally, you can leverage VSO to debug your application on Azure online, refer to Visual Studio 2015 and Microsoft Azure syncing files, Server/Local for more.

Any further concern, please feel free to let me know.

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

10 Comments

Thanks for answering. I updated my question as I am actually using angular-cli not angular-starter. Should I replace all the "script{}" section with the one you mentioned in #4? I assume i'll run the ng serve in the Kodo console. thanks
Yes, the original script e.g. "tsc":"tsc" which is looking for the global nodejs modules path, we need to change it to the local nodejs modules path on Azure.
Thanks Gary, i followed your instruction. Azure succesfully build the app BUT upon going to kudo -> command prompt and running npm start - im getting "missing script: start" error. I am using Angular-CLI and upon testing to run it manually there (ng serve) but didnt work (ng serve is not recognized....). then I tried installing angular-cli (npm install -g angular-cli) but the command line just freezes out.
it means that you have not configured a start command in package.json file, you can refer to github.com/angular/quickstart/blob/master/package.json to configure a start command, or you can start your application with your own command.
Since I am using ANgular-cli seed this is my scripts: { "start": "ng serve", "postinstall": "typings install", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor" }... but as I said - "ng serve" doesn't work at all.
|

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.