Creating Web Applications using MERN Stack

MongoDBMongoDB is a cross-platform document-oriented database program. It is a NoSQL Database. The data is stored in JSON document format and this database can store images in Base64 encoded format. More information on MongoDB can be read from this link.


Express.js: This is a Web Application Framework for Node.js. We can use this for building REST APIs and also for building Web Applications. More information on Express.js can be read from this link.

React.js makes it painless to create modern front-end applications. This library provides an easy approach for building interactive views. 

Node.js: This is an open-source, cross-platform JavaScript runtime environment used to run JavaScript code out-of-browser. We use Node.js for server-side JavaScript execution. More information can be read from this link.

The Component is a major building block of a React.js application. Component is the object that contains data, logic and user interface (UI) for the View. We can build an application with complex Views  using React.js components. 

In JavaScript full stack applications, we can use JavaScript object model for End-to-End apps that varies  from UI to Database. We use MongoDB, Express.js, React.js and Node.js for designing such applications, which are collectively also knows as MERN apps. In this article, we will build a complete JavaScript application based on MERN a.k.a the MERN stack.   

File Upload using ASP.NET Core WEB API 3.1 and React.js Client Application

In this post we will see how to upload files (jpeg/png) to the ASP.NET Core 3.1 WEB API. We all know that WEB APIs are mainly used for Data Communication using JSON format across applications. But what if we want to use WEB APIs for accepting binary files from the client applications? 

In ASP.NET Core WEB API, the Request property of the type HttpRequest object from the ControllerBase class can be used to read the FormData posted by the client application. The following figure explains the approach of the application development


Figure 1: Uploading file from the Client Application to the ASP.NET Core WEB API

As seen in Figure 1, the WEB API project must be configured with Body Request limit to allow how much HTTP request body size will be accepted to process request. This is the FromData posted by the client application. The Static File middleware must be configured to define which folder will be used to store all uploaded files.

Parallel HTTP calls from Angular

Angular being an extensible framework is widely used for developing high responsive front end modern web applications.

These modern web applications consist of several complex workflows on the server side. To provide access of these workflows to client applications, we need REST APIs so that client applications can access these APIs over HTTP.

Client applications developed using  Front-End frameworks like Angular can make use of HttpClient object from @angular/common/http to access these REST APIs and then using Observable object from RxJs Angular, can store and manage data received from the REST APIs in the front-end application.

But what if the Angular application wants to makes call to REST APIs in Parallel? 


Using Entity Framework Core to access Stored Procedures having User Defined Table Types as Parameters

Last week while conducting a .NET Core Full Stack training, my client asked me to explain the mechanism of accessing SQL Server Stored Procedures using Entity Framework (EF) Core. They were creating an ASP.NET Core 2.2 WEB API app.

I have explained the entire process with examples and demonstrations. My attendees even requested me to show an example to access a stored procedure that accepts a User Defined Table (UDT) Type as input parameter.       

Entity Framework Core (EF Core) is an ORM for building the data access layer of modern applications.

EF Core provides Database First and Code First approaches to generate entity classes from database and generate Db Tables from entity classes respectively. The object model of EF Core provides methods to connect to a relational database and perform database transactions.

In most of the cases, we use Entity classes to perform all CRUD operations with the database. In this case, we will write all the logic for database operations in the .NET application by creating various repositories.

How to Create a Service connection from Azure DevOps to your Azure account

Many a times, we want to deploy our built application to Azure. Such deployment can be done using a service connection from Azure DevOps to Azure.

We may have an Azure account and also an Azure DevOps account created at different times. If both the accounts are created using the same Microsoft account (with same email address) then the authentication and authorization is seamless. In this article, I am going to show you how we can create a service connection to Azure from Azure DevOps even if you have used different Microsoft accounts to create Azure and Azure DevOps accounts.

I am putting a scenario in front of you.

I have an Azure DevOps account named SubodhS66, created using my email address subodhs66[at]hotmail.com. I do not have an Azure account against this account.

My Azure account and subscription named SS-VSTS is against the email address subodhsohoni[at]hotmail.com. I have a Web App Service (PaaS) resource created under this account. The name of that app service is DemoWebApp. It uses the Azure Resource Manager model. The code for this app service is in a git repository in a Team Project named “SSGS EMS” on my Azure DevOps account.

Accessing Azure CosmosDB database using Node.js and Express REST APIs

Last week, I was conducting a session on MEAN Stack. In this training, I taught my students how to access MongoDB in an Express application.

One of the attendees asked me to create a demo on accessing CosmosDB using Node.js apps.

In this tutorial, I will show you the steps to do the same.

CosmosDB is a multi-model, globally distributed database service on Microsoft Azure. It provides NoSQL data storage using Table Storage, SQL API, MongoDB, Gremlin, etc. More information on this can be read here https://docs.microsoft.com/en-us/azure/cosmos-db/introduction. I have also written a post on using Azure CosmosDB with ASP.NET Core and Angular. You can read about it over here https://www.dotnetcurry.com/windows-azure/1395/cosmosdb-webapi-angular-client.

In modern web application development  based on Isomorphic apps (pure JavaScript from Client-to-server e.g. MEAN/MERN Stack), the data storage is preferred as NoSQL data store. On  top of that, if this data store is provided and managed by and on cloud, then such storage services are highly preferred.

ASP.NET MVC – Flashback of Important Concepts

A decade ago, ASP.NET Web Forms was the flagship framework for designing and developing web apps using .NET.

Over the years, developers had been demanding the ability to develop Web applications using a model-view-controller architecture. To address these needs and to stay current with the web development standards, Scott Guthrie of Microsoft designed the first ASP.NET MVC framework in October 2007.

Since then, a lot has changed in the world of ASP.NET MVC, but a lot is still the same. Although ASP.NET Core is the recommended option to develop web applications, as a developer, one should be aware of some important concepts that shaped the current framework.

This article provides an overview of the ASP.NET MVC technology for those who are still working on it, and explains some important components along the way.

Global Error Handler in ASP.NET Core

Error handling is crucial for any application. In Line-of-Business (LOB) ASP.NET applications, error handling can be implemented in multiple ways. Generally, when an application needs to perform data validations on data submitted by end-users, we implement data validations using annotations which is also known as Model validation

Model validation is limited with the Model class (aka entity class), but our application must be capable to validate code while executing - this is known as exception handling.

Traditionally, most of the programming languages provide try…catch…finally block for exception handling. There is nothing wrong in having a try…catch…finally block for every method in each class of the application, but it is always better to implement a global error or exception handler. By having a centralized exception handling, we can make our code more readable and maintainable.

In ASP.NET MVC applications we have exception action filters. Using this action filter, it is easier for the developer to implement global exception handler. I have already posted on MVC Exception Handling at this link

In the current article we will implement error handling in ASP.NET Core applications for WEB API. It is important to to have a global exception handler in WEB API so that the API action methods can remain clean, readable and maintainable.

ASP.NET Core provides a built-In middleware for global error handling, but we can also implement custom middleware or even we can write try...catch block for each action method. We will implement error handling with all these methods.