Deploy Dotnet Core API and Angular 5 on IIS - PART 2

Deploy Dotnet Core API and Angular 5 on IIS - PART 1

Deploy Angular Application on IIS Part 2. 

In this post, I am talking about deployment of angular 5 application on Internet Information Service.

      

NOTE: Your Angular Application is working in the Non-root folder on IIS

In our application usually, we are using Angular Router module for purpose of single page application.

While deploying it to production you will need to do some configuration.

this Article explain you steps required to deploy an Angular Router application On IIS.     

What will be covered in this Article 

l Create a new Angular CLI example project.

l Install URL Rewrite Module on IIS.

l Add web.config with URL rewrite rule.

l Publish application code using the base-href flag.  

l Deploy application.

Create a new Angular CLI example project.

ng new hello-word

and simple run ng serve --open in localhost

It’s just a testing that generated Cli code is working fine.   

Install URL Rewrite Module on IIS.

l If you did not install IIS on your system then Install Internet Information Services.

l Install The URL Rewrite Module 

Add Web.config with URL Rewrite rule.

The server configuration requirement is documented on the Angular Deployments page in the Server configuration section    

<configuration>

<system.webServer>

<rewrite>

<rules>

<rule name="Angular Routes" stopProcessing="true">

<match url=".*" />

 <conditions logicalGrouping="MatchAll">

  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

  </conditions>

   <action type="Rewrite" url="/helloword/" />

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

I Added Url base as helloword it means our base URL will be

http://localhost/helloword/index.html, and the rest of the routes will be open with this.

  <action type="Rewrite" url="/helloword/" />

Now we want it to get included in our build folder so we can deploy it with our application. Let’s add it to the .angular-cli.json

  "assets": [

"assets",

"favicon.ico",

"web.config"

],

Publish application code using the base-href flag

Angular Deployment page is explaining the Base Tag

<base href="/">

This generated page will not work as it router will use “/” as the base for composing navigation URL’s and static assets will be looked in the current directory.

To resolve this problem here we use base-href flag with and the flag will get available in Index.html.  

ng build --base-href /helloword/ --prod

Look into your Dist folder there is index.html file and web.config

Both files have the same URL “/helloword/”.

<base href="/helloword/">

<action type="Rewrite" url="/helloword/" />

Deploy Application

 

Give it to alias name and select your build (dist) folder path.

Now Simply Run And test your hosted application from

Manage Application > Browse

Deploy Dotnet Core API and Angular 5 on IIS - PART 1

Timeout exception in stored procedure sql server

How to resolve Timeout exception in Stored Procedure Sql Server.

Using Temp tables.

Today i will be talking about how to improve Stored Procedure performance. I was working on a lengthy stored procedure where some tables are used frequently.

For example tblDoctors, tblPatients and a master table.

In the store procedure i was using these tables around 10 times.

all tables are having around 10 lakh records.

I need to select all records from tblDoctors table based on some key fields and update in patient table or master table.

Likewise i wanted to update around 10 column in each table based on some conditions.

So there were some 10 update and 10 select statements.

So due to that Timeout exception was coming in the stored procedure, Because i was hitting the tables around 10 times and then updating.

So to solve this problem we have added 2 local temporary tables where data was more.

Like #tblDoctors, #tblPatients

Now we will select all records based on some key fields which is used filter those records. Then insert them into Temp tables.

Now the load will be less.

Do your all operations in temp table and at the find Join with actual table and update all the fields from temp to actual tables.

Thanks

Deploy Dotnet Core API and Angular 5 on IIS - PART 1

While working with Dotnet core and Angular, I come across a requirement to deploy production code to server.I am going to share hosting method for Dotnet core Api and Angular 5 On IIS server.

Host Dotnet Core App On IIS

NOTE: I installed dotnet core version 2.1.200 in my machine.

I am assuming that you you have created Api project and ready to IIS configure.you can create api from here

When creating a new project you can see a Program.cs file in folder, and it contains the following code.

public class Program

{

public static void Main(string[] args)

{

var webHost = new WebHostBuilder()

.UseStartup<Startup>()

.Build();

webHost.Run();

}

}

Configure WebHostBuilder

In dotnet core application we have to define WebHostBuilder object for web server.Inside the WebHost object we have add some configuration for application hosting.

Add bellow methods in WebHostBuilder setup code

.UseKestrel()

.UseContentRoot(Directory.GetCurrentDirectory())

.UseIISIntegration()

What does these method ?

