Skip to main content

Releasing an Angular 5 App in VSTS: Part 2

This article is the second of a two-part series. In my previous article, we created a build for our Angular app and configured it to have multiple environments that each point at a different API. Now, we are going to expand on that and create a release pipeline that deploys the app to Microsoft Azure. We will also work with deployment slots in Azure to hold our dev and test environments. Azure was chosen because of its easy integration with Visual Studio Team Services (VSTS), and VSTS is used because of its ability to serve as a central point for code and builds/releases.

Releasing an Angular 5 App in VSTS: Part 2

Creating a Release

1. Under the “Build and release” tab, click on “Releases” and then if you click on the “+” in the upper left 00000 of the screen, you can click on “Create a release pipeline”.

Releasing an Angular 5 App in VSTS: Part 2

2. Again, you will be prompted to use a premade template or start with an empty process. We are going to use an empty template for this next part.

3. Next, we want to add an artifact to trigger the release. Click on “Add an artifact”, then select “Build”, and then choose the correct build to be the source.

Releasing an Angular 5 App in VSTS: Part 2

4. Next, click on the lightning bolt and on the sidebar that pops up, under “Continuous deployment trigger,” click the slider to enable continuous deployment every time a new build occurs.

Releasing an Angular 5 App in VSTS: Part 2Releasing an Angular 5 App in VSTS: Part 2

5. Click on “Environment 1” and on the sidebar change the environment name to “Development.”

6. On the pipeline under the “Development” environment name, click on the hyperlink that says “1 phase, 0 task.”

Releasing an Angular 5 App in VSTS: Part 2

7. Now we need to add one task that deploys our app to Azure. To do so, click on the “+” on the right-hand side of the “Agent phase” bar. Select “Azure App Service Deploy.”

Releasing an Angular 5 App in VSTS: Part 2

Set up Microsoft Azure

8. Here we need to take a quick sidetrip and create our Azure Web App. To do so, open a new tab and sign into the Azure portal, click “+ Create a resource” and then select “Web App” from the “Popular” group.

Releasing an Angular 5 App in VSTS: Part 2

9. Next, select a name for your app, select your account that has your subscription under the “subscription” label, create and name a new resource group for your app, select Windows for your OS, and click “Create.” Note: it will take a few seconds to a couple of minutes for your app to be created and deployed.

Releasing an Angular 5 App in VSTS: Part 2

10. Under “Home/App Services”, click on your app’s App Service plan. Select “Deployment slots” under the “Deployment” tab category label.

Releasing an Angular 5 App in VSTS: Part 2

11. Click on “Add slot” and name it “Dev.” Choose “Don’t clone configuration from an existing slot” for the “Configuration Source.” Repeat this step to create a new slot and name it “Test.”

12. Back on the “Overview” tab for your Azure app, it is important to note the URL where you can find your deployed app online. To access the dev and test environments, add “-dev” or “-test” before the “.azureresources.net” part of your app’s url.

Releasing an Angular 5 App in VSTS: Part 2

Finishing the Release

13. Now, let’s navigate back to the tab that has VSTS running in it. Click on the “Azure App Service Deploy” task that is under the “Agent phase.” On the sidebar, choose your Azure subscription from the dropdown, then the name of your App Service, the Resource group for your app, then check “Deploy to slot,” and choose “dev”.

Releasing an Angular 5 App in VSTS: Part 2

14. Back in the pipeline, click on the “+ Add” button next to the word “Environments.” Then click “Clone environment” and repeat this step one more time to create a total of three environments.

15. Rename the first cloned environment to “Test” and change the slot to deploy to in the “Azure App Service Deploy” to the test slot in Azure.

Releasing an Angular 5 App in VSTS: Part 2

16. Back in the pipeline, repeat step 10 on the last cloned environment except name it “Production” and deselect the “Deploy to slot” checkbox under the “Azure App Service Deploy” task.

Releasing an Angular 5 App in VSTS: Part 2

17. In each of the three environments, in the “Deploy Azure App Service” step, there is a box that asks for the “Package or folder.” This is where the release looks to get the artifact that the build created and push it to the cloud. Each of the environments should point to a different drop. Dev should take in the “devDrop”, test should take in the “testDrop” and prod should take in the “prodDrop.”

Releasing an Angular 5 App in VSTS: Part 2

18. Congratulations! You have now finished creating your own release pipeline! You can customize Pre-Deployment conditions by clicking on the button below. All you have to do now is save the release and click on “+ Release” in the top right-hand corner of the window to manually kick off the release!

Releasing an Angular 5 App in VSTS: Part 2

 

Author:
Solution Category:
Speciality Category: