Routing in React.js Single Page Application using React-Router-Dom

The compositional pattern of the React.js library makes Single Page Application (SPA) development easier. The most important need of SPA is an implementation of Routing in the app. Since React.js does not have any built-in routing support, we can install the react-router-dom library which provides a set of objects to enable router functionality for React applications. 

The react-router-dom provides some of the following important classes:

1. Router - the common low level interface for all router components. This contains the route expression to the components using the following properties: 
- path -  this property contains the URL used for navigating to a component. 
- component - name of the component to navigate to. 
- exact - when the property value is true, this will navigate only when the path exactly matches the location.pathname . 

Fluent Validations in ASP.NET Core

In this article we will implement  Fluent Validations using ASP.NET Core.

Most of you might have used Data Annotations for server-side model validations. We use data annotations to apply validations on public properties of the entity/model class so that when the view is submitted, these model validations are executed. 

Although Data Annotations are good, we have some limitations, e.g. the Data Annotations are bound to the properties so performing conditional validations is difficult. 

To implement conditional validations, we need to write logic in controller and execute it. This is where we need to think of an alternative to the Data Annotations. Fluent Validation is a cool solution we have for performing validations on model classes. 

Fluent Validation is a .NET library for building strongly-typed validation rules. It has support from .NET Framework v4.6.1+ and .NET Core v2.0 onwards. 

Testing Angular Component using Jest

In this tutorial, we will go through the steps for testing Angular Component by using the Jest framework.

Since Angular is a widely used front-end application development framework, it is the responsibility of each developer to make sure that the components are implemented as per the requirements of the project.  

Unit Testing is one of the recommended approaches of guaranteeing the quality of the application. 

What is Unit Testing?

Unit testing is an approach of software testing where individual units of the code are tested against the test data. The purpose of unit testing is to validate that each unit of the software performs operations as per expectations. Unit testing involves the lowest cost because each test targets to a limited scope. Unit tests are fast and less time consuming. 

Understanding the Angular Testing Object Model

One of the best advantages of using Angular is that it provides the Testing Objects model. Now the question is why is this so important?  

The reason behind this is the execution of an  Angular application. The Angular application is executed using the NgModule environment configuration. This means that, all components and their dependencies e.g. standard module like FormsModule and other Angular Services,  are finally managed by NgModule; so naturally when we try to test the component, we need a similar environment to instantiate component with its dependencies. 

ASP.NET Core 3.1 Unit Testing using xUnit and Moq

In any software life-cycle, Testing is an important step for ensuring a good quality software application. Typically, in case of web applications, testing plays an important role. In the software applications, we have the following major testing types:

1. Unit Testing is the most popular testing methodology. The unit test helps to test every small unit of the source code. Unit testing is used to mock the dependency of the code so that the individual unit of the code is tested separately without including the dependency in the test code. Typically, in a software application, the unit is a class or a method in a class. If the class has any dependency, then to unit test the code, we mock the dependency to attain loose coupling. Unit Testing can be done by a developer and the developer can test the quality of the code.
2. Integration Testing uses an approach where tests includes individual units and all these units are tested as a group. The advantage of the integration testing is to detect and expose faults during an interaction between these integrated units of the software application. Since, the integration testing uses all units in the test, writing integration test is a costlier approach.
3. End-to-End Testing is an approach of testing the entire system. In this approach, the testing is implemented by considering every component of the software application right from the UI to the data persistence layer. This guarantees the expected workflow of the software application. The entire application is tested for the critical functionalities such as communication with third party components, databases, networks, etc.

Considering the various testing types, we can see that the cost of the Unit Testing is very low where as End-to-End testing proves costlier, but nevertheless important.

If we consider the number of tests required for software applications, then we can say that we must write several unit tests. How many? As a thumb rule, the overall number of methods written by developers in software applications, should be the number of unit tests you write. Also, if we have conditional statements in these methods, then we have to write one unit test per conditional statement. Cumbersome, but totally worth the cost and time put into it.

This is also the reason why unit tests are the responsibility of the developer or so to say if Test-Driven-Development approach (or user stories and test cases) is understood by the developer, then the code can be bug-free. Figure 1 shows the summary of the testing methodologies.

       

Figure 1: Testing methodologies summary

In this article, we will be implementing Unit Testing of an ASP.NET Core 3.1 application. We will implement the Unit Test MVC Controller, API Controller by mocking their dependencies.

Accessing Azure Table Storage in Node.js Applications

Microsoft Azure Storage services provides features of storing NoSQL data in the Table Storage. The Azure Table Storage stores schema-less data using Key/Value pairs. Since the data store is schema-less, we can use Table Storage to store the data for those applications that are designed and targeted to flexible data capture. Although the data is stored as schema-less, it is easy to query the data using simple querying mechanism.

You can consider using Table storage where you need not to use complex joins, stored procedures for any data operations. 

Table Storage and Creating Resource Group and Storage Account

Following are some of the features of Azure Table Storage

• Table is a collection of entities. These entities does not enforce any schema. This provides a flexibility to store data for different set of properties for entities.
• Entity is a set of properties. Conceptually we can map an entity with a table row on relational database. The max size of entity in Table is 1 MB.
• Property is a name/value pair. We can have max 252 user defined properties in entity and along with these there are 3 system properties present in entity. These properties are RowKey, PartitionKey and Timestamp.
• PartitionKey, this is the key based on which the data in the Table Storage is stored in logical partition. This provides query optimization while retrieving data from table storage.
• RowKey, is the unique identification of the entity in the table storage.        

To use Azure Storage, we need a Microsoft Azure Subscription. Please visit this link to create a free subscription. Make sure that you read all features and limits of using Azure Free Subscription. Once you have a subscription, login to the portal and you can start using its features.

Using Mongoose Framework to Access Azure Cosmos DB MongoDB API

Cosmos DB is a globally-distributed, multi-model database service on Microsoft Azure. Cosmos DB provides database services like SQL API, MongoDB API, Cassandra, Gremlin for storing NoSQL data.

We can create a Cosmos DB account to create a database and perform Read/Write operations on these databases using various SDKs like .NET, .NET Core, Node.js, JAVA etc. If you are working on  theJavaScript stack for building isomorphic apps using Node.js and other JavaScript frameworks like Angular, Vue.js or libraries like React.js, then you will mostly prefer to use MongoDB database for storing data. 

Most of the isomorphic apps those which are using MongoDB database, uses Mongoose framework to perform CRUD operations on the MongoDB Database. On Microsoft Azure, if you are using MongoDB API database service of Cosmos DB to store data,   there is a support available for Mongoose framework. This provides a similar coding experience of using MongoDB in on-premise applications. 

In this article, we will see how to access Azure Cosmos DB for MongoDB API using Node.js, Express application. Figure 1 explains the application structure

Creating Web Applications using MERN Stack

MongoDB: MongoDB 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.