Angular 2 News tutorial in Visual Studio Code part 3

After integrating Git and GitHub we will go one step further : publish our App in Azure and implement continuous deployment. We are going to connect a source control system like GitHub to an Azure web App via continuous deployment so every time we push a new update to our source control, our web site will automatically be updated. Sounds cool eh? Let’s start :

First step : Create a custom deployment script in our project

This script will run in Azure. Every time we push a commit to GitHub, Azure does a push of this code.Then it runs the deployment script. In order to generate the deployment script we have to install Azure CLI. Then we need to login to our Azure subscription. From the root path of our application we type

npm install -g azure-cli
azure login

A code string will be generated and we are advised to visit a website in order to verify this code. After the verification, we are ready and connected. Now we have to type

azure site deploymentscript –node

and this will create 2 deployment files : .deployment and deploy.cmd

Our folder structure now :

folderStructure

Maybe you have noticed from part 2 that we only push .ts files to the source control. The browser needs .js files so we have to transpile the .ts files.This transpilation will take place, every time there is a deployment. We have to add a snippet of code in deploy.cmd . In the deployment section our script has these lines (or something similar) :


:Deployment
echo Handling node.js deployment.

:: 1. KuduSync
IF /I "%IN_PLACE_DEPLOYMENT%" NEQ "1" (
  call :ExecuteCmd "%KUDU_SYNC_CMD%" -v 50 -f "%DEPLOYMENT_SOURCE%" -t "%DEPLOYMENT_TARGET%" -n "%NEXT_MANIFEST_PATH%" -p "%PREVIOUS_MANIFEST_PATH%" -i ".git;.hg;.deployment;deploy.cmd"
  IF !ERRORLEVEL! NEQ 0 goto error
)

:: 2. Select node version
call :SelectNodeVersion

:: 3. Install npm packages
IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
  pushd "%DEPLOYMENT_TARGET%"
  call :ExecuteCmd !NPM_CMD! install --production
  IF !ERRORLEVEL! NEQ 0 goto error
  popd
)

After part 3 add one additional part


:: 4. Compile TypeScript
echo Transpiling TypeScript in %DEPLOYMENT_TARGET%
call :ExecuteCmd tsc -p %DEPLOYMENT_TARGET%

Part 4 calls ExecuteCmd to run TypeScript’s compiler using node. Because TypeScript is not installed in our web app we have to install it.For now let’s make a new commit named azureDeploy and push it to GitHub.

Second step : Create a web app

In this step we ll create a new web app in Azure portal

1.Log in

2. Click New at the top left of the Portal

3. Search for web app

4. Select first row

web app

5. Create

webapp2

Third step : Implement continuous deployment

1. Select the web app we created in the previous step

2. Select Settings in the Web App blade

3. In the Settings blade select Deployment source and then Choose source and GitHub

select source

4. Choose project (Angular2RCWorldNews)

5. Choose branch (master)

6. OK

After 1-2 minutes we select again the web app Settings -> Deployment source and we see a picture like the one below

deployments

Our deployment has failed.

Fourth step : Troubleshooting

We visit the scm site of our web project https://yoursite.scm.azurewebsites.net/ and we log in.
We select Debug console and then powershell.

If we visit our app folder we see that only .ts files exist. No .js files,so no traspilation has taken place.

kudu1

Now we have to install Typescript and typings so we type

npm install -g typescript
npm install -g typings

Then we go back to the azure portal , select the web app -> Settings -> Deployment source -> Sync to ignite a new deployment. Now the deployment is successful!

successfulldeployment1

We can now see the transpiled .js files

jsfilesKudu

Lets make a slight modification to our project to check if continuous deployment has been implemented properly. Lets modify the template of worldnews.component
from

<h1>World News Component</h1>

to

<h1>World News Component in Azure</h1>

worldnewsComponent

Commit and push to GitHub.

We check our azure portal and we see that now we have a new active deployment.

worldnewscomponentModify

If we visit our site we see the home page screen.

missionAccomplished

Mission accomplished!

P.S. An excellent post for Azure and Continuous Deployment is this from Jeremy Foster. Some things I implemented are based on this.Thank you Jeremy!

Giorgos Basagiannis

I am a full stack engineer with broad technical skill set. I am passionate about developing high quality software that is scalable and easy to maintain. My main areas of interest include Microsoft Web & Cloud Technologies,JavaScript based frameworks,SharePoint and Office 365.

Leave a Reply

Your email address will not be published. Required fields are marked *