Implementing the full CI/CD cycle on an Angular/ASP.NET Core application is not easy. Some digging and experimentation is necessary to make everything work. The goal of this article is to pinpoint the different steps and tricks.

The source code is available on GitHub: devpro/aspnetcore-angular-sample. There will also be links to the live demo, as well as the build and deployment pipelines.

1. Setup

.NET Core 2.2 SDK

At the time of writing (2/3/19), 2.2 is not installed with the latest version of Visual Studio 2017 (15.9.6), you have to install it manually from dotnet/download. Latest version is Microsoft .NET Core SDK 2.2.103 which installs: .NET Core SDK 2.2.103, .NET Core Runtime 2.2.1 and ASP.NET Core Runtime 2.2.1.

SonarCloud account (optional), it is free and you can log in with your GitHub account

2. Create the Web Application

2.1 Initiate a Git Repository (Source Control)

You can choose the provider you want as long as it is accessible from Azure DevOps. Personally, I would go with GitHub.

Then, you just have to clone this repository locally and create a new feature branch. It is optional to do this before the following step, but it is how I’m used to working.

2.2 Use Visual Studio Template

Open “Visual Studio 2017” and click on “Create new project…” A small wizard will help you create the first project. You could do this also from the command line with dotnet.

Go in “.NET Core” and select “ASP.NET Core Web Application,” edit the name, location (where you did the git clone), and solution name. Click “OK” to go on the second page, make sure you can see “ASP.NET Core 2.2” at the top of the window, select “Angular” and click on “OK.”

At this point, the project has been created and you can see the file hierarchy in the “Solution Explorer” Window. There are not many files, but this is why .NET Core is so great (in comparison with the old .NET way) — this makes it so much easier to work with!

Feel free to have a look at the different files:

ClientApp is where the Angular application is located.

Controllers is where you have ASP.NET Controllers. There is a basic Controller here to demonstrate the call from the Angular application.

The pages directory and Program.cs file can be ignored. This is the plumbing between ASP.NET Core and Angular.

Startup.cs is important for the configuration of the ASP.NET application (like dependency injection configuration).

2.3 File Edition

Some updates need to be made on the source code that has been generated to make everything work.

src directory

Manually rename the solution folder created by VS 2017 to src, edit and move the .sln (solution) file so that it is at the root folder.

Add a .gitattributes file and a .gitignore file at the root to avoid git issues.

*.csproj files

As we’re going to use SonarCloud, a few mandatory lines must be added to every csproj file in the solution (look at AssemblyName, RootNameSpace, ProjectGuid, and the Debug PropertyGroup).

Then, you can launch the tests locally with: npm testand npm run test-ci.

3. Create the Continuous Integration (CI) Pipeline

3.1 Create a New SonarCloud Project

Go to SonarCloud, click on your Organization, then click on “Administration” and “Projects Management.”

Click on “Create Project” and fill the name and the key. You can then create a token if not done already, this is required from Azure DevOps to create a connection between the two systems.

3.2 Create a New Build Pipeline

You can find the full definition from the public project Demo (you can export the JSON definition of the pipeline).

Go to “Azure DevOps,” log in, create a new Project (or use an existing one). Then, click “Pipelines” > “Builds” from the menu on the left, and click on “New Pipeline.”

There are basically two ways to do it: 1) yaml file, 2) visual designer (this is for me the easiest way to learn). Click on the link “Use the visual designer,” select the “source” (git repository), gives an authorization if it’s the first time it’s done. Finally, select the “ASP.NET Core” template and click on Apply. The UI configuration will be displayed and you can do everything from here.

4. Create the Continuous Deployment (CD) Pipeline

4.1 Create a Packaging Pipeline (PKG)

The CI pipeline is used to continuously check the quality of the code source, it needs to run in Debug mode, and be as quick as possible. On the other hand, we need a pipeline to generate an optimized version of the website, only when needed. This is where the packaging pipeline finds its use (working example here). You can configure the triggers to match your delivery process.

4.2 Create a Azure Web App Resource

Creating a new Azure resource is easy to do manually with the portal, but you can also automate it.

4.2 Create a Release Pipeline (CD)

In “Azure DevOps,” go to “Pipelines” > “Releases,” and create a new pipeline. The “Azure App Service deployment” is easy to configure and will get you started quickly (working example here).