Azure DevOps – Angular 5 with .Net WebApi

This article shows how to set up AzureDevOps CI/CD pipelines to be set for a full stack application. Here I use a multilayered solution set up which show the tasks based on users. Below is the technology stack which is used.

  • Frontend UI – Angular 5
  • Middleware APIs- ASP.NET WebAPI
  • RDBMS – SQL Server 2012
  • Dependency Injection – Unity
  • ORM – EntityFramework
  • Framework – .NET Core

I have code hosted on github as public repo.

Our projects in the solution would look like below:-

This image has an empty alt attribute; its file name is image.png

First, create an AzureDevOps account by going to azure web portal. https://dev.azure.com

As for pricing, Azure DevOps is free for open source projects and small projects (up to five users).

I have created Tracker as a private project, which I will be using for my Azure CI/CD pipeline.

Once you create a project there will be an option on the left-hand side, which gives us a submenu to show files and its metadata.

After I click files, I would not see any files. Since I am using git version control and the source is hosted on GitHub. I will fire these two commands in the command prompt to push my latest changes.

git remote add origin https://github.com/varunmaggo/Tracker.gith
git push -u origin --all

Now the code is pushed and the next step is to create AzureDevOps pipeline, on the left-hand side, there is an option. We would need to create Build and Release pipelines separately.

Again goto build option, we would see an option, where we need to create a build agent with multiple configurations.

  • Install node package manager,
  • Install angular cli
  • Build packages for angular,
  • Nuget restore to install packages for WebApi’s solution.
  • run unit tests,
  • And finally, publish artefacts.

Once we are set with these build pipelines, we would need to proceed for Release Pipeline.

In order to

In order to make it simple, I would use the staging environment. In real-world scenarios, we can have dev, stage and prod separately.

In the image below, we select the build source type, which is our build pipeline, and we would like to

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.