Loading

CLOUD Azure

Easily Create SPA With .NET 6.0 And Angular 13 And Deploy To Azure. The Complete CLOUD Azure Developer Course 2022 [Videos].

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

In an SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the proper resources are dynamically loaded and added to the page as necessary, usually in response to user actions. 

Single-page applications perform well compared to traditional web applications. We can create SPAs in Angular or React very easily.  

When you are creating an Angular or React application, you need to create a backend application. Usually, we use .NET, Node, Java, PHP or Python as backend applications. We must create and run separate backend applications. Visual Studio supports creating both Angular (or react) and .NET Core in a single application. The advantage is that we can host(publish) both these applications in a single domain as a single application.  

Visual Studio 2022 latest version (17.1.0 as of 6th March 2022) allows us to create a single-page application with .NET 6.0 and Angular 13. (Earlier versions of Visual Studio 2022 create Angular 12 version by default) 

We can see all the steps to create an SPA and we will also see how to publish this application into Azure.  

Create ASP.NET Core and Angular application in Visual Studio 2022 

Currently Visual Studio has two templates for Angular applications. 


We can choose the first template ASP.NET Core with Angular. The second template is used to create standalone Angular applications.  

We can give a valid file name and click the next button.  


I have unchecked the HTTPS configuration. You can choose HTTPS if needed.  

Our project will be created in a few moments.  

We can see the structure of the entire SPA application. 

If you open the project file (.csproj) you will see the details below. 


By default, Angular 13 application is created inside a ClientApp folder. It is set inside the SpaRoot property. If you rename the ClientApp folder, you must change the property value in this project file as well. Angular running port is set inside the SpaProxyServerUrl property. If you want to change the Angular running port number, you can change inside this property. At the same time, you must change the package.json file of Angular application also.  

We can see the Angular app structure. 


As we discussed earlier, Angular app is created under the ClientApp folder. The project structure is like a normal Angular 13 project, but it has two modules. It also has a new file named proxy.conf.js. This is a configuration file which has the ASP.NET backend controller names. We will discuss more about this file later.  

We will be deploying this application to Azure. Hence, we can create a simple working application instead of default template. We will be creating an application to analyze the C# Corner posts (Videos/blogs) details of an author.  

I have alwatchy written two detailed Videos about this topic and published. Please watch the below Videos.  

Easily Do Web Scraping In .NET Core 6.0

Easily Create Charts In Angular 13 with Dynamic Data

Complete the Backend ASP.NET Core 6.0 application 

We must install the libraries below using NuGet package manger.  

  • HtmlAgilityPack  
  • Microsoft.EntityFrameworkCore.SqlServer  
  • Microsoft.EntityFrameworkCore.Tools 

We are using Entity framework in this application.  

We can add database connection string and parallel task counts inside the appsettings.json file. 

appsettings.json 

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "ConnStr": "Data Source=(localdb)MSSQLLocalDB;Initial Catalog=AnalyticsDB;Integrated Security=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False"
  },
  "ParallelTasksCount": 20
}
C#

Database connection string will be used by entity framework to connect SQL database and parallel task counts will be used by web scraping parallel foreach code. 

We can create a Feed class inside a Models folder. This class will be used to get required information from C# Corner RSS feeds. 

Feed.cs 

namespace Angular13ASP.NET6SPA.Models
{
    public class Feed
    {
        public string Link { get; set; }
        public string Title { get; set; }
        public string FeedType { get; set; }
        public string Author { get; set; }
        public string Content { get; set; }
        public DateTime PubDate { get; set; }

        public Feed()
        {
            Link = "";
            Title = "";
            FeedType = "";
            Author = "";
            Content = "";
            PubDate = DateTime.Today;
        }
    }
}
C#

We can create an ArticleMatrix class inside the Models folder. This class will be used to get information for each Video/blog once we get it after web scraping. 

ArticleMatrix.cs 

using System.ComponentModel.DataAnnotations.Schema;

namespace Angular13ASP.NET6SPA.Models
{
    public class ArticleMatrix
    {
        public int Id { get; set; }
        public string? AuthorId { get; set; }
        public string? Author { get; set; }
        public string? Link { get; set; }
        public string? Title { get; set; }
        public string? Type { get; set; }
        public string? Category { get; set; }
        public string? Views { get; set; }
        [Column(TypeName = "decimal(18,4)")]
        public decimal ViewsCount { get; set; }
        public int Likes { get; set; }
        public DateTime PubDate { get; set; }
    }
}
C#

We can create an Authors class inside the Models folder.  

Authors.cs 

namespace Angular13ASP.NET6SPA.Models
{
    public class Authors
    {
        public string? AuthorId { get; set; }
        public string? Author { get; set; }
        public int Count { get; set; }
    }
}
C#

We can create Category class. 

Category.cs 

