Background
This tutorial describes processes and best practices for an
end-to-end continuous deployment and delivery of an Angular Application.
Assumptions:
- Node.js, npm and angular-cli are installed on dev computer
- Angular is installed on your computer: npm install -g @angular/cli
- GIT is installed on the dev computer
- Developer has access to an account on VSTS (Visual Studio Team Services) at http://www.visualstudio.com
- Developer has an account on Azure (http://portal.azure.com)
Creating a simple Angular CLI app on dev computer:
Create an angular app using angular-cli:
ng
new angular-hello-world
cd
angular-hello-world
ng
serve
In order for Angular’s routing to work smoothly on Azure, it
is necessary to have a web.config
file in the root folder of the application. Therefore, create a web.config file in the src directory and add to it the
following code:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes"
stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add
input="{REQUEST_FILENAME}" matchType="IsFile"
negate="true" />
<add input="{REQUEST_FILENAME}"
matchType="IsDirectory" negate="true" />
<add
input="{REQUEST_URI}" pattern="^/(api)"
negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
To enable the web.config file to be packaged with production code, edit the angular-cli.json file and add ‘web.config’ to assets, as follows:
.
. . . .
"assets":
[
"assets",
"favicon.ico",
"web.config"
],
.
. . . .
Build app
Build the app using the following command:
ng
build --prod
This produces the production version of the application into
the dist
folder. To test the trans-piled version of the app, point your browser to http://localhost:4200/dist.
You should see the same app as before, this time it is being served from
production code.
VSTS
VSTS is Microsoft’s DevOps platform. Login into VSTS and
create a new project. In my case I created a new project named angular-hello-world.
Once the project is created in VSTS, it is time for us to
push our code to VSTS using GIT. Copy the address of the GIT repo so that we
can use it to sync our code.
Back at your computer, run the following commands from your command prompt to push the code into your projects VSTS git repository:
Back at your computer, run the following commands from your command prompt to push the code into your projects VSTS git repository:
git remote add origin {your-git-url-here}
git push -u origin master
In my case, this would be:
git
remote add origin
https://medhat.visualstudio.com/DefaultCollection/_git/angular-hello-world
git
push -u origin master
Click on Code >> angular-hello-world
in VSTS to verify that your code is indeed in VSTS:
The code will look like this:
Building the code in VSTS
The same steps that we carried out to build our app on the
development computer will be translated into tasks in VSTS. To build our app,
choose: Build & Release >>
Builds:
Click on the “+ New definition” button:
Click on the “+ New definition” button:
On the “Select a
template” page, scroll to the bottom of the list and highlight item “Empty”, then click Apply:
Select “Hosted” in the “Default agent queue” drop-down-list:
Select “Hosted” in the “Default agent queue” drop-down-list:
Next, click on “+ Add Task” on the left side:
In the filter, enter npm. Highlight the npm task then click on Add:
This task will install all the npm dependencies:
The above task runs the command “npm install”. You do not need to make any changes to this task as it does exactly what we want it to do.
The above task runs the command “npm install”. You do not need to make any changes to this task as it does exactly what we want it to do.
Add another npm task to run “npm
run build” command, which is essentially a script in our package.json
file:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
The second npm task should
look like this:
Display name: build
Display name: build
Command: custom
Command and
arguments: run build --prod
Create release package
Click on the ‘Add Task’ button,
enter “archive”
in the search box, hover over the Archive Files task and click Add. Change the “Archive files” task as follows:
Display name: create release package
Display name: create release package
Root folder
(or file) to archive: dist
Prefix root
folder name to archive paths: UNCHECK
Publish release package
Next, we publish the zip we created in the last step. Click
on the Add Task button, enter
“publish build” in the search
box, hover over the Publish Build
Artifacts task and click Add:
Display
name: Publish release package
Path to
Publish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
Artifact
Name: drop
Artifact
Type: Server
That’s it for all our steps. Let’s
run the build! Click on Save and Queue >>
Save and Queue
in the top right hand corner.
On the next dialog, click on “Queue”
On the next dialog, click on “Queue”
Now the build will run for us. While that is happening let us turn on continuous integration so that when we make changes in our repository it will trigger a new build.
Click on the build number link in the in the top left-side corner. This will allow you to see progress of the build. When the build is completed without any errors, you will see a green “Build Succeeded” message as shown below:
Artifacts
You can see the package that was created by selecting the
Artifacts tab:
Download the drop folder to see what was
created inside that directory.
Continuous Integration
We will need to setup continuous integration so that
whenever new code is committed then the build process is kicked off. Click on
the build as shown below:
Click “Edit” on the top right-side:
On the next page, click on “Triggers”:
On the next page, click on “Triggers”:
Enable continuous integration by enabling the switch:
Click: Save & Queue >> Save:
On the next dialog, add a comment then click Save:
Creating Release
Log into Azure and create a web app.
Create a release definition by clicking on Build
& Release >> Releases:
Next, click on the blue “+ New definition” button. Under ‘Select a template’ select “Azure App Service Deployment” then click Next >:
Next, click on the blue “+ New definition” button. Under ‘Select a template’ select “Azure App Service Deployment” then click Next >:
On the next dialog, make sure that you have the right build name and enable “Continuous deployment”:
Click on “Create”:
Choose your Azure subscription then click on the blue Authorize
button:
After you log into your Microsoft account, the border around the “Azure subscription” field will change from red gray. Choose the correct azure web app in the “App Service name” field. Your release task will look like this:
After you log into your Microsoft account, the border around the “Azure subscription” field will change from red gray. Choose the correct azure web app in the “App Service name” field. Your release task will look like this:
Click Save:
You can enter a comment in the following dialog then click on OK.
Click on Release >> Create
Release:
This displays the following type of dialog:
This displays the following type of dialog:
Choose the correct build that will be used for the release. In the above example it is 40.
Click on Create.
Click on the link beside the definition file to see progress:
If all is well, the blue “IN PROGRESS” bar will change to a green “SUCCESS” bar.
