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
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 :
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
2. Click New at the top left of the Portal
3. Search for web app
4. Select first row
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
4. Choose project (Angular2RCWorldNews)
5. Choose branch (master)
After 1-2 minutes we select again the web app Settings -> Deployment source and we see a picture like the one below
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.
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!
We can now see the transpiled .js files
Lets make a slight modification to our project to check if continuous deployment has been implemented properly. Lets modify the template of worldnews.component
<h1>World News Component</h1>
<h1>World News Component in Azure</h1>
Commit and push to GitHub.
We check our azure portal and we see that now we have a new active deployment.
If we visit our site we see the home page screen.
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!
Latest posts by Giorgos Basagiannis (see all)
- What is the difference between an abstract and a virtual method? - November 26, 2017
- Angular 2 News tutorial in Visual Studio Code part 3 - June 28, 2016
- Angular 2 News tutorial in Visual Studio Code part 2 - June 22, 2016