namespace Angular13ASP.NET6SPA.Models
{
    public class Category
    {
        public string? Name { get; set; }
        public int Count { get; set; }
    }
}
C#

We can create our DB context class for Entity framework. 

MyDbContext.cs 

using Microsoft.EntityFrameworkCore;

namespace Angular13ASP.NET6SPA.Models
{
    public class MyDbContext : DbContext
    {
        public MyDbContext(DbContextOptions<MyDbContext> options)
            : base(options)
        {
        }
        public DbSet<ArticleMatrix>? ArticleMatrices { get; set; }

        protected override void OnModelCreating(ModelBuilder builder)
        {
            base.OnModelCreating(builder);
        }
    }
}
C#

We can create our API controller AnalyticsController and add web scraping code inside it.  

AnalyticsController.cs 

using Angular13ASP.NET6SPA.Models;

C#

We are using a local database. You must run the migration commands below in Package Manager Console to create database and table.  

PM > add-migration InititalScript 

PM> update-database 

We have completed the backend code. 

Complete the Angular 13 application 

We can run the npm command to install the node modules for Angular application. 

We can open the ClientApp folder in command prompt and install node modules. (If you have not installed node modules, the system will automatically install while running the application for the first time.) 


npm install

We must install the client libraries below in our Angular application. 

  • chart.js  
  • ng2-charts  
  • bootstrap  
  • font-awesome 

We can use below single npm command to install all these libraries. 

npm install bootstrap chart.js font-awesome ng2-charts  

We can change styles.css file with code changes given below.  

styles.css 

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";
CSS

We can create a new Angular component Analytics using the command below. 

ng generate component analytics 


We have received an error. The reason is, we have two different modules in Angular app.  

We must specify the correct module name. 

ng generate component analytics --module=app.module.ts 

We can change the component class file with code below. 

analytics.component.ts 

CSS

We can change the Home component 

home.component.html 

JavaScript

We have completed the entire application. We can run the application now. 


You can notice that Angular is running in port 44456 and .NET Core is running in port 5172.  


First, the application is running in port 5172 and once the Angular application is watchy it will be redirected to port 44456. 

This will take some time to start the application locally. We must be patient. Also, sometimes you will get two command prompts for Angular application before the application starts fully. You can close the second command prompt.  


Click the menu in the navigation bar or click the link in the center of the page to open the C# Corner analytics page. 

We can populate the author data by giving proper author id.  


We can deploy this application to Azure now.  

We must create a Web App in Azure portal first.  


We must choose .NET 6 as the runtime stack.


We can choose a valid App Service plan name and size. I have chosen a basic plan. It will be a shared resource with 240 minutes (about 4 hours) of compute per day.  


I have not enabled the Application Insights for this Web app. We can review it and create. 

Web App will be watchy in a few moments.  

I have alwatchy created an Azure SQL server database in Azure portal. We must change the database connection string to this Azure SQL database in appsettings.  

Now we can deploy our SPA to this web app.  

You can click the Publish menu from solution (right click) and choose Azure option. 


Click the next button and choose App Service Plan (Windows) 

We must choose our Azure subscription.  


We can see that the alwatchy created Web app is available under the resource group. 

Choose the Web app and click on the finish button.  

Our publishing profile is created now. We can click the Publish button to deploy our application. 


Both Angular and .NET applications will be deployed to a single Azure Web app soon. 

We can see that the Web app is working as expected.


You can try this Live App and populate your favorite authors data. 

Conclusion 

In this post, we have seen how to create an SPA with ASP.NET Core 6.0 and Angular 13. We have created a Web app which populate the C# Corner Authors data and display the post category as a chart. We have run this application locally and then created an Azure Web app in Azure portal and deployed our SPA to this Web App. I am still working on this Analytics application and will be adding more interesting features in coming days. Please feel free to give your valuable feedback about this application and Video.

See All

Comments (606 Comments)

Submit Your Comment

See All Posts

Related Posts

CLOUD Azure / Blog

How to Creating ASP.NET Web App In Azure?

Azure Web App is very popular service in Azure and it is very cheap in cost as compared to the other services. It provides awesome features and a highly scalable, self-patching web hosting service. Deployment is quite simple with Azure. The advantage of Azure Web App is that it supports multiple languages, like .NET, Java, PHP, Node.js.
7-Feb-2022 /21 /606

CLOUD Azure / Blog

What Is Azure Functions?

Azure functions is a serverless concept of cloud native design that allows a piece of code deployed and execute without any need of server infrastructure, web server, or any configurations. Azure functions can be written in multiple languages such as C#, Java, JavaScript, TypeScript, and Python.
7-Feb-2022 /21 /606

CLOUD Azure / Blog

Getting Started with Azure File Storage

Azure File Storage, a Microsoft cloud storage solution for modern applications, offers a file-sharing system in the cloud. This system is easily accessible via Server Message Block (SMB) protocol or NFS protocol.
8-Mar-2022 /21 /606