Angular2 - Azure Continous deployment with Bitbucket (or other GIT repo)

Question

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

This is the steps that I did

Download the Angular2 quickstarter (make sure it runs locally)
Push the files in the repo (Bitbucket)
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)

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"
  }
}

score 5 · Answer 1 · edited May 23 '17 at 11:47

5

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

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.
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"},.
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",
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",
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.
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.

edited May 23 '17 at 11:47

Community

1
1

answered Jun 27 '16 at 05:40

Gary Liu

13,758
1
17
32

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 – Linc Abela Jun 27 '16 at 23:10
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. – Gary Liu Jun 28 '16 at 01:25
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. – Linc Abela Jun 29 '16 at 00:49
it means that you have not configured a start command in `package.json` file, you can refer to https://github.com/angular/quickstart/blob/master/package.json to configure a start command, or you can start your application with your own command. – Gary Liu Jun 29 '16 at 01:09
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. – Linc Abela Jun 29 '16 at 01:30
@LincAbela If you have unsuccessful attempts at installing node_modules in KUDU, then I recommend logging into the KUDU and manually deleting the `sites/wwwroot/node_modules` folder and then doing another `git push azure main` command from the command line. – jmbmage Jun 29 '16 at 01:40
@LincAbela, fast fix, check whether you have successfully install angular-cli on Azure. Check the whether the cmd file `ng`(maybe) in the `node_modules/.bin` folder in your application's root directory on Azure. If it exists, modify your start command to `"node_modules\\.bin\\ng serve"` like the others mentioned in my answer. – Gary Liu Jun 29 '16 at 02:50
I'm not seing the angular-cli in the node_modules, i tried copying it from devDependencies to dependencies but wierdly - seems like its messing up the installation and azure build is failing "Selected npm version 3.9.5 Updating iisnode.yml at D:\home\site\wwwroot\iisnode.yml Thread was being aborted." – Linc Abela Jun 29 '16 at 03:47
Try to run command `npm install --save angular-cli` on local, the npm will automatically write all the required modules into the dependencies section. And then try to deploy to Azure via GIT. Do not forget config the scripts in package.json. `"ng": "node_modules\\.bin\\ng"` and `"start":"ng serve"`. It works on my side. – Gary Liu Jun 29 '16 at 05:12
@GaryLiu-MSFT I followed the steps u mentioned but now i am getting error on following line: "engines":{"node":"6.2.1"},..What could be causing this? – Peter Oct 21 '16 at 19:10

Angular2 - Azure Continous deployment with Bitbucket (or other GIT repo)

1 Answers1