UseKestrel() :  kestrel is a cross-platform web server for asp.net core. and it's by default included in asp.net core project templates.

UseContentRoot : When you call dotnet run from your project folder without this function, the content root path is in your bin output folder.

UseIISIntegration() : If you are going to host your app ISS, the UseIISIntegration() method should be called as part of building the host.

And it will be work as revers proxy in front of Kestrel.

NOTE: Usekestrel and UseIISIntegration() are very different actions.IIS is only used as a reverse proxy.Usekestrel creates the server and hosts the code.UseIISIntegration specifies IIS as the reverse proxy server. And also examines environment variables used by IIS/IISExpress and makes decisions like which dynamic port use,which headers to set,etc.

What is AspNetCoreModule ?

As you can see the web.config file is available in your project root folder.

It’s only used when deploying your application to IIS. It registers the AspNetCoreModule as an HTTP handler. It handles all incoming traffic to IIS. And ensures that your application is running.

<handlers>

<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />

</handlers>

  

 

Okay… let’s move for server configuration

1) Install Dotnet Core Windows server hosting bundle

The deployment is not same as asp.net, there are some tooling for host your application. Before you deploy your application, you need to install the dotnet core hosting bundle for IIS. This will install .NET core runtime, libraries, and AspNetCoreModule.

DOWNLOAD Dotnetcore windows server hosting bundle

Make sure you pick “windows server hosting”

2) Build and Publish

If you simply run this command…

dotnet publish

Your project will be published to the default location which is inside your application’s bin folder.

<YourApplication>\bin\Debug\netcoreapp2.0\publish

Here you will find a portable version of your project which can be hosted in any number of place including on Linux or via IIS on windows.

3) Create Application is IIS

Copy files to preferred IIS location where you want the files to live. If you are deploying to a remote server, you may want to zip up the files and move to the server.

Open IIS manager, create a new IIS Application Pool.you will want to create under the .NET CLR version of “No managed Code” Since IIS only works reverse proxy, it’s not actually executing any .NET code

Now Create your new application under your existing hosted sites,or create new ISS application.select your new IIS Application pool here.Point your published code.

4) Check and Run

Before run the application you need to check the AspNetCoreModule is present or not. To check go to Modules from application home and inside the Modules you can find that your application is running under AspNetCoreModule.

That’s it, Now you can run your app using Manage Application > Browse

Null Conditional Operator in C Sharp 6

Null Conditional Operator New Feature in C Sharp 6.

Overview:

I focus on little things. Null check is small thing yet big.

Today i am going to share a New feature introduced in C# 6, It is called Null Conditional Operator.

While coding we need to check null to prevent any exception at run time.

I have 3 classes as follow:

    public class Vendor

    {

        public int VendorId { get; set; }

        public string CompanyName { get; set; }

        public string Email { get; set; }

    }

    public class Product

    {

        public int ProductId { get; set; }

        public string ProductName { get; set; }

        public Vendor Vendor { get; set; }

    }

    public class Order

    {

        public long OrderId { get; set; }

        public Product Product { get; set; }

        public string GetCompanyName()

        {

            string companyName = string.Empty;

            try

            {

                //Null exception at run time

                companyName = Product.Vendor.CompanyName;

            }

            catch (Exception ex)

            {

                throw;

            }

            return companyName;

        }

    }

The GetCompanyName() Method is used to get the company name.

But it throws an exception at run time.

So we have to check null. There are two ways to check null.

Traditional way of checking null.

   public string GetCompanyName()

        {

            string companyName = string.Empty;

            try

            {

                //Null checking using If.

                if (Product != null && Product.Vendor != null)

                    companyName = Product.Vendor.CompanyName;

            }

            catch (Exception ex)

            {

                throw;

            }

            return companyName;

        }

In a large project the traditional way of checking null is a tedious task and code becomes unreadable. 

Using C Sharp 6 Null-Conditional Operator.

        public string GetCompanyName()

        {

            string companyName = string.Empty;

            try

            {

                companyName = Product?.Vendor?.CompanyName;

            }

            catch (Exception ex)

            {

                throw;

            }

            return companyName;

        }

How null operator works?.

• If the variable on the left side is null, the expression is null.
• If the variable on the left side is not null, then we continue with the dot.
• "If null then null; if not then dot".
• ?. Is the null-conditional operator.
• Called as "Elvis operator".

Summary.

In this article i discussed about new feature introduced in C Sharp 6. Use it in your project and share your feedback in the comment section.