Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Create an Angular 7/ASP.NET Core 2.2 Application and Push it to Azure

DZone's Guide to

Create an Angular 7/ASP.NET Core 2.2 Application and Push it to Azure

Learn how to developer and push an Angular and ASP.NET Core-based application to Azure in a CI/CD release cycle.

· Web Dev Zone ·
Free Resource

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

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.
    • You can check the version by running: dotnet -v.
  • npm
    • npm comes with the installation of Node.js.
    • You can upgrade the version by running: npm install -g npm (self-update is one of my favorite console features) and check the version:  npm -v(6.7.0 at the time).
  • Visual Studio 2017 (optional)
    • Version 15.9.6
    • Workloads: “ASP.NET and web development”, “.NET Core cross-platform development”
  • GitHub account or any other git remote repository provider account
  • Azure account
  • Azure DevOps (formerly named VSTS)
  • 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).
  <PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
    <AssemblyName>Devpro.AspNetCoreAngularSample.WebApp</AssemblyName>
    <RootNamespace>Devpro.AspNetCoreAngularSample.WebApp</RootNamespace>
    <ProjectGuid>{01549AAD-2FF4-4B8B-9B63-7E00C2948E96}</ProjectGuid>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <DebugType>full</DebugType>
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>

2.4 Build

You can either build from Visual Studio or from the command line by running dotnet build.

It will take several minutes to do the first build, as npm will gather the packages from scratch, but it will build almost instantly afterward.

2.5 Run

You can run the web application directly from Visual Studio (with Debug) or easily from the command line by running dotnet run –project src/WebApp.

The site will be available on localhost:5000. You may have a security alert about certificate and HTTPS, but you can deactivate this from Startup.cs if it annoys you.

You can then enjoy very basic Angular POC functionalities by going to the “Counter” and “Fetch data” pages.

2.6 Test

An important part of the CI pipeline is to run the tests and produce the code coverage.

  • To do so, you have to install the following npm packages:
npm install karma-junit-reporter karma-phantomjs-launcher phantomjs-prebuilt –save-dev

  • And, manually edit:
    • package.json to add a test-ci target.
    • angular.json to add codeCoverageExclude for test.
    • src/karma.conf.js to add PhantomJS and JUnit configuration.
    • src/polyfills.ts to uncomment ES6 lines.
  • Then, you can launch the tests locally with: npm test and 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.

Tasks
  Pipeline
    Agent Pool=Hosted VS2017Variables
    PHANTOMJS_BIN=$(System.DefaultWorkingDirectory)\src\WebApp\ClientApp\node_modules.bin\phantomjs.cmd

You can see an example of a project in SonarCloud: sonarcloud.io.

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).

The final step is to create a package it and release it, wait for the deployment and “Voilà!” (https://demo-angular-aspnetcore.azurewebsites.net/).

This is it! If you are working on this stack and have some issues, I hope it will help you find quickly how to fix them. Don’t hesitate to contact me or to leave a comment on this post. Happy coding!

Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.

Topics:
azure devops ,automation ,angular tutorial ,asp.net core tutorial ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}