Logging is an essential part of any web application development. It helps you to track errors, debug issues, monitor performance, and improve user experience. However, logging can also be challenging, especially when you have to deal with large volumes of data, multiple sources, and different formats.

That's why in this blog post, I will show you how to use Serilog and AWS CloudWatch Logging for .NET 6 web applications. Serilog is a popular and powerful library supporting structured logging and various sinks. AWS CloudWatch Logging is a cloud-based service that allows you to collect, store, analyze, and visualize your logs in a centralized place.

By following this step-by-step tutorial, you will learn how to:

• Set up Serilog and AWS CloudWatch Logging for your .NET 6 web application
• Configure Serilog to send logs to AWS CloudWatch Logging using AWS.Logger.Serilog sink
• Use Serilog enrichers to add contextual information to your logs
• Query and filter your logs using AWS CloudWatch Insights
• Create dashboards and alarms using AWS CloudWatch Metrics and Alarms

Ready to get started? Let's dive in!

Overview of Serilog and AWS CloudWatch

Before we dive into the tutorial, let's briefly review what Serilog and AWS CloudWatch are and why they are useful for logging.

Serilog

Serilog is a user-friendly logging library that provides structured logging and powerful support for structured diagnostic data. Serilog can be used to log information about application events, errors, and performance metrics. It is designed for .NET frameworks. Some of the features of Serilog are:

• Built-in support for structured logging, enabling logs to be treated as datasets rather than text.
• Seamless compatibility with asynchronous applications and systems.
• Flexible logging targets, including files, console, email, and other customizable outputs.
• Convenient message templates that simplify object serialization using the "@" operator.

Serilog uses message templates, a simple DSL that extends .NET format strings with named as well as positional parameters. Instead of formatting events immediately into text, Serilog captures the values associated with each named parameter.

Serilog’s support for structured event data opens up a huge range of diagnostic possibilities not available when using traditional loggers. You can query and filter your logs based on the properties, create dashboards and metrics from them, and leverage the power and flexibility of the cloud for your logging needs.

AWS CloudWatch

AWS CloudWatch is a comprehensive logging and monitoring service by Amazon Web Services. It provides a wide range of features for monitoring and troubleshooting resources within an AWS environment, including logging capabilities. It allows you to collect, store, analyze, and visualize your logs in a centralized place. Some of the features of AWS CloudWatch are:

Log Groups: Log groups are collections of log streams that have the same retention settings, access control, and monitoring parameters. Log groups organize and manage logs by providing a logical grouping for logs created by various AWS services or applications.

Log Streams: Log streams are sequences of log events that have the same source. Each log stream represents a distinct source of logs, such as an EC2 instance, a Lambda function, or an application running in an ECS container.

Retention Policies: Logs are stored in Cloudwatch forever by default. You may further customize this to your needs by changing the retention duration from 1 day to up to 10 years. Properly configuring the retention period also helps you save money on your monthly AWS bill, particularly for Production applications.

Log Data Collection: CloudWatch offers several methods for collecting log data. It collects logs directly from Amazon resources such as EC2 instances, Lambda functions, and CloudTrail. It also provides APIs and SDKs for sending custom logs from EC2 instances or on-premises systems.

Log Search and Analysis: CloudWatch has robust log search and analysis features. CloudWatch Logs Insights is a built-in query language that allows you to search and analyze log data using extensive filtering and aggregation tools. It also supports real-time monitoring of logs, making it easier to troubleshoot issues and gain insights into the behavior of your resources.

Monitoring and Alerting: CloudWatch allows you to configure metric filters and alerts on logs, which helps in monitoring and alerting certain log events or patterns. For example, you may configure an alert to warn you when the number of failures in your application logs surpasses a specific level. This provides proactive monitoring and alerting based on log data, assisting you in swiftly identifying and resolving issues.

Cloudwatch can also respond to events. For instance, you can create an alarm 🔔for a particular event which will then notify your team.

AWS CloudWatch Logging integrates well with Serilog using AWS.Logger.Serilog sink. This sink allows you to send your Serilog events to AWS CloudWatch Logging with minimal configuration. You can then use AWS CloudWatch Logging to view, search, filter, query, and visualize your Serilog events in the cloud.

By combining Serilog and AWS CloudWatch Logging, you can create a powerful and flexible logging solution for your .NET web application.

Setting Up Serilog with .NET 6

Serilog is a popular open-source logging framework for .NET applications that lets you capture, store, and query log events in a flexible and extensible manner. It enables you to set logging configuration in code, making it extremely versatile and adaptable to various logging needs.

Let's install and configure Serilog in our .NET 6 web API project. Open up the package manager console and run the following command.

dotnet add package Serilog.AspNetCore

Now, let's open the Program.cs file and configure Serilog in the web host.

using Serilog;

Log.Logger = new LoggerConfiguration()
    .WriteTo.Console()
    .CreateBootstrapLogger();

try
{
    Log.Information("Starting web application");

    var builder = WebApplication.CreateBuilder(args);

    builder.Host.UseSerilog((ctx, services, config) => config
    .ReadFrom.Configuration(ctx.Configuration));

    builder.Services.AddControllers();
    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();
    
    var app = builder.Build();
    app.UseSerilogRequestLogging();
    
    app.UseHttpsRedirection();
    app.UseAuthorization();
    app.MapControllers();
    app.Run();
}
catch (Exception ex)
{
    Log.Fatal(ex, "Application terminated unexpectedly");
}
finally
{
    Log.CloseAndFlush();
}

There are two ways to configure Serilog. The first is via the code in the startup method (in the Program.cs file) and the second is via app settings. We will use the app settings way. Before configuring the appsettings.json file, first let's understand the above code snippets.

Line #3-5: set up a static Log.Logger instance with two-stage initialization and write output to the console. An initial "bootstrap" logger is configured immediately when the program starts, and this is replaced by the fully configured logger once the host has loaded.

Line #13-14: We are instructing the Serilog Middleware to read the configurations from the appsettings.

Line #21: The built-in request logging is noisy with multiple events emitted per request. To enable this middleware, first, we need to override the default log level for Microsoft.AspNetCore to Warning in our appsettings.json file.

They are condensed by the provided middleware into a single event that has more manageable information. When we run the API now, we can clearly see the difference in the events emitted.

We have also added a try / catch block that will ensure any configuration-related issues are properly logged.

Next, let's add the Serilog configuration in the appsettings.json.

{
  "Serilog": {
    "Using": [ "Serilog.Sinks.Console"],
    "MinimumLevel": {
      "Default": "Information",
      "Override": {
        "Microsoft": "Warning",
        "Microsoft.AspNetCore": "Warning",
        "Microsoft.Hosting.Lifetime": "Warning"
      }
    },
    "WriteTo": [
      {
        "Name": "Console",
        "Args": {
          "outputTemplate": "[{Timestamp:G} [{Level:u3}] {Message}{NewLine}{Exception}"
        }
      }
    ],
    "Enrich": [ "FromLogContext", "WithMachineName", "WithThreadId" ]
  },
  "AllowedHosts": "*"
}

That's it, we now have Serilog configured in our web API project.

Setting Up AWS CloudWatch Logging with Serilog

AWS CloudWatch is a centralized and highly scalable logging service that collects, stores, and analyzes logs from multiple AWS services and custom applications.

There are different ways to integrate AWS CloudWatch logging for your .NET 6 application.

You can use the AWSSDK.CloudWatchLogs NuGet package that provides AmazonCloudWatchLogsClient to interact with CloudWatch logs. This approach requires you to write a little bit more code. Why repeat yourself if it's already done for you 🤔.

You may also use the Amazon logging provider for .NET. The GitHub project AWS Logging Dotnet provides a plugin for it that also utilizes AmazonCloudWatchLogsClient, which abstracts all of the complexities and mechanics of communicating with CloudWatch.

Serilog offers flexible configuration options for sinks, allowing you to receive log messages via a configuration file or programmatically through code. We will go through each method but first, let's install the following required NuGet package.

dotnet add package AWS.Logger.SeriLog

Configuring Serilog Sinks with AWS CloudWatch via a Configuration File

Up to this point, we have already configured Serilog in our application via the configuration file. Now let's open the appsettings.json file and modify it to write logs to CloudWatch.

{
  "Serilog": {
    "Using": [ "Serilog.Sinks.Console", "AWS.Logger.SeriLog" ],
    "LogGroup": "JokeFetcher",
    "Region": "eu-west-1",
    "MinimumLevel": {
      "Default": "Information",
      "Override": {
        "Microsoft": "Warning",
        "Microsoft.AspNetCore": "Warning",
        "Microsoft.Hosting.Lifetime": "Warning"
      }
    },
    "WriteTo": [
      {
        "Name": "Console",
        "Args": {
          "outputTemplate": "[{Timestamp:G} [{Level:u3}] {Message}{NewLine}{Exception}"
        }
      },
      {
        "Name": "AWSSeriLog",
        "Args": {
          "textFormatter": "Serilog.Formatting.Json.JsonFormatter, Serilog"
        }
      }
    ],
    "Enrich": [ "FromLogContext", "WithMachineName", "WithThreadId" ]
  },
  "AllowedHosts": "*"
}

Let's go through the changes that we have made to this file.

Line #3: We added AWS.Logger.Serilog in the using array.

Line #4: Added log group name that will be used to segregate the logs. We want to separate the log group for each application. In this case, we have supplied JokeFetcher which is the name I came up with for this demo project.

Line #5:  This is the AWS region where you want to store the logs. This is optional if you have configured an AWS profile on your machine because it is going to fetch it from there.

Line #22: We added AWSSerilog sink to the WriteTo Section. WriteTo Section accepts a list of sinks where you would want it to write logs. In our case, we have two sinks, the first one is the console and the second one is AWS CloudWatch.

Line #23-24: We have added a text formatter that will prettify the logs into clean JSON messages which is useful for structured logging. We will see its benefits in the filtering section.

Serilog automatically searches for AWS credentials using the standard .NET credentials search path, which includes checking for a profile named "default", environment variables, or an instance profile on an EC2 instance. To use a different profile other than "default", simply add a "Profile" under the "Serilog" node in your configuration. This allows you to easily customize the AWS credentials used by Serilog for authenticating with AWS services, ensuring secure and seamless logging in your .NET 6 application.

{
  "Serilog": {
    "Profile": {
      "Region": "your-aws-region",
      "AccessKey": "your-access-key",
      "SecretKey": "your-secret-key"
    }
  }
}

Programmatic Configuration of Serilog Sinks with AWS CloudWatch

Next, let's configure the AWS sink for Serilog using code. Simply use the "WriteTo" method to add the AWS sink to the logger. This provides you with the flexibility to programmatically configure the AWS logging sink for Serilog in your .NET 6 application, allowing you to easily customize your logging setup according to your requirements.

    AWSLoggerConfig configuration = new("JokeFetcher")
    {
        Region = "eu-west-1"
    };

    builder.Host.UseSerilog((ctx, services, config) => config
    .ReadFrom.Configuration(ctx.Configuration)
      .WriteTo.AWSSeriLog(configuration, textFormatter: new RenderedCompactJsonFormatter())
    );

Writing Log Events with Serilog and AWS CloudWatch

Once you've completed these steps, your application will be ready to write logs to AWS CloudWatch. Next, let's add a controller to test it.

using JokeFetcherAPI.Models;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;

namespace JokeFetcherAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class JokesController : ControllerBase
    {
        private readonly ILogger<JokesController> _logger;
        private readonly IHttpClientFactory _httpClientFactory;

        public JokesController(IHttpClientFactory httpClientFactory, ILogger<JokesController> logger)
        {
            _httpClientFactory = httpClientFactory;
            _logger = logger;
        }

        [HttpGet]
        public async Task<IActionResult> GetJoke()
        {
            JokeApiResponse jokeApiResponse;
            try
            {
                var httpClient = _httpClientFactory.CreateClient("Jokes");

                _logger.LogInformation("Getting programming jokes.");

                var httpResponseMessage = await httpClient.GetAsync("Programming");

                if (!httpResponseMessage.IsSuccessStatusCode)
                {
                    _logger.LogError("Failed to retrieve joke from external API with status code:{code}", StatusCode((int)httpResponseMessage.StatusCode));
                    return StatusCode((int)httpResponseMessage.StatusCode);
                }

                var joke = await httpResponseMessage.Content.ReadAsStringAsync();
                jokeApiResponse = JsonSerializer.Deserialize<JokeApiResponse>(joke)!;

                _logger.LogInformation("Got programming joke with ID:{jokeId} and category:{jokeCategory}", jokeApiResponse!.Id, jokeApiResponse.Category);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex, "An error occurred while retrieving joke");
                return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while retrieving joke.");
            }
            return Ok(jokeApiResponse);
        }
    }
}

Here, we have injected the Logger instance in the constructor via DI. Next, we have added a GET endpoint that will fetch a joke from an external API and would log some messages.

Now, let's test the endpoint from the postman.

Now that we have a 200 success status code from our API endpoint, we should have:

• A log group named JokeFetcher was created on AWS CloudWatch.
• Logs would have been logged to this log group.

Let's go to CloudWatch in the AWS Management Console to verify this.

You can see that the new log group has been successfully created. By clicking on the log group name, you can view the logs it contains, organized into log streams based on timestamps.

We have one log stream created inside the JokeFetcher log group. Click on the log stream to view the application logs.

Email communication is a vital aspect of any web application allowing businesses to deliver important notifications and connect and engage with customers effectively. However, ensuring that your emails reach your users' inboxes reliably and avoid the dreaded spam folder can be a challenging task.

That's where Amazon SES (Simple Email Service) comes to the rescue! Amazon SES is a highly scalable and cost-effective email service offered by AWS, which is designed to handle all aspects of email delivery and management. By using Amazon SES in your ASP.NET Core applications, you can get excellent delivery rates, improved email engagement, and, most importantly, maintain a positive sender reputation.

This guide will take you through the process of setting up your Amazon SES account and integrating it with your ASP.NET Core application, enabling you to send professional and personalized emails hassle-free.

By the end of this tutorial, you'll have the skills and knowledge to create a robust email delivery system that ensures your messages reach their intended recipients effectively and reliably.

So, let's dive in and unlock the full potential of sending emails from your ASP.NET Core application with Amazon SES.

Understanding Amazon SES

Amazon SES (Simple Email Service) is a powerful and cloud-based email service provided by Amazon Web Services (AWS). It offers developers a robust solution for sending and receiving emails efficiently and at scale. Understanding Amazon SES is crucial to harnessing its full potential for enhancing email communication within your ASP.NET Core applications.

What is Amazon SES?

Amazon SES is a cloud-based email service designed to make it easy for developers to send both marketing and transactional emails without the need to manage complex email infrastructures. It provides a simple API (Application Programming Interface) that developers can integrate directly into their applications. With Amazon SES, you can send notifications, updates, newsletters, and other critical communications to your users reliably.

Key Features of Amazon SES

• High Scalability: Applications that require frequent email communication or have a big user base can benefit from Amazon SES's ability to handle large-scale email operations.
• Cost-Effectiveness: You only pay for the emails you send thanks to Amazon SES's pay-as-you-go pricing model, which has no minimum purchase requirements or up-front charges.
• Robust Deliverability: Amazon SES a variety of strategies to improve deliverability rates and ensure that your emails land in the inboxes of your intended recipients rather than the spam folder.
• Bounce and Complaint Handling: It automatically handles bounced and complaint emails, which helps maintain a positive sender reputation.
• SMTP Interface and API Integration: Amazon SES supports both SMTP and API interfaces, allowing you to choose the integration method that best suits your application's needs.

Use Cases for Amazon SES

Amazon SES is suitable for a wide range of applications and industries. Some common use cases include:

• Transactional Emails: Send emails for user account creation, password resets, order confirmations, and shipping notifications.
• Marketing Campaigns: Run personalized email marketing campaigns to engage and retain customers.
• Application Notifications: Notify users about activity updates, product releases, or important announcements.
• Automated Workflows: Integrate Amazon SES with AWS Lambda or other AWS services to trigger emails as part of automated workflows.

Pricing

Amazon SES has a pay-as-you-go pricing model. However, the Free Tier is quite generous for you to try out. You can send nearly 200 emails every 24 hours for free (assuming you use an EC2 instance). In most circumstances, you will be charged next to nothing. Aside from that, you'll have to pay $0.10 for every 1,000 emails you send or receive, which is a pretty good offer. Each additional GB of data sent as an attachment will incur an additional charge of about $0.12.

Setting Up an Amazon SES in AWS Management Console

Let's go to our AWS Management Console and open up Amazon SES. This is how it would appear if you were to launch this service for the first time.

To start sending emails, we will have to create and validate a sender identity first, which is a domain or email address you use to send emails via Amazon SES.

Click on Create Identity.

For this demo, I will use an email address to create an identity. Make sure you have access to the mailbox as a verification email will be sent to this address.

After creating the identity, a verification email will be sent to the email address that you have put above which will look like this.

Click on the verification link to verify the email address.

Now you can check the status of the identity in the AWS Management Console. It should have now a verified status.

Sending Test Email from AWS Management Console

Now that we have verified the identity, let's send a test email from the management console. The Amazon SES mailbox simulator lets you test how your application handles different email-sending scenarios. Emails that you send to the mailbox simulator do not count toward your sending quota or your bounce and complaint rates.

• Select the Email Format as Formatted.
• Select the scenario as Custom. This will allow us to input a custom recipient for testing purposes.
• Enter the Subject and Body of the email and hit the Send Test Email button.

Requesting production access in AWS SES

Your Amazon SES account is in the sandbox when you create it. To request full access to be able to send to any (unverified) email address, you can request production access from the SES dashboard.

Configuring Amazon SES in ASP.NET Core

We will be using the ASP.NET Core Web API project using .NET 6 to send emails.

We can send email programmatically via two approaches: one is through the SMTP interface and the other is using the AWS SDK for .NET.

Sending Mail using Amazon SES via SMTP Interface in .NET

Our.NET Core API will need SMTP credentials (username and password) to log in with AWS SES in order to send emails.

• Navigate to the SMTP Settings from the left pane menu.
• Proceed to create your SMTP credentials by clicking on the Create My SMTP Credentials button. This action will redirect you to the AWS Identity and Access Management (IAM) section, allowing you to generate a new user with email-sending access.
• Click Create to create your SMTP credentials. You can modify the IAM Username or keep the default one provided by AWS.
• Click the Show User SMTP Security Credentials and then copy or download the username and password for use in the subsequent step.

Let's return to our Visual Studio and first install the necessary packages for your project.

Install-Package MailKit
Install-Package MimeKit

Create a new class named MailRequest.

public class MailRequest
{
    public string? ToEmail { get; set; }
    public string? Subject { get; set; }
    public string? Body { get; set; }
}

Next, create another class named MailSettings that will be responsible for loading configurations from the appsettings.json file.

public class MailSettings
{
    public string? Host { get; set; }
    public int Port { get; set; }
    public string? DisplayName { get; set; }
    public string? Mail { get; set; }
    public string? Username { get; set; }
    public string? Password { get; set; }
}

Now, let's configure the appsettings.json file with the following data. Replace the placeholder with your own data.

"MailSettings": {
  "Host": "<smtp server>",
  "Port": 587,
  "DisplayName": "<your name>",
  "Mail": "<ses identity registered mail id>",
  "Username": "<smtp username>",
  "Password": "<smtp password>"
}

• Host – SMTP endpoint from Amazon SES SMTP Settings
• Port – 587
• Display Name – This will be what your recipient will be able to see.
• Mail – the mail id that we registered earlier in SES.
• Username & Password – the credentials that we generated via Amazon SES (IAM User).

Now let's add a service for sending emails using the Mailkit package. Create a new folder called Services and add the following code.

public interface IMailService
{
    Task SendEmailAsync(MailRequest mailRequest);
}

public class MailService : IMailService
{
    private readonly MailSettings _mailSettings;
    public MailService(IOptions<MailSettings> mailSettings)
    {
        _mailSettings = mailSettings.Value;
    }
    public async Task SendEmailAsync(MailRequest mailRequest)
    {
        var email = new MimeMessage();

        email.From.Add(new MailboxAddress(_mailSettings.DisplayName, _mailSettings.Mail));
        email.To.Add(MailboxAddress.Parse(mailRequest.ToEmail));
        email.Subject = mailRequest.Subject;

        var builder = new BodyBuilder
        {
            HtmlBody = mailRequest.Body
        };
        email.Body = builder.ToMessageBody();

        using var smtp = new SmtpClient();

        smtp.Connect(_mailSettings.Host, _mailSettings.Port, SecureSocketOptions.StartTls);
        smtp.Authenticate(_mailSettings.Username, _mailSettings.Password);
        await smtp.SendAsync(email);
        smtp.Disconnect(true);
    }
}

Let's understand the code.

Lines 4-7: We are using the IOptions pattern to inject the configuration from the appsettings into the constructor.

Line 12: Adding From metadata into the email variable.

Line 22: Create a new SMTP client to connect to the host, port, and authentication details from appsettings.

Line 26: Sending email.

Open up the Program.cs class and register the dependencies into the DI Conationer of the ASP.NET Core application.

builder.Services.Configure<MailSettings>(builder.Configuration.GetSection("MailSettings"));
builder.Services.AddTransient<IMailService, MailService>();

Next, let's create a controller named MailsController and wire it up with the service.

We're going to create a new endpoint (/api/mails) that will call the IMailService's SendEmailAsync function. It's important to note that the endpoint accepts MailRequest as a request and passes it on to the service call, which sends the email via the SMTP client.

[Route("api/[controller]")]
    [ApiController]
    public class MailsController : ControllerBase
    {
        private readonly IMailService _mailService;
        public MailsController(IMailService mailService)
        {
            this._mailService = mailService;
        }
        [HttpPost]
        public async Task<IActionResult> SendMail(MailRequest request)
        {
            await _mailService.SendEmailAsync(request);
            return Ok();
        }
    }

Now run the application and test it using Swagger.

Sending Mail using Amazon SES via AWS SDK for .NET

Now that we have implemented how to send email using Amazon SES via the SMTP interface, let's implement it via the AWS SDK package for .NET.

First, install the following packages in the same project.

install-package AWSSDK.Extensions.NETCore.Setup
install-package AWSSDK.SimpleEmail

Next, add the following in the appsettings.json. Make sure you change the value that is applicable to you.

"AWS": {
  "Profile": "default",
  "Region": "eu-west-1"
}

Now, let's add a new service that uses AWS SDK packages. Create a new class name under the services folder and paste the following code.

public class SESService : IMailService
{
    private readonly MailSettings _mailSettings;
    private readonly IAmazonSimpleEmailService _mailService;
    public SESService(IOptions<MailSettings> mailSettings,
        IAmazonSimpleEmailService mailService)
    {
        _mailSettings = mailSettings.Value;
        _mailService = mailService;
    }
    public async Task SendEmailAsync(MailRequest mailRequest)
    {
        var mailBody = new Body(new Content(mailRequest.Body));
        var message = new Message(new Content(mailRequest.Subject), mailBody);
        var destination = new Destination(new List<string> { mailRequest.ToEmail! });
        var request = new SendEmailRequest(_mailSettings.Mail, destination, message);
        await _mailService.SendEmailAsync(request);
    }
}

This code defines a class named SESService, which is responsible for sending emails using Amazon Simple Email Service (Amazon SES) within an ASP.NET Core application. Let's break down the code step by step:

Lines 3-10: The class has two private fields, _mailSettings and _mailService. The _mailSettings field is of type MailSettings, and the _mailService field is of type IAmazonSimpleEmailService. we are injecting the dependencies of IAmazonSimpleEmailService and the email configuration into the constructor of this service using dependency injection.

Lines 13-15: we create the components needed for the email message using the information provided in the MailRequest parameter. We construct the email's body and subject and then specify the recipient's email address.

Line 16: We create a SendEmailRequest object, which is a part of the Amazon SES SDK. This object is used to send the email and requires the sender's email address, the recipient's email address, and the message content.

Line 17: Finally, we call the SendEmailAsync method of the _mailService field, passing the SendEmailRequest object we created. This asynchronous method is responsible for sending the email using Amazon SES.

Open up the Program.cs class and register the dependencies into the DI Conationer of the ASP.NET Core application.

builder.Services.Configure<MailSettings>(builder.Configuration.GetSection("MailSettings"));
//builder.Services.AddTransient<IMailService, MailService>();

builder.Services.AddDefaultAWSOptions(builder.Configuration.GetAWSOptions());
builder.Services.AddAWSService<IAmazonSimpleEmailService>();
builder.Services.AddTransient<IMailService, SESService>();

Now let's run the application and test it using Swagger as we did above. This time the email will be sent using the SES Service (the AWS SDK package for Simple Email Service).

Conclusion

To conclude, this article provided a comprehensive guide to sending emails with ASP.NET Core using Amazon SES, also known as the Simple Email Service. We covered all aspects of the implementation, and you can access the complete source code here.

If you found this article helpful, don't hesitate to share it with your colleagues. Your support will not only benefit them but also help increase the visibility of my blog. Thank you for reading, and I hope this guide empowers you to leverage Amazon SES for efficient email communication in your ASP.NET Core projects.

Real-time communication is a key requirement for modern web applications. Users expect fast and responsive applications that can provide real-time updates without the need to refresh the page. SignalR is a powerful technology that enables real-time communication between a client and a server, making it a popular choice for building real-time web applications.

However, as the user base grows, SignalR applications can become challenging to scale, especially when the number of clients and the amount of data being transmitted increases. This is where NCache comes in. NCache is a distributed in-memory caching solution that can be used to improve application performance and scalability.

In this article, we'll explore how to use SignalR and NCache together to build scalable and high-performance web applications. We'll start by introducing SignalR and NCache and their roles in web development. Then we'll show you how to use SignalR with NCache to improve web application performance. Finally, we'll discuss how to scale SignalR applications using NCache backplane.

Whether you're building a real-time chat application, a stock market ticker, or an online multiplayer game, the combination of SignalR and NCache can help you build high-performance, scalable, and real-time web applications. So, let's get started!

What is SignalR?

SignalR is an open-source library for ASP.NET that enables real-time communication between a client and a server. It allows developers to build real-time web applications that can push updates to clients as soon as the data changes on the server.

SignalR uses WebSockets to establish a persistent connection between the client and the server, enabling real-time communication. If WebSockets are not available, SignalR can automatically fall back to other transport mechanisms, such as Server-Sent Events (SSE), Long Polling, or Forever Frame.

SignalR provides a simple and easy-to-use API for building real-time web applications. It allows developers to send messages from the server to clients, from clients to the server, or even from client to client. This makes SignalR ideal for building applications that require real-time updates, such as online gaming, chat applications, or financial trading platforms.

SignalR also provides a robust error-handling mechanism that can handle connection failures, server timeouts, and other network issues. It also provides built-in support for scaling out, allowing you to scale SignalR applications across multiple servers.

Limitations of SignalR in a WebFarm

While SignalR is a powerful technology for building real-time applications, it can encounter certain limitations when implemented in a WebFarm environment. One of the main challenges of SignalR in a WebFarm is managing multiple servers and ensuring that messages are delivered correctly to all clients.

One major limitation is that SignalR relies on a single message bus for all servers in the WebFarm, known as the SignalR backplane. This can create a bottleneck when handling a large number of messages or clients and can result in delays or dropped messages. Additionally, SignalR's default load balancing algorithm is round-robin, which can lead to uneven distribution of messages among servers.

Another limitation of SignalR in a WebFarm is the inability to share in-memory data between servers. This means that if a client is connected to one server and then switches to another, it may not be able to retrieve the same data. This can lead to inconsistencies and incorrect data for the client.

To overcome these limitations, developers may need to implement workarounds or use third-party solutions such as NCache as a SignalR backplane. These solutions can help to distribute messages more evenly among servers and provide a shared cache for in-memory data. It's important to carefully consider the limitations of SignalR in a WebFarm and choose the appropriate solutions to ensure optimal performance and scalability for real-time applications.

Bottlenecks with SignalR Backplane

1. Real-time applications need less latency and more Throughput

• SignalR Backplane needs low latency and high Throughput.
• Database as SignalR Backplane is slow, Database can not scale out with increasing application load.

2. SignalR apps need guaranteed delivery of messages

• SignalR Backplane must be reliable.
• The database can choke down under extreme load and is a single-point failure.

3. SignalR Backplane must have high availability built into it

• SignalR backplane needs to be highly available.
• Backplane maintenance or unplanned outage can cause service delivery issues.

What is NCache?

NCache is an open-source distributed in-memory cache developed natively in .NET and .NET Core. NCache is a distributed cache that stores application data and prevents expensive database trips. It is extremely quick and linearly scalable. NCache can be used to reduce performance bottlenecks caused by data storage and databases, as well as to extend the capabilities of your .NET Core applications to handle high-volume transaction processing (XTP). It works both locally and configured as a distributed cache cluster for an ASP.NET Core app running in Azure or other hosting platforms.

NCache also provides built-in support for scaling out, allowing you to scale your application across multiple servers. It supports multiple cache topologies, including replicated, partitioned, and client-cache, enabling you to configure the cache to suit your application's needs.

Using SignalR with NCache

NCache stands out as an excellent option when considering third-party SignalR backplane providers due to several compelling reasons.

By combining SignalR with NCache, you can improve the performance and scalability of your real-time web applications. NCache can be used as a backplane for SignalR, enabling real-time updates to be shared across multiple servers.

When using NCache with SignalR, the client connections are distributed across multiple servers, and each server maintains its own connection to the NCache cluster. When a message is sent through SignalR, it is sent to the NCache cluster, which then distributes the message to all connected clients.

Using NCache as a backplane for SignalR offers several benefits.

1. It improves the performance of real-time web applications by reducing the load on the database server.
2. It enables high availability by distributing client connections across multiple servers, ensuring that clients can still receive updates even if one server fails.
3. It enables scaling out by allowing you to add additional servers to the NCache cluster as your application grows.

The main problem that NCache solves as a backplane is a scalability. NCache's distributed linear scalability enables each application to send messages to the backplane, and the backplane then sends the message back to the client's application. By eliminating the need to manage the complexity of parallel connectors, developers can focus on building robust applications without worrying about performance bottlenecks caused by backplane scalability limitations.

Scaling SignalR Apps with NCache Backplane

One of the key benefits of using NCache as a backplane for SignalR is the ability to scale out your application as your user base grows. NCache provides built-in support for scaling out, which allows you to add additional servers to the NCache cluster as your application grows.

When using NCache as a backplane for SignalR, client connections are distributed across multiple servers, ensuring that clients can still receive updates even if one server fails. This makes it possible to scale out your application by simply adding more servers to the NCache cluster. As new servers are added, the load is automatically distributed across all servers in the cluster, ensuring that each server can handle its fair share of the client connections.

Refer to the article Caching with NCache in ASP.NET Core for instructions on installing NCache and managing the cache using the NCache web monitoring application.

To begin the demo, we will use the existing ASP.NET Core SignalR application. The source code can be downloaded from GitHub.

The next step is to add a JSON object to the appsettings.json file.

"NCacheConfiguration": {
  "CacheName": "mylocalcache",
  "ApplicationID": "chatApplication"
},

CacheName: It is the name of the newly created cache

ApplicationID: should be a unique string relevant to the application.

To use NCache with SignalR, download and install the AspNetCore.SignalR.NCache package from NuGet Package Manager. Then, add the below code to the Startup.cs file. This code configures NCache options, including the cache name and application ID, using the values from the appsettings.json file.

services.AddSignalR().AddNCache(ncacheOptions => {
    ncacheOptions.CacheName = Configuration["NCacheConfiguration:CacheName"];
    ncacheOptions.ApplicationID = Configuration["NCacheConfiguration:ApplicationID"];
});

Start the application, then try to chat using two different user accounts. As soon as NCache starts, the NCache web monitor application will display the client count, as seen in the following figure:

The client connection is now established, and our SignalR application is using the NCache as a backplane:

Conclusion

In conclusion, NCache with SignalR is a powerful combination for building real-time applications that are scalable, reliable, high-performing, and deliver real-time updates to clients. By leveraging the benefits of NCache and SignalR together, developers can build applications that provide a seamless user experience and can handle a high volume of data and traffic.

NCache provides several benefits, including scalability, high availability, performance, reliability, and reduced database load. Using SignalR with NCache enables real-time updates to clients, ensuring that they are always viewing the latest data. This makes NCache with SignalR a perfect fit for use cases such as financial applications, gaming applications, social media applications, and other real-time applications.

React Hooks were introduced in React 16.8 which allows functional components to have access to state and other features like performing an after effect when a particular condition is met or specific changes occur in the state(s) without having to write class components.

In this article, I will explain how to use React Hooks (useState, useEffect, useContext, useRef, useReducer, useCallback, useMemo) and how to create your custom Hooks. Just bear in mind that you can use hooks solely for the functional component.

What is a Hook in React?

A hook is a special function that enables the use of state and several other features in functional components available in class-based components.

The rules of a Hook

Let's talk about the general rules of Hooks. It is important to know where in your code you can use hooks. You need to follow the rules to use Hooks.

1. Hooks can only be called inside React function components.
2. Hooks can only be called at the top level of a component.
3. Hooks cannot be conditional.

React useState Hook

Your application's status will undoubtedly change at some point. This might be any form of data present in your components, such as the value of a variable or object.

The React useState hooks allow us to track and reflect these changes in the DOM.

Let's see how can we use useState hook in a function component.

To use this hook, we first need to import it into our component.

import {useState} from 'react'

Next, we need to initialize our state by calling useState. It accepts an initial state and returns two values.

• The current state
• A function that updates the state

const [name, setName] = useState('John Doe');

We are destructuring the returned values from useState. The first value is a name which is our current state and the second value setName is the function that is used to update our state. Lastly, we set the initial state to John Doe.

Our state is initialized and ready to be used anywhere in our component. For example, we can read the state by using the state variable in the rendered component.

import { useState } from 'react';
function MyComponent() {
  const [name, setName] = useState('John Doe');
   return (
    <>
      <div>
        <p>My name is {name}</p>
      </div>
    </>
  );
}
export default MyComponent;

Similarly, we can update our state by using the state updater function.

import { useState } from 'react';
function MyComponent() {
  const [name, setName] = useState('John Doe');
  const changeName = () => {
    setName('Foo');
  };
  return (
    <>
      <div>
        <p>My name is {name}</p>
        <button onClick={changeName}> Click me </button>
      </div>
    </>
  );
}
export default MyComponent;

In the code above, we update the state with a button click.

At this point you might be thinking, what can the state hold?🤔

The useState hook can keep track of objects, arrays, strings, numbers, booleans, and any combination of these.

React useEffect Hook

I have written a separate post on React useEffect Hook

React useContext Hook

React useContext hook is a way to manage states globally no matter how deep they are in the components tree.

In React, there are three basic steps to using the context:

1. creating the context
2. providing the context
3. consuming the context.

But, before diving into details on the above steps, let's talk about what problem does useContext hook solves.

The short answer is props drilling.

The parent component in the stack that requires access to the state should hold the state.

For example, let's say we have many nested components and access to the state is required by the components at the top and bottom of the stack.

We will need to pass the state as "props" through each nested component to accomplish this without Context. This is called "prop drilling". Let's see an example.

As you can see, components 2 and 3 did not need the state, even though they had to pass the state along so that it could reach component 4.

So, the solution to this problem is to use the useContext hook.

The main goal of using the context is to provide your components access to some global data and enable them to re-render if that global data is changed. When it comes to passing along props from parents to children, context is the key to solving the props drilling problem.

However, you should be careful before deciding to use context in your app as it adds complexity to the application and makes it hard to unit test.

A quick reminder, there are three basic steps to using the context, creating the context, providing the context, and consuming the context. Let's dive into more details about this and solve the props drilling problem.

Creating the context

To create context, you must import the built-in function createContext and initialize it.

import { createContext } from 'react';
const Context = createContext();

Providing the context

Context.Provider is used to provide the context to its child components, no matter how deep they are. You can use the  value prop to set the value of context.

function Component1() {
  const [user, setUser] = useState("John Doe");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hey ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

Now, the user Context will be accessible to every component in this tree.

Consuming the context

To use the Context in a child component, we need to access it using the useContext Hook.

import { useContext } from "react";

function Component4() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 4</h1>
      <h2>{`Hey ${user} again!`}</h2>
    </>
  );
}

The full example is below.

import { useState, createContext, useContext } from 'react';

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState('John Doe');

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hey ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  const user = useContext(UserContext);
  return (
    <>
      <h1>Component 4</h1>
      <h2>{`Hey ${user} again!`}</h2>
    </>
  );
}

React useRef Hook

This hook also makes it possible to access DOM nodes directly within the functional components.

UseState and useReducer in a React component can cause your component re-render every time the update methods are called.

Let's take a look at how to use the useRef() hook to keep track of variables without causing re-renders, and how to enforce the re-rendering of React Components.

useRef does not cause re-renders

The useState The hook itself causes a re-render, therefore if we were to count how many times our application renders using this Hook, we would be caught in an infinite loop. The useRef hook can be used to avoid this.

useRef(initialValue) accepts one argument as the initial value and returns a reference. A reference is an object having a special property current.

import { useRef } from 'react';

export default function LogButtonClicks() {
  const countRef = useRef(0);

  const handle = () => {
    countRef.current++;
    console.log(`Clicked ${countRef.current} times`);
  };
  console.log('I rendered!');
  return <button onClick={handle}>Click me</button>;
}

const countRef = useRef(0) creates a references countRef initialized with 0.

CountRef.current++ is increased when the button is clicked, and the handle function is also invoked. The reference value is logged to the console.

Updating the reference value countRef.current++ does not cause component re-rendering.

As you can see, updating the reference value countRef.current++ does not cause component re-rendering, because you can see in the console that 'I rendered!' is logged just once at initial rendering and does not re-render when the reference is updated.

Now, let's see the difference between reference and state by re-using  LogButtonClicks from the previous example. We will use the useState hook to count the number of button clicks.

import { useState } from 'react';

export default function LogButtonClicks() {
  const [count, setCount] = useState(0);
  
  const handle = () => {
    const updatedCount = count + 1;
    console.log(`Clicked ${updatedCount} times`);
    setCount(updatedCount);
  };
  console.log('I rendered!');
  return <button onClick={handle}>Click me</button>;
}

As you can see every time the button is clicked, the message 'I rendered!' gets logged in the console causing the component to re-render.

Accessing DOM elements

Most of the time, we should let React handle all the DOM manipulation, but there might be some use cases where we want to take control of DOM manipulation. In such scenarios, we can use useRef hook to do this without causing any issues.  

For instance, let's say we want to focus on the input field when the component mounts. To make it work you’ll need to create a reference to the input, and assign the reference to the ref attribute of the input, once the component mounts call the element.focus() method on the element.

import { useRef, useEffect } from 'react';

function TextInputWithFocus() {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (
    <input ref={inputRef} type="text"/>
  );
}

The functional component's function scope should either calculate the output or invoke hooks. Because of this, updating a reference and changing the state of a component shouldn't be performed inside the immediate scope of the component's function.

Either a useEffect() callback or handlers (event handlers, timer handlers, etc) must be used to change the reference.

import { useRef, useEffect } from 'react';

function MyComponent({ prop }) {
  const myRef = useRef(0);
    
  useEffect(() => {
    myRef.current++; // Good!👍
    setTimeout(() => {
      myRef.current++; // Good!👍
    }, 1000);
  }, []);
    
  const handler = () => {
    myRef.current++; // Good!👍
  };
    
  myRef.current++; // Bad!👎
    
  if (prop) {
    myRef.current++; // Bad!👎
  }
  return <button onClick={handler}>My button</button>;
}

As we can persist useRef values between renders, we can use this hook to keep track of previous state values.

import { useState, useEffect, useRef } from "react";

function MyComponent() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input type="text" value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

React useReducer Hook

The useReducer Hook is similar to the useState Hook which also allows you to manage state and re-render a component whenever that state changes. The idea behind useReducer is it gives you a more concrete way to handle complex states. It gives you a set of actions that you can perform in your state and it's going to convert your current state to a new version of the state based on the action that you send it. If you're familiar with redux, the useReducer hook has a very similar pattern to redux.

useReducer(<reducer>, <initialState>)

The useReducer Hook accepts two arguments: reducer and initialState.

The hook then returns an array of 2 items: the current state and the dispatch function.

import { useReducer } from 'react';
function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
    
  const action = {
    type: 'ActionType'
  };
  return (
    <button onClick={() => dispatch(action)}>
      Click me
    </button>
  );
}

Now, let's first understand what the terms initial state, action object, dispatch, and reducer mean.

Initial state: This can be a simple value the state is initialized with, but generally contain an object. For instance, in the case of user state, the initial value could be:

// initial state
const initialState = { 
  users: []
};

Action Object: It describes how to update the state. The property type of an action object is often a string defining the kind of state update that the reducer needs to do. For example

const action = {
  type: 'ADD_USER'
};

You can add more attributes to the action object if the reducer requires it to contain a payload.

const action = {
  type: 'ADD_USER',
  user: { 
    name: 'John Doe',
    email: 'jdoe@mail.com'
  }
};

Dispatch function: It is a special function that dispatches an action object. It is created by the useReducer hook.

const [state, dispatch] = useReducer(reducer, initialState);

You can simply call the dispatch function with the appropriate action object: dispatch(actionObject) to update the state.

Reducer function: It is a pure function that contains your custom logic. It accepts 2 parameters: the current state and an action object. The reducer function must update the state in an immutable way, depending on the action object, and return the new state.

The following reducer function adds the user to the state.

const initialState = {
  users: [],
}

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_USER':
      return {
        ...state,
        users: [...state.users, action.payload],
      }
    default:
      return state
  }
}

Wiring everything

import React, { useReducer } from 'react'

const initialState = {
  users: [],
}

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_USER':
      return {
        ...state,
        users: [...state.users, action.payload],
      }
    default:
      return state
  }
}

function Reducer() {
  const [users, dispatch] = useReducer(userReducer, initialState)
  console.log(JSON.stringify(users, null, 2))

  const payload = {
    name: 'John Smith',
    email: 'jsmith@mail.com',
  }

  const addUser = () => {
    dispatch({ type: 'ADD_USER', payload })
  }

  return (
    <div>
      <button onClick={addUser}>Add User</button>
    </div>
  )
}

export default Reducer

From the above code snippet, when you click the Add User button, the function dispatches an action object of the type ADD_USER which adds the user to the state and logs the new state in the console. You can add more complex logic like updating, and deleting a user inside the single reducer function by adding more actions.

React useCallback Hook

Let's first discuss performance optimization before moving on. The render time must be taken into account whenever we create a React app. We can enhance our application performance if we can reduce the time taken to render the DOM. One way to achieve this will be by preventing unnecessary renders of our components. This might not have great performance improvement for a small application, but if we have a large application with many components, we can have a serious performance boost 🚀.

The React useCallback returns a memoized version of the callback function that changes only when one of the dependencies has changed.

You can think of memoization as caching, so it returns a cached version of the result (callback function) which can boost the performance.

It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

Why We Need a useCallback Function

One reason to use the useCallback function is to prevent unnecessary re-rendering of the components. The component should not re-render unless its props have been changed.

Let's see an example.

import React, { useState } from 'react';
import User from './User';

function CallbackHookDemo() {
  const [users, setUsers] = useState([]);
  const [darkMode, setDarkMode] = useState(false);

  const addUser = () => {
    setUsers((u) => [...u, 'New User added !!']);
  };

  const handleCheckboxChange = () => setDarkMode((prev) => !prev);

  return (
    <>
      <User users={users} addUser={addUser} />
      <hr />

      <div className={darkMode ? 'dark-mode' : ''}>
        <label htmlFor="darkMode">dark mode</label>
        <input
          name="darkMode"
          type="checkbox"
          checked={darkMode}
          onChange={handleCheckboxChange}
        />
      </div>
    </>
  );
}

export default CallbackHookDemo;

import React, { memo } from 'react';

function User({ users, addUser }) {
  console.log('User component rendered');
  return (
    <>
      <h2>Users:</h2>
      {users.map((user, i) => {
        return <p key={i}>{user}</p>;
      })}
      <button onClick={addUser}>Add User</button>
    </>
  );
}

export default memo(User);

When you run this code and check the dark mode checkbox, you will notice that the User component re-renders even when the users do not change.

Why is this happening?🤔 The User component should not re-render since neither the users state nor the addUser function are changing when the checkbox is checked.

This is due to referential equality. Functions get recreated when a component re-renders. That's why the addUser function has changed.

To fix this, we can use the useCallback hook to prevent unnecessary re-render of the component unless necessary. We can now wrap the addUser function inside the useCallback hook like the below code.

  const addUser = useCallback(() => {
    setUsers((u) => [...u, 'New User added !!']);
  }, [users]);

Now, the User component will only re-render when the users prop changes.

React useMemo Hook

The react useMemo hook returns a memoized value that only runs when one of its dependencies changes.

You might have some expensive and resource-intensive functions in your React application. If those functions are run on every re-render of the component, the application will have a massive performance issue which can be costly in either memory, time, or processing and it will also lead to poor user experience.

You can try to optimize the performance of the application by utilizing the memoization technique.

useMemo hook tries to address the following two problems.

• referential equality
• computationally expensive operations

useMemo() is a built-in React hook that accepts 2 arguments — a function compute that computes a result and the depedencies array:

const memoizedResult = useMemo(compute, dependencies);

On the first render, useMemo(compute, dependencies) invokes compute, remembers the calculated output and returns it to the component.

In the subsequent renders, the compute functions would not need to run again as long as the dependencies do not change. It will simply return the memoized output.

Now let's see how useMemo() works in an example.

import React, { useState } from 'react'

const expensiveCalculation = (num) => {
  console.log('Calculating...')
  for (let i = 0; i < 1000000000; i++) {
    num += 1
  }
  return num
}

function UseMemoHookExample() {
  const [users, setUsers] = useState([])
  const [count, setCount] = useState(0)
  const calculation = expensiveCalculation(count)

  const addUser = () => {
    setUsers((u) => [...u, 'New User added !!'])
  }

  const increment = () => {
    setCount((c) => c + 1)
  }

  return (
    <>
      <h2>Users:</h2>
      {users.map((user, i) => {
        return <p key={i}>{user}</p>
      })}
      <button onClick={addUser}>Add User</button>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </>
  )
}

export default UseMemoHookExample

In this example, you will notice that when you increase the count or add a user, there is a delay in execution.

Even if you only add a user, the component re-renders, and the expensive calculation function gets invoked resulting in a delayed execution.

Let's improve the performance of this component by using useMemo hook which will memoize the result of the expensive function.

import React, { useMemo, useState } from 'react'

const expensiveCalculation = (num) => {
  console.log('Calculating...')
  for (let i = 0; i < 1000000000; i++) {
    num += 1
  }
  return num
}

function UseMemoHookExample() {
  const [users, setUsers] = useState([])
  const [count, setCount] = useState(0)
  const calculation = useMemo(() => expensiveCalculation(count), [count])

  const addUser = () => {
    setUsers((u) => [...u, 'New User added !!'])
  }

  const increment = () => {
    setCount((c) => c + 1)
  }

  return (
    <>
      <h2>Users:</h2>
      {users.map((user, i) => {
        return <p key={i}>{user}</p>
      })}
      <button onClick={addUser}>Add User</button>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </>
  )
}

export default UseMemoHookExample

Now, when the component renders for the first time, an expensive calculation function will be invoked and the result will be memoized so that when we click on add user, the function will not be invoked again as there is no change in dependency and the execution will be super fast.

React custom Hook

You can create your custom hook by using the react built-in hooks and extract your custom logic into a reusable function.

There are two rules for creating a custom hook:

• Custom hooks are prefixed with "use". For example, it could be named as useFetch
• Custom hooks consist of built-in or other custom hooks. A custom Hook is not a custom Hook and should not begin with the prefix "use" if it does not internally utilize any hooks.

Let's create a custom hook that will fetch a random joke from the API.

import { useState, useEffect } from 'react'

function useFetch(url) {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data))
  }, [url])

  return [data]
}

export default useFetch

We created a new file and named it useFetch.js which contains our custom logic to fetch data from the API endpoint.

In App.js, we are importing our useFetch Hook and utilize it like any other Hook. This is where we pass in the URL to fetch data.

Now we can reuse this custom Hook in any component to fetch data from any URL.

import useFetch from './components/useGetRandomJoke'
function App() {
  const [data] = useFetch('http://api.icndb.com/jokes/random')

  return <div className="App">{data && <p>{data.value.joke}</p>}</div>
}

export default App

Conclusion

This article explored built-in react hooks and their appropriate use in the React application. If you like the article then please share it and feel free to ask any questions you may have in the comment section below.  

If you're working with functional components in React, the useEffect hook is an essential tool for managing side effects. Whether you need to perform operations when a component is rendered, updated, or unmounted, the useEffect hook can help you do so with ease.

In functional components, the useEffect hook can be used to perform operations (or side effects) in the following situations:

• when a component is rendered (componentDidMount function in class-based components)
• when a component changes (componentDidUpdate function in class-based components)
• before a component is unmounted/removed (componentWillUnmount function in class-based components)

Why is it called useEffect?

The core React Hooks (useState, useEffect, and so on) were added to the library in 2018. The name of this hook, "useEffect," confused many developers.

What exactly is an "effect"?

In functional programming, the word "effect" refers to a concept known as a "side effect."

But in order to fully understand what a side effect is, we must first understand what a pure function is. Perhaps to your surprise, the majority of React components are designed to be pure functions.

React components may be seen as functions, despite the fact that this may appear strange. It is instructive to note that a standard React function component is declared similarly to a JavaScript function:

function MyReactComponent() {}

The majority of React components are pure functions, which means they take an input and output a predictable output of JSX.

Input to a javascript function is arguments. However, what is a React component's input? Props!

Here, the prop name has been specified on a User component. The prop value is shown in a header element within the User component.

export default function App() {
  return <User name="John Doe" />   
}
  
function User(props) {
  return <h1>{props.name}</h1>;
}

This is a pure function because it produces the same output when given the same input.

Our output will always be John Doe if we provide the User a name prop with the value "John Doe".

The fact that pure functions are dependable, predictable, and easy to test is a huge advantage. This is in contrast to situations where we must implement a side effect in our component.

What are side effects in React?

Side effects are not predictable as actions that are performed with the outside world.

When we need to reach outside of our React components to do something, we perform a side effect. However, performing a side effect will not have a predictable result.

Consider requesting data (such as blog posts) from a server that has failed and returns a 500 status code response instead of our post data.

Common side effects include:

• Fetching data from an API
• Reading from local storage
• Interacting with browser APIs (that is, to use document or window directly)
• Using unpredictable timing functions like setTimeout or setInterval

This is why useEffect exists: to provide a way to handle performing these side effects in what is otherwise pure React components.

For instance, if we wanted to change the title meta tag to display the user's name in their browser tab, we could do it within the component itself, but we shouldn't.

function User({ name }) {
  document.title = name; 
  // This is a side effect. Don't do this in the component body!
    
  return <h1>{name}</h1>;   
}

The rendering of our React component is affected if a side effect is carried out right in its body.

It is best to keep side effects apart from the rendering process. If we need to do a side effect, it should strictly be done after our component renders.

In a nutshell, useEffect is a tool that allows us to interact with the outside world while preserving the component's rendering and performance.

How do I use useEffect?

UseEffect's basic syntax looks like this:

import { useEffect } from 'react';

function MyComponent() {
  // 2. call it above the returned JSX  
  // 3. pass two arguments to it: a function and an array
  useEffect(() => {}, []);
  
  // return ...
}

The correct way to perform the side effect in our User component is as follows:

1. We import useEffect from "react"
2. We call it above the returned JSX in our component
3. We pass it two arguments: a function and an array

import { useEffect } from 'react';

function User({ name }) {
  useEffect(() => {
    document.title = name;
  }, [name]);
    
  return <h1>{name}</h1>;   
}

useEffect receives a callback function as its parameter. After the component renders, this will be invoked.

We can perform one or more side effects in this function if we want.

The dependencies array is the second parameter, which is an array. All the values on which our side effect depends should be included in this array.

We need to include name in the dependents array in the example above because we are changing the title depending on a value in the outer scope.

This array will check to see whether a value (in this case, name) has changed between renderings. If so, our useEffect function will be executed again.

This makes sense since, in case the name changes, we want to display the updated name and rerun our side effect.

What is the cleanup function in useEffect?

The effect cleanup function is the last step in carrying out side effects correctly in React.

Our side effects occasionally need to be turned off. For instance, if you use the setInterval method to start a countdown timer, that interval won't end until we use the clearInterval function. We use the cleanup function for this.

If we use setInterval to set the state and that side effect is not cleaned up when our component unmounts and we no longer use it, the state is destroyed along with the component - but the setInterval method continues to run.

function Timer() {
  const [time, setTime] = useState(0);
    
  useEffect(() => {
    setInterval(() => setTime(1), 1000);
  }, []);
}

The problem with the above code is that when the component is destroyed, setInterval will try to update a variable of the state time that no longer exists. This is an error called a memory leak.

We need to stop using setInterval when the component unmounts.

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    let interval = setInterval(() => setTime(1), 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);
}

We can perform our cleanup within this function by calling clearInterval.

The cleanup function will be called when the component is unmounted.

Going to a new page or route in your application where the component is no longer displayed is a common example of a component being unmounted.

When we unmount a component, our cleanup code runs, our interval is cleared, and we no longer get an error about trying to update a state variable that doesn't exist.

Last but not least, cleaning up after side effects is not always necessary. It is only necessary for very few circumstances, such as when you want to stop a recurring side effect after your component unmounts.

The importance of the dependency array

Let's take a look at the below example with two states. Why do we have the problem of unnecessary effects?

export default function TwoStatesEffects() {
  const [title, setTitle] = useState('default title');
  const titleRef = useRef();
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    console.log('useEffect');
    document.title = title;
  });
  console.log('render');
  const handleClick = () => setTitle(titleRef.current.value);
  const handleCheckboxChange = () => setDarkMode((prev) => !prev);

  return (
    <div className={darkMode ? 'dark-mode' : ''}>
      <label htmlFor="darkMode">dark mode</label>
      <input
        name="darkMode"
        type="checkbox"
        checked={darkMode}
        onChange={handleCheckboxChange}
      />
      <input ref={titleRef} />
      <button onClick={handleClick}>change title</button>
    </div>
  );
}

If you do not provide a dependency array, each useEffect is executed after every render cycle. In our case, whenever one of the two-state variable change, the useEffect is executed.

Dependencies that you supply as array items are used to handle this behavior. React will only execute the useEffect statement if at least one of the supplied dependencies has changed since the last run. To put it another way, you can condition the execution using the dependency array.

We want to skip unnecessary effects after an intended re-render, right?

All we need to do is add an array with the title as a dependency. As a result, the effect is only executed when values between render cycles vary.

 useEffect(() => {
    console.log('useEffect');
    document.title = title;
  }, [title]);

We can also add an empty dependency array which will execute the effect only once.

How to fix common mistakes with useEffect

With useEffect, a few important things to be aware of in order to avoid mistakes.

useEffect(() => {
  //the code here runs every time the screen is rendered
});

If you do not provide any dependency array to the useEffect, it will run after every render.

If you set a local state variable when the state is changed and useEffect runs without the dependencies array after each render, the loop will continue indefinitely.

function MyCustomer() {
  const [customer, setCustomer] = useState([]);

  useEffect(() => {
    fetchCustomer().then((myCust) => setCustomer(myCust));
    // Error! useEffect runs after every render without the dependencies array, causing infinite loop
  });
}

After the first render, useEffect is executed, the state is changed, which causes a re-render, which triggers useEffect to execute once again, and so on indefinitely.

To fix the infinite loop, we should pass an empty dependencies array. This will cause the effect function to only run once after the component has been rendered the first time.

function MyCustomer() {
  const [customer, setCustomer] = useState([]);

  useEffect(() => {
    fetchCustomer().then((myCust) => setCustomer(myCust));
  }, []);
}

The rules of Hooks

Let's talk about the general rules of Hooks. Although they are not restricted to the useEffect Hook, it's important to know where you can define effects in your code. You need to follow the rules to use Hooks.

1. Only the top-level function of your functional React component can call hooks.
2. Don't call hooks inside loops, conditions, or nested functions.

Conclusion

I believe that one of the most important skills to master if you want to become a next-level React developer is understanding the underlying design concepts and best practices of the useEffect Hook.

In this article, we will talk about Distributed Caching, NCache, and its features such as Object Caching, Session Caching, and Response Caching along with practical implementation in ASP.NET Core.

What is distributed caching

A distributed cache is a cache that is shared by multiple app servers and is often managed as an external service to the app servers that access it.

While most caches are traditionally housed in a single physical server or hardware component, a distributed cache can expand beyond the memory limits of a single computer by connecting multiple computers—referred to as a distributed architecture or a distributed cluster—for increased capacity and processing power.

A distributed cache can increase the efficiency and scalability of an ASP.NET Core project, particularly if the app is hosted by a cloud service or a server farm. Distributed caches are extremely useful in high-data-volume and high-load applications. Because of the distributed design, incremental expansion and scaling are possible by adding more computers to the cluster, allowing the cache to grow in tandem with the data growth.

When cached data is distributed, the data:

• Is coherent (consistent) across requests to multiple servers.
• Survives server restarts and app deployment.
• Doesn't use local memory.

What is NCache

NCache is an open-source distributed in-memory cache developed natively in .NET and .NET Core. NCache is a distributed cache that stores application data and prevents expensive database trips. It is extremely quick and linearly scalable. NCache can be used to reduce performance bottlenecks caused by data storage and databases, as well as to extend the capabilities of your .NET Core applications to handle high-volume transaction processing (XTP). It works both locally and configured as a distributed cache cluster for an ASP.NET Core app running in Azure or other hosting platforms.

Some major features of NCache

Some major features of NCache are:

1. Recovery from Split-Brain
2. ASP.NET Core Object, Session, and Response caching
3. WAN Replication
4. Search Cache (SQL-Like)
5. Security and Encryption
6. Data Grouping
7. Runtime Data Sharing
8. Cache Topologies
9. Cache Size Management
10. Cache Elasticity (High Availability)

How to use NCache with ASP.NET Core (a tutorial)

Let’s dive into a step-by-step practical implementation of NCache with .NET 6.

Setting up an environment

Let's have a look at how to set up an NCache server on a Windows machine. For this, we need a  windows installer. Let’s install NCache Enterprise edition, version 5.3.

Follow these steps to install NCache using an interactive Windows installer:

• Open command prompt as administrator. This is because NCache must be installed by an administrator user.
• Run msiexec.exe utility from Command Prompt to install NCache in an interactive mode. Please note that the .msi file may have a different name for the .NET Framework installation.

msiexec /i "<Setup Path>\ncache.ent.net.x64.msi"

The NCache Setup Wizard welcome screen appears:

After launching the installer, we must choose between three installation types: cache server, remote client, and developer/QA. Let’s select Cache Server.

After that, we must input a license key. Make sure you have a license key for the same version as the one you're installing. We'll receive an "invalid license key" error otherwise. The license key is sent to the email address you provided during registration.

After that, we need to enter our full name, email address, and the organization that we used to apply for the trial license.

Next, select the installation folder where NCache should be installed. Keep the default location or change it if required.

Then, we need to select an IP address to bind our NCache server to. Let’s stick to the defaults.

Next, we need to choose an account to run NCache. Let’s use the Local System Account.

NCache service creates and starts a demo cache named demoCache of topology Partitioned-Replica by default at the end of setup installation. Uncheck the checkbox Start demo cache at the end of the installation to disable this option from this screen. When you're finished, click Install.

Once the installation finishes, our default browser will open with the Web Manager at http://localhost:8251

The official site of NCache suggests a minimum of two servers for redundancy. However, for testing, let's use a single-node server.

At this point, we have successfully installed the NCache server on a windows machine. However, NCache can be installed in Linux and Docker containers and can be used on Azure and AWS as virtual machines.

Creating a clustered cache

Now, let's see how we can manually create a cluster cache from the web manager which is running at http://localhost:8251/.

In the left navigation bar, click on Clustered Caches. The page displays any clustered caches on your machine, as well as additional information such as topology, servers, and server platform.

1. To create a new distributed cache, click on New.
   

2. Select Distributed Cache from the In-Memory Store Type dropdown menu and give your cache a name. Choose JSON or Binary from the Serialization dropdown option, depending on your needs. It is recommended that you use JSON serialization if you are using ASP.NET 5.0 and above.
   

3. Choose the caching topology as well as advanced options such as Operation Timeout and Statistic Replication Interval. If you choose the Partition-Replica Cache topology, you must choose an Asynchronous or Synchronous Replication Strategy.
   

4. If necessary, set the cache's maximum size. You can also add cache nodes to the cluster by specifying the node IP address and clicking on +. To add more nodes, click +.
   

5. If necessary, change the Cluster Port and Port Range. Check the Enable Pipelining option if pipelining is necessary for the cache. Set the Batch Interval to the time in microseconds after which the commands will be sent across the network.
   

6. Check the Enable Encryption and Enable Compression options to enable encryption and compression. Set the Providers and Key for encryption and the Threshold Size for compression if encryption is enabled.
   

7. On the Advanced Options page, you can configure the following settings:

   • By default, eviction is enabled. You can adjust the Eviction Policy as needed. Uncheck the box Enable Eviction if you wish to disable eviction.
   • You can also adjust the Eviction percentage; if eviction is enabled, items will be evicted from the cache using this % value.
   • You can change the Clean interval value. Default is 15 seconds.
   • If you click the Start this cache on Finish checkbox on this dialog box, this cache will be started automatically after this process is completed.
   • You can make the cache start automatically after service restart by checking the checkbox Autostart this cache on service startup.
     

8. The server nodes and status of the newly created cache will display in the Clustered Caches page.
   

Simulating stress and monitoring statistics

NCache provides the Test Stress option to simulate the usage of your created cache.

Test Stress Through NCache Web Manager

To simulate your cache utilization under stress using NCache Web Manager, follow the instructions below:

• Launch NCache Web manager by browsing localhost:8251
• From the left navigation bar, click on Clustered Caches.
  
• Click the Test-Stress button on the toolbar to bring up a dialog box containing various time options.
  
• You may choose how long you want the Test-Stress to run from the options provided. The choices are:
  • 10 seconds
  • 30 seconds
  • 1 minute
  • 3 minutes
  • 5 minutes
• This is the duration for which the data will continue to be added to your cache, and once that time has passed, the data will be deleted from the cache.
• There are two ways to see how these cache counts are updated. Either use the Monitor option on the toolbar to see the cache counts or use the Statistics option to keep track of your cache's statistics.
• The following are the specifics for both of the above options.

View Simulation Through NCache Web Monitor

NCache Web Monitor provides various cache counters in a graphical dashboard.

The counters on NCache Web Monitor show that data is being added to the cache. The counters will show data being removed from the cache when the given expiration time has passed.

View Simulation Through NCache Statistics

NCache Statistics provides a report view of various cache counters. If you choose to simulate cache usage through statistics, then follow these steps:

• Click the Test-Stress button on the toolbar to bring up a dialog box containing various time options.
  
• You can choose the Tess-Stress timer for 10 or 30 seconds or 1, 3, or 5 minutes, depending on your choice from the dialogue box.
• As soon as you press the Start button, you can view the statistics for different operations on the cache like Additions/sec and Fetches/sec.
• You can see the data being added to the cache by looking at the counters on the screen. The counters will indicate data being purged from the cache when the given expiration time has passed.
  

Test Stress Through NCache PowerShell Cmdlet

You can quickly test that cache clients can make calls to cache servers using the Stress Test Tool that comes with NCache installation.

Run the following command in Windows PowerShell to begin this test on the cache you just created:

Test-Stress –CacheName ClusteredCache

Using NCache for object caching in ASP.NET Core

Before connecting to our NCache server, we need to first install the Nuget package. Let's Install the package by executing the following command in the Package Manager Console.

With NCache SDK NuGet package

For Enterprise

Install-Package NCache.Microsoft.Extensions.Caching

For Professional

Install-Package NCache.Microsoft.Extensions.Caching.Professional

For OpenSource

Install-Package NCache.Microsoft.Extensions.Caching.OpenSource

Now, to start the connection, we need the GetCache() method with a cache name. For our sample app, let's use the cache name that we created above.

Let's start writing some code to add and retrieve the cities from a cache.

[HttpGet("{id:int}")]
        public async Task<IActionResult> Get(int id)
        {
            ICache _cache = CacheManager.GetCache(_configuration.GetValue<string>("NCacheSettings:CacheName"));
            var cacheKey = string.Format("city_{0}", id);
            
            var city = _cache.Get<City>(cacheKey);

            if (city is null)
            {
                city = await _cityRepository.GetByIdAsync(id);

                var cacheItem = new CacheItem(city)
                {
                    Expiration = new Expiration(ExpirationType.Sliding, TimeSpan.FromMinutes(10))
                };

                // Add CacheItem to cache
                await _cache.InsertAsync(cacheKey, cacheItem);
            }

            return Ok(city);
        }

Notice we didn’t have to use a connection string to connect to our cache. We only used a cache name that is defined in the appsettings.json file.

"NCacheSettings": {
    "CacheName": "myClusteredCache",
    "EnableLogs": true,
    "EnableDetailLogs": false,
    "ExceptionsEnabled": true,
    "OperationRetry": 0,
    "operationRetryInterval": 0
  }

Instead of connection strings, NCache uses a client.ncconf file. This file can be defined at the application or installation level. We rely on the configuration file at the installation level for our demo. As a result, we just need the cache name.

In the code snippet above, we are fetching the city from the cache first. The initial call will have an empty cache and it will get the data from the database and add it to the cache, so that the next time when we call this endpoint, the data will be returned from the cache instead of hitting the database.

Every item in the cache needs an expiration. The CacheItem has an Expiration property for that.

There are two basic expiration types: Absolute and Sliding. You can learn more about expiration types here.

To add the item with the same key, we used InsertAsync() method. There's another method Remove() and RemoveAsync(). You might have already guessed what they do.

With IDistributedCache

Up to this point, we have NCache installed and know how to add and retrieve items.

Using the IDistributedCache interface provided by Dotnet Core, we can connect our ASP.NET Core apps to any distributed cache cluster and utilize it for caching as needed. Almost all major cache providers provide IDistributedCache implementations, which we can register in the IoC container using IServiceCollection.

Now, let's look at how we can implement distributed caching with NCache as the caching provider.

To connect to the cache server, we need to install the NuGet package Install-Package NCache.Microsoft.Extensions.Caching which we have already installed in the previous section.

We can register the NCache DistributedCache into the IoC container, through which we can later access the caching service. We can place this inside ConfigureServices() method of  Startup.cs

services.AddNCacheDistributedCache(configuration =>
    {
    configuration.CacheName = "myClusteredCache";
    configuration.EnableLogs = true;
    configuration.ExceptionsEnabled = true;
    });

We can also use these configuration values using another overload of the same method as below if you want to configure the cache settings in the appsettings.json file, which we will be doing in this demo.

services.AddNCacheDistributedCache(Configuration.GetSection("NCacheSettings"));

"NCacheSettings": {
    "CacheName": "myClusteredCache",
    "EnableLogs": true,
    "EnableDetailLogs": false,
    "ExceptionsEnabled": true,
    "OperationRetry": 0,
    "operationRetryInterval": 0
  }

Now, let's look at the code on how to use it to retrieve the lists of cities.

[HttpGet]
        public async Task<IActionResult> Get()        
        {
            string recordKey = "CitiesList_" + DateTime.Now.ToString("yyyyMMdd_hhmm");
            var cities = await _cache.GetRecordAsync<List<City>>(recordKey);

            if (cities is null)
            {
                cities = (List<City>)await _cityRepository.ListAllAsync();

                // Add CacheItem to cache
                await _cache.SetRecordAsync(recordKey, cities);
            }

            return Ok(cities);
        }

The above snippet attempts to get the list of cities based on the cache key,  where if there is no item existing in the cache, the items are fetched from the database.

The implementation of GetRecordAsync() and SetRecordAsync() is as below.

public static class DistributedCacheExtensions
    {
        public static async Task SetRecordAsync<T>(this IDistributedCache cache,
              string recordId,
              T data,
              TimeSpan? absoluteExpireTime = null,
              TimeSpan? unusedExpireTime = null)
        {
            var options = new DistributedCacheEntryOptions
            {
                AbsoluteExpirationRelativeToNow = absoluteExpireTime ?? TimeSpan.FromMinutes(10),
                SlidingExpiration = unusedExpireTime
            };

            var jsonData = JsonSerializer.Serialize(data);
            await cache.SetStringAsync(recordId, jsonData, options);
        }

        public static async Task<T> GetRecordAsync<T>(this IDistributedCache cache, string recordId)
        {
            var jsonData = await cache.GetStringAsync(recordId);

            if (jsonData is null)
            {
                return default(T);
            }

            return JsonSerializer.Deserialize<T>(jsonData);
        }
    }

You can read this article to understand the concepts of the above snippet.

Using NCache for session caching in ASP.NET Core

Since the HTTP protocol used by web applications is a stateless protocol, data is not stored anywhere; the browser opens a new HTTP connection for each web request. ASP.NET Core supports sessions for storing user data in situations when preserving your data is critical. The ASP.NET Core application itself maintains this datastore on the same server as the application.

Although ASP.NET Core has an in-memory session provider for storing sessions, the load must sometimes be balanced. Session storage strategies such as sticky sessions and distributed caching are used in these cases, however, sticky sessions are not recommended.

With NCache sessions services NuGet package

Let's see how we can configure the NCache session provider in ASP.NET Core.

First, we need to install the NuGet Package in our application.

Install-Package AspNetCore.Session.NCache

To utilize the APIs, include the following namespace in your application in Startup.cs

using Alachisoft.NCache.Web.SessionState;

Using NCache Session Management Services with ASP.NET Core requires two steps:

1. Configuring the session management service.
2. Adding middleware to the application.

Serializing Session Objects

Before you begin utilizing NCache to store and retrieve your ASP.NET session data, you should be aware that these objects cannot be directly stored within the cache. To save these session objects in the cache, they must first be serialized. You can serialize your session objects using different approaches. These techniques are as follows:

Binary Serialization

If you have access to the application's source code, you can utilize this serialization approach. In this instance, you must make all of the objects (those you wish to keep in the cache) serializable. However, since of.NET 6.0, this approach is no longer supported.

NCache Compact Serialization

If you can't or don't want to utilize binary serialization, you can serialize your session objects using NCahce Compact Serialization. The key advantages of doing so are that it is quicker and simply requires you to alter your configuration files rather than the source code.

The only issue with this technique is that the configuration change might be significant if the number of classes to serialize is large.

JSON Serialization

If neither of the above serialization options works for you, you can use JSON serialization instead. The best aspect of this strategy is that it is really fast and easy since it only takes you to make one modification to your appsettings.json file, and the rest of the work is done automatically by NCache during runtime.

You only need to set the usejsonserialization setting to true. This flag's value is false by default.

Step 1: Configure NCache Session Management Service

The session management service needs to be initialized in Startup.cs. There are two methods to specify configurations:

1. Through your application in Startup class or
2. In JSON format in Appsettings.json

Method 1: Specifying Configurations in Startup class

The AddNCacheSession() extension method, which accepts an IOptions<NCacheSessionConfiguration> object as the configuration can be used to start the session.

Add the following code to your application's Startup class in the ConfigureServices() method:

public void ConfigureServices(IServiceCollection services)
{

    //Add services to the container with configured session 
    services.AddNCacheSession(configuration =>
    {
        configuration.CacheName = "myClusteredCache";
        configuration.EnableLogs = true;
        configuration.SessionAppId = "demoApp";
        configuration.SessionOptions.IdleTimeout = 5;
        configuration.SessionOptions.CookieName = "AspNetCore.Session";
    });                   

}

Method 2: Specifying Configurations in Appsettings.json

The configurations for the services can also be provided in JSON format as a section in Appsettings.json of your ASP.NET application:

{
  "NCacheSettings": {
    "SessionAppId": "demoApp",
    "SessionOptions": {
      "CookieName": "AspNetCore.Session",
      "CookieDomain": null,
      "CookiePath": "/",
      "CookieHttpOnly": "True",
      "IdleTimeout": "5",
      "CookieSecure": "None",
     "useJsonSerialization": true,
    },

    "CacheName": "myClusteredCache",
    "EnableLogs": "True",
    "RequestTimeout": "90"
  },
}

NCache provides the AddNCacheSession() method to initialize configurations from external files before adding the session services to the container. You can use this method to refer to the configurations by specifying the name of the section in Appsettings.json that contains JSON format configurations:

public void ConfigureServices(IServiceCollection services)
{ 
    //Add services to the container                    
    services.AddNCacheSession(Configuration.GetSection("NCacheSettings"));
}

Step 2: Add Middleware to the Application

After the services have been initialized, you can now set up the HTTP request pipeline by using the Configure() method to add middleware. The following is an example of how to add a middleware layer in IApplicationBuilder by using the UseNCacheSession() extension method. Always stack the NCache session middleware before the layer that uses the sessions.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseNCacheSession(); //store NCache session data 
        }

Once NCache has been set as the default cache for ASP.NET Core sessions, you can execute all ASP.NET Core-specific operations without changing any code. All sessions will be cached in distributed NCache.

You can find the additional source code on GitHub.

With IDistributedCache

ASP.NET Core sessions can also be used with NCache's IDistributedCache Provider. To add a default implementation of IDistributedCache, use the AddDistributedMemoryCache() function in ASP.NET Core. To use NCache as a distributed cache to store ASP.NET sessions or objects, use the AddNCacheDistributedCache() extension method, which adds NCache as the default distributed cache as an implementation of IDistributedCache.

First, install the NuGet package depending on the version of NCache you are using.

To utilize the APIs, include the following namespace in your application in Startup.cs of your application:

using Alachisoft.NCache.Caching.Distributed;

You can configure NCache as a distributed cache for your ASP.NET Core application in two steps:

1. Configuring services
2. Adding middleware to the application

Step 1: Configure Services

The AddNCacheDistributedCache() extension method on IServiceCollection requires just a cache name in NCache and any optional parameters to store the sessions. The configuration object is the same as NCache ASP.NET Core Session Provider, and it can be started in the same way. The settings can also be given using the IOptions initializer.

There are two methods to specify configurations:

• Through your application in Startup class or
• In JSON format in Appsettings.json of your application.

Method 1: Specifying Configurations In Startup class

Configure Startup class for Single Cache:

The AddNCacheDistributedCache() method is an extension of the ASP.NET Core AddDistributedCache() method. This method takes configuration parameters from your application's Startup class file or reads them from the supplied JSON file.

Add the following methods and options to your application's Startup class:

public void ConfigureServices(IServiceCollection services)
{
	services.AddNCacheDistributedCache(configuration =>
    {
        configuration.CacheName = "myClusteredCache";
        configuration.EnableLogs = true;
        configuration.ExceptionsEnabled = true; 
    });
}

Configure Startup class for multiple Cache:

Using the AddNCacheDistributedCacheProvider method, you may configure multiple caches as follows:

public void ConfigureServices(IServiceCollection services)
{
    services.AddNCacheDistributedCacheProvider( options =>
             {
                options.CacheConfigurations = new NCacheConfiguration[] {
                new NCacheConfiguration() {
                    CacheName = "myClusteredCache",
                    EnableLogs = true,
                    ExceptionsEnabled = true
                },
                new NCacheConfiguration(){
                    CacheName = "demoCache",
                    EnableLogs = true,
                    ExceptionsEnabled = true }
                }; 
             });
} 

Method 2: Specifying Configurations In Appsettings.json

In the Appsettings.json file of your application, you can also specify the configurations within your application in JSON format. You can refer to the configurations using this method by specifying the name of the section in the Startup class that contains JSON format configurations.

{
  "NCacheSettings": {
    "CacheName": "myClusteredCache",
    "EnableLogs": "True",
    "RequestTimeout": "90"
  },
}

Refer to these configurations in the Startup class as follows:

public void ConfigureServices(IServiceCollection services)
{
	services.AddNCacheDistributedCache(Configuration.GetSection("NCacheSettings")); 

    services.AddSession();
}

Configure Appsettings.json for Multiple Caches:

"NCacheFactorySettings": {
    "NCacheConfigurations": [
        {
            "CacheName": "myClusteredCache",
            "EnableLogs": true,
            "RequestTimeout": "90" 
        },
        {
            "CacheName": "demoCache",
            "EnableLogs": true,
            "RequestTimeout": "90"
        },
        {
            // Configure more caches
        }
    ]
}

Use the AddNCacheDistributedCacheProvider method to refer the NCacheFactorySettings section in Startup.cs:

public void ConfigureServices(IServiceCollection services)
{    services.AddNCacheDistributedCacheProvider(_config.GetSection("NCacheFactorySettings")); 

    services.AddSession();
}

Step 2: Add Middleware to the Application

Sessions can store data in NCache once the distributed cache has been added to the service. The ASP.NET Core UseSession() extension method adds the default session middleware to the application, but it uses NCache as its cache.

The following block of code represents how to fetch an item from the cache and how to insert an item in it.

public IActionResult CacheOperations()
    {
        // Cache entry is of DateTime type
        DateTime cacheEntry;

        string cacheKey = "MaxValue: " + DateTime.MaxValue;

        // Look for cache key
        object retrieveObj = _cache.Get(cacheKey);

        // Check if key exists in cache
        if (retrieveObj != null)
        {
            // Return view with result
        }
        else
        {
            // Key not in cache, so populate data in cache entry
            cacheEntry = DateTime.MaxValue;

            // Configure SlidingExpiration for item 
            var cacheEntryOptions = new DistributedCacheEntryOptions();
            cacheEntryOptions.SlidingExpiration = TimeSpan.FromMinutes(30);

            // Insert item in cache
            _cache.Set(cacheKey, new byte[1024], cacheEntryOptions);

            // Return view with cacheEntry
        }
    }

Using NCache for response caching in ASP.NET Core

The ability to cache web server responses using cache-related headers in HTTP response objects is referred to as response caching. These headers indicate how to cache responses for all or a subset of requests. It is important to note that, unlike output caching, response caching in ASP.Net Core does not store responses in the web server's memory.

Response caching in ASP.Net Core is a more advanced and expandable version of output caching. It instructs web browsers to cache content by including cache-related headers in HTTP responses. This can drastically minimize the number of requests made by a client to the web server, as future requests can be served from the client's cache. It should be noted that response caching caches data in memory by default, but you can set up custom storage providers if necessary.

When to use Response Caching?

You can use response caching to cache objects that are static and have little possibility of being updated, such as CSS, JavaScript files,  media, or metadata of a webpage.

To use NCache as a distributed cache for response caching, NCache provides its own extension methods to configure services and middleware.

Installing the NuGet packages: Install the following package from the package manager console in your project.

Install-Package NCache.Microsoft.Extensions.Caching

To use NCache's response caching methods, add the following namespace in your application:

using Alachisoft.NCache.Caching.Distributed;

Configure Response Caching Service

For response caching, ASP.NET Core has its own middleware. This has to be added to the service collection using the AddResponseCaching() method.

• Open the Startup.cs of your project
• In the ConfigureServices() method, add the following service:

public void ConfigureServices(IServiceCollection services)
{
    services.AddResponseCaching();

    //remaining services here
}

Then add the UseResponsecaching() method to add the response caching middleware to the pipeline.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            // other code
            app.UseResponseCaching();
        }

With NCache response caching middleware

ASP.NET Core has built-in response caching, which is a great feature. It can be used to limit the number of requests sent to a web server by a client. NCache can also be used as a middleware for response caching. Let's look at how we can do this.

To use NCache as a response cache middleware, you need to do the following:

• Specify the NCache settings in the Appsettings.json file
• Invoke the AddResponseCaching and AddNCacheDistributedCache methods in the ConfigureServices method of the Startup class.

You can configure NCache as a distributed cache in two ways:

• By specifying cache configuration in AppSettings.json
• By specifying cache configuration in IOptions

Specify cache configuration in the AppSettings.json file

 "NCacheSettings": {
    "CacheName": "myClusteredCache",
    "EnableLogs": true,
    "EnableDetailLogs": false,
    "ExceptionsEnabled": true,
    "OperationRetry": 0,
    "operationRetryInterval": 0
  }

The NCache library implements the ASP.NET Core IDistributedCache interface. This enables you to use NCache in ASP.NET Core as a response cache middleware.

In the ConfigureServices() method, write the following code to use NCache as your response cache middleware.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddResponseCaching();
            services.AddNCacheDistributedCache(Configuration.GetSection("NCacheSettings"));
            services.AddMvc();
        }

Specify cache configuration in IOptions

NCache configuration details can also be specified as IOptions.

public void ConfigureServices(IServiceCollection services)
        {
            // other services.. 
            services.AddMvc();
            services.AddNCacheDistributedCache(options =>
            {
                options.CacheName = "myClusteredCache";
                options.EnableLogs = true;
                options.ExceptionsEnabled = true;
            });
        }

Next, we'll look at how to use NCache as a response caching middleware in the action methods.

You can use the following code to take advantage of response caching in the action method, assuming that you have configured the response caching middleware successfully.

        [ResponseCache(Duration = 60, Location = ResponseCacheLocation.None, NoStore = false)]
        public IActionResult ResponseCache()
        {
            return View();
        }

The Duration option specifies how long the data will be stored in the cache. The ResponseCacheAttribute is used to specify response caching options. You can use the Location argument to specify whether any client or intermediate proxy will cache the data.

Use Distributed Cache Tag Helper

You can now specify the content that you would like to cache. You can take advantage of Distributed Cache Tag Helpers in ASP.NET Core.

The following code snippet illustrates how you can specify an item to remain in the cache forever.

<distributed-cache name="Key:1" >
    <div>@DateTime.Now.ToString()</div>
</distributed-cache>

To set an expiry for a cached item, use the below code

<distributed-cache name="Key:2" expires-after ="TimeSpan.FromSeconds(10)">
    <div>@DateTime.Now.ToString()</div><br />
</distributed-cache>

To remove the item from the cache if the "vary-by" value is changed.

<distributed-cache name="Key:3" vary-by ="test">
    <div>@DateTime.Now.ToString()</div><br />
</distributed-cache>

The source code used in this article is on GitHub.

Summary

Caching is a proven technique used in web applications to improve performance and responsiveness. In this article, I tried to explain in-depth the different features of caching in ASP.NET Core using NCache. For more information on NCache and how it can be used in ASP.NET Core, you can refer to the online documentation for NCache.

Data fetching patterns are an essential component of every web framework. As a result, this aspect of every web technology has experienced constant improvements and innovations.

Next.js offers several ways for fetching data since it supports both client and server-side rendering. One way is to use SWR, which is a collection of React hooks for getting data from a remote location.

In this article, we'll look at SWR, a library that helps with caching, pagination, revalidation, and other tasks. We'll also create a client-side Next.js app that uses SWR to retrieve data from a JSON Placeholder.

What is SWR?

SWR stands for stale-while-revalidate. It's a lightweight library made by the same people that made Next.js. It's essentially a set of React Hooks that come with built-in functionality like revalidation, mutation, and caching.

SWR works in three stages:

• it first returns the cache (stale),
• then fetches the data from the server (revalidation),
• and lastly returns the most recent data. By allowing you to present anything to your user while getting fresh data from the server, SWR improves your user experience.

SWR is backend agnostic, which means it can fetch data from any server that supports HTTP requests. It also offers decent TypeScript and server-side rendering capabilities.

Advantages of SWR

• Focus Revalidation: SWR automatically revalidates data when you refocus a page or switch between tabs in the browser.
• Fast Navigation: As soon as data is rendered from the cache, SWR immediately revalidates the data from the origin.
• Refetch on Interval: SWR will allow you the option to retrieve data automatically, whereas prefetching will only take place of the component associated with the hook on the screen.
• Local Mutation: Applying changes to data locally, i.e. always updated to the most recent data.
• Dependent Fetching: You can use SWR to get data that is dependent on other data. It ensures maximum parallelism (to minimize waterfalls) and serial fetching when a piece of dynamic data is necessary for the next data fetch to take place.
• Scalable: SWR scales extremely well because it requires very little effort to write applications that automatically and eventually converge to the most recent remote data.

Disadvantages of SWR

• One of the biggest drawbacks of using SWR is that it may cause the user to view stale data, which can occur due to a lack of effective API implementation, an error in updating the displayed information, or a variety of other factors.
• Apart from creating a poor user experience, this might also be the only cause of a company's failure! Consider a well-known financial firm: can they afford to have its users looking at stale data? No way, and that's why SWR must be implemented and used correctly.

Where Should You Use SWR? (And Where Not To)

SWR can be implemented in a variety of places, here are a few examples of sites categories where SWR would be a good fit:

• Sites with live data must be updated often.
  Examples of such sites would be sports score sites and flight tracking. You should utilize the revalidate on interval option with a low interval value when creating these sites (one to five seconds).
• Sites offering real-time updates or postings in the form of a feed.
  The news sites that feature live blogging of events such as elections are a classic example of this.
• Sites that provide more passive data updates and are frequently left open in the background.
  Weather pages or, in the 2020s, COVID-19 case number pages are examples of these web pages. Because these pages aren't updated as regularly as the preceding two, they don't require the same level of revalidation. However, having the data refresh would improve the user experience. In these circumstances, I'd consider revalidating the date when the tab regains focus and the client reconnects to the internet; this ensures that if a user returns to the tab, expecting a tiny rise in COVID cases, they'll obtain that information promptly.
• Sites with small pieces of data that users can interact with.
  Consider the Youtube Subscribe Button: when you click subscribe, you want to see the number change and feel like you've helped. In these circumstances, you can programmatically revalidate the data by retrieving the updated count and updating the displayed amount using SWR.
  It's worth noting that all of them may be used with or without ISR.

Of course, there are some situations where you won't want to use SWR or SWR without ISR. SWR isn't very useful if your data doesn't change much or at all, and instead clogs your network requests and consumes mobile users' bandwidth. SWR can be used on sites that need authentication, but you should utilize Server Side Rendering instead of Incremental Static Regeneration in these circumstances.

useSWR Support for TypeScript

SWR is TypeScript-friendly and comes with type safety out of the box. By default, SWR will also infer the argument types of fetcher from key, so you can have the preferred types automatically. That being said, you can specify custom types for your own arguments in the most straightforward way, as follows:

import useSWR from 'swr'
const { data } = useSWR('https://www.users.com', (apiURL: string) => fetch(apiURL).then(res => res.json())

Working with SWR does not need any extra TypeScript setups. More information regarding TypeScript and SWR can be found here.

Let’s dive in and set up a new app with Next.js and the useSWR hook.

Setting up a Next.js application

To quickly set up a Next.js application, open a terminal window and run the create-next-app a command like so:

npx create-next-app next-swr-app

Navigate into the application directory and install SWR with this command:

cd next-swr-app # navigate into the project directory
npm install swr # install swr
npm run dev # run the dev server

The commands above will install the SWR packages, as well as open the project  localhost:3000  in your browser. We should have the project up and running on that port as follows:

We've successfully set up a Next.js application, which is fantastic. Let's get this thing built, shall we?

Data fetching with SWR

We may use useSWR or useSWRInfinite to get remote data using SWR. There are, however, certain distinctions between the hooks. The first hook is only for data fetching, whereas the second allows for data retrieval and pagination. You can use useSWRInfinite to quickly add infinite scrolling or pagination to your Next.js project.

Create a components folder in the project's root directory, add a useRequest.js file, and update it with the snippet below.

// components/useRequest.js

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const url = 'https://jsonplaceholder.typicode.com/posts';

export const useGetPosts = () => {
  const { data, error } = useSWR(url, fetcher);

  return { data, error };
};

Let's have a look at the code. We're using the useSWR() hook in the code above to get data for posts.

The useSWR hook takes two parameters and returns two results (based on the status of the request). It accepts the following:

• A Key: a string that serves as the unique identifier for the data we are fetching. This is usually the API URL we are calling.
• A fetcher: a function that returns the fetched data.

It returns:

• data — the result of the request (if it was successful)
• error — the error that occurred (if there was an error)

Create Posts.js file inside the components folder and update its contents with the following snippet.

// components/Posts.js

export default function Post({ post }) {
  const { title, body, id } = post;
  return (
    <>
      <div className="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg">
        <p className="font-medium">
          {id}. {title}
        </p>
        <p>{body}</p>
      </div>
    </>
  );
}

As you can see, we have a simple component that receives the post  to display as a parameter. Then, we use destructuring to pull out the elements from the object in order to show the post.

Now, let's update the index.js file.

import Head from 'next/head';
import Post from '../components/Posts';
import { useGetPosts } from '../components/useRequest';

export default function Home() {
  const { data: posts, error } = useGetPosts();
    
  if (error) return <h1>Something went wrong!</h1>;
  if (!posts) return <h1>Loading...</h1>;

  return (
    <div>
      <Head>
        <title>Next SWR App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-xl mx-auto">
        <h1 className="font-bold m-5">My Posts</h1>
        {posts.map((post) => (
          <Post post={post} key={post.id} />
        ))}
      </main>
    </div>
  );
}

We first import the useGetPosts hook. It returns a list of posts to display as well as an error state if any.

After that, we use the Post component to display the array of data. If any error occurs, we handle it accordingly with the error provided by SWR.

When you return to the browser, you should see posts appear as expected:

There! We've got our posts. So, our useSWR hook is up and running. Is that it, though? What makes this different from other data retrieval methods? Continue reading to learn more...

Why useSWR?

It’s a likely question to ask at this point. I wouldn't say this is a significant improvement for me yet, except for being extremely declarative. This makes this a great time to discuss some of useSWR's features.

Pagination

Consider the following scenario: instead of loading only ten posts, we want to be able to generate posts on-demand and add them to this page. This is very useful when creating an app that requires users to scroll through numerous pages with the same content. We can show this by including a Load More button at the bottom of our post's page that, when clicked, generates more posts.

It's still possible to use the useSWR hook to paginate the data, but let's use useSWRInfinite hook to achieve it.

Let's add another function in useRequest.js

// components/useRequest.js

import useSWRInfinite from 'swr/infinite';

const fetcher = (url) => fetch(url).then((res) => res.json());

const url = 'https://jsonplaceholder.typicode.com/posts';

export const usePaginatePosts = () => {
  const PAGE_LIMIT = 20;

  const { data, error, size, setSize } = useSWRInfinite(
    (index) => `${url}?_page=${index + 1}&_limit=${PAGE_LIMIT}`,
    fetcher
  );

  const posts = data ? [].concat(...data) : [];
  const isLoadingInitialData = !data && !error;
  const isLoadingMore =
    isLoadingInitialData ||
    (size > 0 && data && typeof data[size - 1] === 'undefined');
  const isEmpty = data?.[0]?.length === 0;
  const isReachingEnd =
    isEmpty || (data && data[data.length - 1]?.length < PAGE_LIMIT);

  return { posts, error, isLoadingMore, size, setSize, isReachingEnd };
};

The useSWRInfinite hook expects as an argument a function that returns the request key, a fetcher function, and options. The request key (index) is what SWR uses to know what data (page) to retrieve. The initial value of the request key is 0, so we have to increment it by 1 upon each request. The second argument to define the URL is PAGE_LIMIT, which is the number of items to fetch per request.

useSWRInfinite returns more values than that. I removed the data that I don't need here. Let's explain what these variables do:

• posts is the array of the data fetched from the server.
• isLoadingInitialData checks if there is still data to retrieve.
• isLoadingMore checks if we're currently retrieving data.
• isEmpty checks whether the array of data is empty or not.
• isReachingEnd checks if the page limit is reached or not.

Next, we return the values in order to use them in our components.

// index.js
import Head from 'next/head';
import Post from '../components/Posts';
import { usePaginatePosts } from '../components/useRequest';

export default function Home() {
  const { posts, error, isLoadingMore, size, setSize, isReachingEnd } =
    usePaginatePosts();

  if (error) return <h1>Something went wrong!</h1>;
  if (!posts) return <h1>Loading..</h1>;

  return (
    <div>
      <Head>
        <title>Next SWR App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="max-w-xl mx-auto">
        <h1 className="font-bold m-5">My Posts</h1>
        {posts.map((post) => (
          <Post post={post} key={post.id} />
        ))}
        <button
          disabled={isLoadingMore || isReachingEnd}
          onClick={() => setSize(size + 1)}
        >
          {isLoadingMore
            ? 'Loading...'
            : isReachingEnd
            ? 'No more posts'
            : 'Load more'}
        </button>
      </main>
    </div>
  );
}

We begin by importing usePaginatePosts. The values returned by the hook are then used to show the posts and load fresh data. SWR will forward the request to the next page and then return the data if the load more button is pressed. The data is now paginated using the useSWRInfinite hook.

Complex use case

Let’s explore a more complex use case. You can check out the SWR docs for more details on usage and benefits.

Mutation and revalidation with useSWR

So let’s say that we had our own /comments endpoint where we can retrieve all our comments from the database and also post to the endpoint to add new comments.

We can immediately write the code to look like this:

import useSWR from "swr";  
  const address = `http://localhost:3000/api/comments`;  
  const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR(address, fetcher);
  const addComment = async () => {
    const newComment = {
      comment: "This is a test comment",
      email: "rb@doe.com",
    };
    await fetcher(address, {
      method: "POST",
      body: JSON.stringify(newComment),
    });
  };

When we click a button to trigger the addComment() function, we'll use useSWR to post to the /comments endpoint, effectively adding a new comment to the database. However, our site will not know that there’s been an update and therefore we won’t see that comment on screen.

This is where the useSWR mutation comes in. We can use mutation to revalidate our page to:

1. Check if there’s new data
2. If there is, revalidate the page and render the new data without triggering a full page reload:

import useSWR from "swr";  
  const address = `http://localhost:3000/api/comments`;  
  const fetcher = (...args) => fetch(...args).then((res) => res.json());
  const { data, error } = useSWR(address, fetcher);
  const addComment = async () => {
    const newComment = {
      comment: 'This is a test comment',
      email: 'rb@doe.com',
    };
    await fetcher(address, {
      method: 'POST',
      body: JSON.stringify(newComment),
    });
    mutate(address);
  };

useSWR will now revalidate the page when we update the database by posting a new comment, ensuring that we don't offer stale data.

However, useSWR will revalidate your page on focus automatically to ensure that your data is maintained up to date. You may disable revalidation on focus by passing the following option to SWR as an argument:

const { data, error } = useSWR(address, fetcher, {
    revalidateOnFocus: false
  });

Conclusion

We've covered the basics of the useSWR hook in this post. We also used Next.js to create a blog post app to illustrate the SWR features. I hope this post has given you some insight into using useSWR to fetch data in Next.js apps.

If you like the contents then please share this article

The source code can be found here.

This article explains how to provide ASP.NET Core applications write access to specific folders in IIS App Pool. When using AWS Beanstalk, this is necessary for apps to operate properly.

The problem

User Content and files are often written to the wwwroot or any other specific folder by ASP.NET Core apps. SQL Server Compact (.mdf), XML files, text files, and other similar files are examples of such files. As a result, when hosting an ASP.NET Core site, the AppPool in which the application or website runs must have write access to the folder where we want to write files.

When we host an ASP.NET Core application on AWS Elastic Beanstalk, we don't have direct access to the application's file system. However, AWS has config files that can be used to provide permission to certain directories.

The error looks something like this:

System.UnauthorizedAccessException: Access to the path 'C:\inetpub\AspNetCoreWebApps\app\xxx\xxx' is denied

The Solution

1. Create a top-level folder called .ebextensions in your Visual Studio project.
2. Create a configuration file called <ApplicationName>.config inside .ebextensions folder, where <ApplicationName> is the name of your AWS application hosted on Elastic Beanstalk.
3. YAML script or JSON can be used in the configuration file. AWS attempts to parse the file using the YAML parser first, and if that fails, it attempts to parse it using the JSON parser. If both parsing attempts fail, the deployment is canceled, and the error is shown in the Elastic Beanstalk application console log.
4. Add the following JSON code to the config file.

{
  "container_commands": {
    "01": {
      "command": "icacls \"C:/inetpub/AspNetCoreWebApps\" /grant DefaultAppPool:(OI)(CI)F"
    }
  }
}

The container_commands execute commands that affect your application source code. Container commands run after the application and web server have been set up and the application version archive has been extracted, but before the application version is deployed. Non-container commands and other customization operations are performed prior to the application source code being extracted.

Container commands are run from the staging directory, where your source code is extracted prior to being deployed to the application server. Any changes you make to your source code in the staging directory with a container command will be included when the source is deployed to its final location.

That is why we have to use the icacls command pointing to C:\inetpub\AspNetCoreWebApps only because C:\inetpub\AspNetCoreWebApps\app\xxx\xxx folder is not created at the time of executing this command as it runs in the staging directory.

Once "icacls "C:/inetpub/AspNetCoreWebApps" /grant DefaultAppPool:(OI)(CI)F" executes in C:/inetpub/AspNetCoreWebApps folder, the write permission will be granted to all the subfolders inside it.

This script will be executed and Full access will be given to the folder for DefaultAppPool when this project is published to AWS Elastic Beanstalk. If you're using a custom AppPool, replace DefaultAppPool with the custom AppPool name in the script.

The publish-Subscribe pattern also known as Pub/Sub is an indispensable tool for building enterprise-grade .NET applications. Just to refresh your memory, Pub/Sub is a messaging paradigm where the senders of messages (publisher) do not have any knowledge about the intended recipients (subscribers). Moreover, the publisher and subscriber applications do not interact with each other directly but instead depend on a common medium known as a topic. Hence, it's a loosely coupled messaging model.

Now, assume that you have multiple applications of different roles deployed within the same architecture and they need a mechanism to inform/notify each other about certain events. These events could either be transient (due to changes made on the run time) or database events (due to changes in the database). That's exactly where the publish-subscribe design pattern will help you to enable distributed events.

Enabling Distributed Events

To design a distributed event-driven architecture, developers traditionally turn towards using either of the following methods below.

Data Notifications provided by RDBMS

If the datastore is limited to a relational database, using the database notification feature seems to be the best available option. It allows you to register your interest with the database server and notifies your applications when there is any change in the database result set due to update, add, or delete.

However, RDBMS are intrinsically unscalable and easily become a performance bottleneck in applications. You do not want to put an unnecessary load on your databases. Besides, the database notifications feature itself is inherently slow and doesn't support runtime data sharing as well.

Now you may understand why using the database as a messaging medium cannot be the best design choice for your applications.

Messaging Queues

The other option you have is to introduce a separate messaging queue in your architecture. While these messaging queues do a great job in helping you transmit messages among applications, these queues are not data-focused i.e. they do not monitor data changes in the databases or any other source. Also, these messaging queues cannot scale alongside your application tier.

Implement a Custom Solution

The last option left for you is to build your messaging platform/medium to suit your need. While this empty sandbox is very tempting at first, allowing you to develop your stuff however you want, there is complexity in terms of time and resources required. Although possible, building and managing a robust and scalable messaging platform is a very daunting task.

Now, the question remains which solution is easy to incorporate, scalable, highly available, and also very reliable?

A Distributed Cache as a Messaging Platform

Fret not, there is an easy solution. A more modern way to incorporate a robust messaging platform is to use an in-memory distributed cache. NCache is the only truly native .NET/.NET Core distributed cache available in the market. It is an in-memory distributed cache that is extremely fast and scalable. It enables your applications to handle extreme transaction loads without your database becoming a bottleneck.

NCache is usually deployed in the middle tier of your n-tier architecture. Take a look at the following diagram for a better understanding.

NCache is a cluster of cache servers serving tens of thousands of requests per second for your .NET applications as well as Java apps by keeping frequently used data in memory and helps avoid the majority of the database trips.

Let’s first see how NCache is inherently suitable to act as a messaging bus with its event-driven architecture.

NCache Event-Driven Messaging

The following figure shows how NCache acts as a messaging bus for .NET and Java applications.

Here NCache enables cross-platform communication by employing fast compact serialization, which converts your .NET or Java objects to binaries and then transfers them over to the cache cluster. So, this is how NCache allows your .NET applications to interact with Java applications and vice versa. For more information, take a look at portable data types.

NCache manages Pub/Sub design patterns under the name of Events and provides you with different methods to propagate your messages to other listening applications. Let’s take a look at both message types and see how a distributed cache can propagate them.

First, consider the data changes your applications need to listen to. Since NCache is also a .NET key-value store, it provides you with features to update your applications in case of any data changes within the cache. Because all of this is in-memory therefore there is no performance bottleneck. These updates could either be;

• Cache level item changes, be it update or remove.
• Whole cache level data changes.
• Continuous Query, where you register an SQL-like query to be watchful for if the result set changes within the cache. If it does your applications are notified.
• Cluster changes, if any new node is added or removed, or crashed. (For administration).

NCache also allows you to register dependency on databases including SQL, Oracle, and OleDb. This helps to keep your cache up to date with the database and thus your applications. For a full list of supported dependency types, check the database dependency. These dependencies are data change notifications registered with different data stores but you let NCache handle it. You can also combine database notifications with NCache data notifications to enrich your specific use case.

On the other hand, if you want to just propagate simple messages to complex .NET or Java objects then you should use the custom messaging feature. Here one application can produce the data and fire an event, whereas the interested listeners will receive the event almost instantaneously. For further information in this regard, you can see custom events.

NCache Pub/Sub API

NCache provides an in-memory Publisher/Subscriber (Pub/Sub) feature and a dedicated Pub/Sub Messaging store to enable real-time information sharing in .NET web applications. We will see how combining NCache and Pub/Sub can address the above challenges and eventually help your applications communicate better.

The Pub/Sub model naturally decouples publishers and subscribers by providing a channel where messages are published and subscribed by the interested users. Now when NCache acts as a messaging bus, the Pub/Sub model benefits from the underlying NCache distributed architecture and numerous handy features.

Basic Architecture

Without further ado, let's first get to know the basic components of NCache Pub/Sub and their working. The general flow of the NCache Pub/Sub messaging is like this - the publisher publishes messages on a topic using the ITopicinterface. The subscribers create subscriptions to one or many topics and receive relevant messages. On successful message delivery, NCache receives the acknowledgment. Otherwise, NCache keeps retrying before the message expires (if expiration is set). Undelivered messages reside in the cache until eviction or expiration are triggered and enabled.

Subscription Types

NCache provides two different types of subscriptions namely, non-durable and durable subscriptions for pub/sun messaging. Furthermore, NCache enables exclusive and shared subscription policies. The relevant details are discussed below.

• Non-Durable Subscription: By default, all subscriptions created on a topic are non-durable subscriptions. It conveys intended messages to the subscriber-only until it remains connected. In case the subscriber’s connection is lost due to any reason, it doesn’t receive old messages on rejoining the network. This type of subscription is exclusive, which means that one subscription belongs to one subscriber.
• Durable Subscription: It takes account of a message loss on subscriber disconnectivity. NCache retains the subscription of a subscriber on connection loss. Hence, a subscriber can receive the published messages of interest on reconnecting. A durable subscription offers two policies:

1. Exclusive: One subscription belongs to one active subscriber at a time.
2. Shared: One subscription can have more than one subscriber registered at a time and the load is shared.

Getting Started with NCahce Pub/Sub

Let’s assume that there is an e-commerce store where new products are added to the store on regular basis by different vendors. Meanwhile, sales and offers are also provided on the products. The store managers and customers interested in the offered products need to stay updated about new products, products on sale, and discounts. NCache Pub/Sub feature can enable distributed notification system in this scenario. For that, NCache dedicated Pub/Sub Messaging store can be created first.

Let’s discuss the step-by-step process of achieving distributed messaging in the above scenario by using NCache Pub/Sub Messaging API.

Create a Topic

As a first step, a topic needs to be created where updates on new products can be published by different vendors. A new topic with a unique name can be created using the NCache ITopic interface. Here is how the publisher application uses the method CreateTopic to create a topic with the name newProducts.

// Pre-condition: Cache is already connected
// Specify the topic name
string topicName = “newProducts”

// Create topic
ITopic topic = cache.MessagingService.CreateTopic(topicName);

In case a topic with the provided name already exists, an instance of the topic is returned as ITopic.

NCache allows to set topic priority while creating the topic. It is useful when certain events need to be communicated on a higher priority than others. For instance, the information about finished goods is urgent. Similarly, the update in product prices due to discount or sale can be most important being a seller/buyer. In that case, the topic priority can be set to high while creating it, and the relevant notifications can be received without any delay.

Publish Messages

Once a topic is created, the publisher application can publish relevant messages to that topic using Publish method. For that, an instance of the topic is first obtained by specifying the topic name. NCache provides the following two delivery modes while publishing messages:

• All (default): Delivers the message to all the registered subscribers. It is useful when the information needs to be broadcasted.
• Any: Delivers the message to any of the registered subscribers.

Furthermore, to efficiently manage the storage space of your Pub/Sub cache, you can also set expirations for messages.

In the following code, messages about new products are broadcasted by a publisher on an already existing topic newProducts.

// Pre-condition: Cache is already connected
// Topic “newProducts” already created
string topicName = “newProducts”

// Get the topic
ITopic productTopic = cache.MessagingService.GetTopic(topicName);

// Create the object to be sent in message
Product product = FetchProductFromDB(10248);

// Create the new message with the object order
var productMessage = new Message(product);

// Publish the order with delivery option set as all
orderTopic.Publish(productMessage, DeliveryOption.All, true);

Subscribe for Topic Messages

Once the topic is created, a subscriber application can receive the messages published to that topic by getting a subscription. Since different types of subscriptions are supported, a subscriber interested in a non-durable subscription can use the CreateSubscription method. For durable subscriptions, the CreateDurableSubscription method can be used.

The code below shows how a subscriber application can create a subscription for the topic newProducts. MessageReceived the callback is registered to perform any intended operation on being notified. For instance, a subscriber can update product prices in the MessageReceived callback on receiving a sale notification.

// Pre-condition: Cache is already connected
// Topic “newProducts” already created
string topicName = “newProducts”

// Get the topic
ITopic productTopic = cache.MessagingService.GetTopic(topicName);

// Create and register subscribers for topic newProducts
// MessageReceived callback is specified
ITopicSubscription orderSubscriber = orderTopic.CreateSubscription(MessageReceived);

In the above example, a non-durable subscription is created. Besides, a subscriber can create a durable subscription when there is a need to receive the old messages from subscribed topic/topics on reconnection.

NCache also provides a pattern-based method of subscription where NCache supports multiple wildcards to subscribe for single/multiple topics falling under the provided pattern.

Register Notifications

NCache empowers the publishers to know the status of messages and the availability of topics. The following notifications can be registered by the publisher applications:

• MessageDeliveryFailure: Notifies the publisher if a message has failed to deliver because of any issue.
• OnTopicDeleted: Notifies a publisher when a message gets deleted.

Here is how simply the publisher can register for these two types of notifications.

// You have an instance productTopic of existing topic

// Register message delivery failure
productTopic.MessageDeliveryFailure += OnFailureMessageReceived;

//Register topic deletion notification
productTopic.OnTopicDeleted = TopicDeleted;

By following the above steps a basic Pub/Sub Messaging architecture can be integrated into any ASP.NET/.NET Core application.

Conclusion

To this point, you are familiar with the NCache Pub/Sub feature. Let’s summarize what benefits Ncache Pub/Sub offers to handle the limitations of existing solutions.

• Due to the linear scalability, NCache Pub/Sub can handle the increasing number of subscription requests by adding cache servers and performing load balancing on the go. The scaling up occurs transparently to the users without hindering the communication process. Hence, you can easily scale up your communication performance using NCache Pub/Sub.
• NCache Pub/Sub facilitates durable subscriptions, message delivery retires and delivery failure notifications to avoid message loss. Moreover, the distributed and replicated architecture of NCache ensures the high availability of NCache that accommodates subscribers' connectivity in dynamic environments. Altogether these features ensure reliable communication.
• Since NCache is an in-memory distributed cache, the message store residing in the cache is inherently fast. In addition, NCache allows expiration and evictions on items residing in the cache to intelligently manage the storage space.

The scalability, reliability, and storage efficiency of NCache together with loose coupling and async messaging mode of Pub/Sub make NCache Pub/Sub feature highly promising for distributed messaging in the future .NET/.NET Core applications.

Key Takeaways

• Real-time data/stream processing is attractive for data-driven applications with low latency requirements such as network monitoring and real-time price analysis applications.
• An in-memory distributed is an ideal platform for the development of real-time stream processing applications due to extremely fast data access and linear scalability.
• Modern distributed caching solutions facilitate real-time communication for .NET and .NET Core stream processing applications through Pub/Sub messaging, SQL and LINQ searching, events, and continuous query.
• NCache is a .NET/.NET Core distributed cache that helps such applications to process fast and scale out with ease.

Real-Time Data/Stream Processing with Distributed Caching

With technological advancement, data-driven applications with low latency requirements are emerging rapidly. Real-time stream processing applications in .NET/.NET Core are particularly attractive since they quickly process huge amounts of incoming data from various sources before it is stored in the database. This allows quick decision-making for businesses and in turn, reduces the response time for data events in an application.

In-memory storage and computing: the de facto standard

Real-time stream processing is used for a wide range of business applications that deal with incoming data at high volume and require immediate analysis. For example, e-commerce, risk management, fraud detection, network monitoring, real-time price analysis applications, etc. The applications that work with data streams crave storage and processing to record large streams of data and perform computations. The legacy databases aren’t fast enough to meet the real-time processing needs and easily become a performance bottleneck when it comes to scalability.

Distributed caching paradigm

Recently, distributed caching has emerged as a promising paradigm for in-memory storage and computing. A distributed cache is a system where random-access memory (RAM) of multiple networked computers is pooled into a single in-memory cache cluster for providing fast access to data. With the distributed architecture, a distributed cache can grow beyond the memory limits of a single physical server. Hence, the capacity and processing power are aggregated by avoiding any single point of failure.

Distributed caches are particularly useful in environments with high transaction data and load. The distributed architecture attributes scaling by adding more physical servers to the cluster and thus allows the cache to scale with an increase in data. The popular distributed caches used in the industry are Eh-cache, Memcache, Redis, Riak, Hazelcast, and NCache.

Rethinking stream processing with distributed caching

In-memory distributed caching is an ideal platform for real-time stream processing applications. With different streaming modes in a cache you can easily:

• Add or update cache data with streams in write mode.
• Read data from a stream with or without locking.
• Write data in parallel to read operations without locking.
• Read data simultaneously for multiple clients with locking.

Here, we discuss why and how distributed caching compliments real-time stream processing applications.

Distributed caching features benefiting stream processing

Let us see what specific features in a distributed cache assist real-time stream processing applications.

Pub/Sub Messaging

A typical stream processing app consists of various several producers including data ingestion, integration, and real-time analytics. The underlying responsibilities are handled by different modules which are usually codependent.  Hence, these modules need to communicate with each other to collaborate. Pub/Sub messaging feature allows asynchronous microservice communication while maintaining decoupling. Therefore, it can enable real-time information sharing on a large scale for stream processing applications.

The performance of Pub/Sub messaging can be scaled when it is integrated with a distributed in-memory cache that acts as a messaging bus. The basic working of the Pub/Sub mechanism is something like this: A Topic is created inside the cache. A publisher publishes messages on this Topic. Client applications (also known as subscribers) make a subscription against this Topic to receive the messages published on it by the Publisher. The subscription made by the subscribers against a topic is of two types:

• Durable: Subscribers can receive messages intended for them even after a period of disconnection. Meaning, the messages are maintained for them.
• Non-Durable: Subscribers receive messages from the topic as long as they are connected to the network. Once a subscriber leaves the network and then, later on, re-joins the network, it will not receive messages intended for it during that disconnection phase. Meaning, messages for a subscriber aren’t maintained.

Let's assume an e-commerce application, that processes thousands of customers each day for their online purchases. The customers can belong to different categories based on their purchases. To make the processing of customers efficient, the unfiltered customers are categorized and filtered as Gold, Silver, and Bronze customers based on the number of their orders. Using the Pub/Sub messaging feature of a cache,  a Publisher can create a topic Orders and publish relevant updates to it. Meanwhile, a subscriber can subscribe to the topic for order information to further process the customers.

Searching with SQL & LINQ in Cache

Stream processing applications handle the aggregation and filtering of huge datasets. Similar to a database, caches also offer a searching mechanism where you can fetch the cache keys/data using SQL-like query syntax while using a rich set of operators. Hence, you can bring SQL querying capabilities to your data streams.

LINQ or Language Integrated Query is a Microsoft .NET component that adds data querying features to .NET languages. Syntax-wise it’s quite similar to SQL. LINQ can be integrated seamlessly into a cache via a LINQ provider. The LINQ provider facilitates the execution of LINQ queries over the distributed cache while improving the application’s performance without changing the LINQ object model.

Event Notifications

The stream processing applications work on data in motion where actions need to be performed on the data flow as soon as possible. Meanwhile, the underlying events generated need to be handled efficiently since the real-time response is the fundamental requirement here. A distributed cache seamlessly enables real-time notifications through events. These notifications are sent asynchronously to the client so there is no overhead on the client’s activities.

It allows the client applications to register events for cache activities of their interest. This facilitates run-time data sharing when a single cache is shared by separate applications or separate modules of the same application. Hence, the client applications can monitor the state of their data and perform actions accordingly. You have the flexibility to register for cache-level events, item-level events, and management-level events. Moreover, you can either get data or metadata along with the event by using event filters in a cache.

In cache level events, the registered clients can be notified of the addition, insertion, and removal of any cache item. On the other hand, item-level events can be registered for specific keys or chunk of keys. In that case, the cache is responsible for monitoring changes for the specified key/keys, and notifications are triggered when data against those keys are altered. As the name indicates, management level events can be registered for notifying when any management operation such as cache clear and cache stop are performed.

Continuous Queries (CQ)

A typical stream application consists of several producers generating new events and a set of consumers processing these events. In this regard, there is a need to monitor a Window of time for specific types of data additions and changes. Cache provides Continuous Query for runtime monitoring and sharing of data related to an observable data set. This allows applications to be notified of all changes that occur within the queried result set in the cache.

Scalable distributed stream processing

Designing scalable applications is crucial while working with streaming data. An in-memory distributed cache is extremely fast due to the storage mode and underlying architecture. And, it also provides linear scalability due to which it never becomes a bottleneck for your .NET / .NET Core Stream Processing application performance even under peak loads.

While handling incoming data from various sources and in varying formats, your system should be able to tolerate disruptions from a single point of failure. A distributed cache provides a self-healing peer-to-peer clustering architecture that has no single point of failure. Additionally, caches implement intelligent replication strategies with minimum replication cost so there is no data loss in case a cache server goes down.

NCache is the only truly native .NET/.NET Core distributed cache available in the market. All others are developed in C++ on Linux and later ported to Windows with limited compatibility of .NET. NCache fits nicely into your .NET / .NET Core application stack and simplifies your cost of development and maintenance. Meanwhile, it provides different streaming modes, a dedicated Pub/Sub store, event notifications, cache searching with SQL queries, and LINQ. It's an ideal choice for your .NET/.NET Core stream processing applications.

Protecting Routes from unauthenticated users is a crucial part of any app.

In this article, I'll show you exactly how to create protected routes in your NextJS application using NextAuth.

I'll use a JWT token as an example, with the accessToken  being saved in the session. Check this article for more information.

Check out this article which explains 7 React Hooks in detail.

Because of the way Next.js handles getServerSideProps and getInitialProps, every protected page load must make a server-side request to determine whether the session is valid before generating the requested page (SSR). This increases server load, but there is an option if you are comfortable making requests from the client. You can use useSession to ensure that you always have a valid session. If no session is identified after the initial loading state, you can determine the appropriate action to take.

First, let's modify our _app.js file.

import { SessionProvider, useSession, signIn } from 'next-auth/react';
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      {Component.auth ? (
        <Auth>
          <Component {...pageProps} />
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  )
}

function Auth({ children }) {
  const { data: session, status } = useSession()
  const isUser = !!session?.user
  React.useEffect(() => {
    if (status === "loading") return
    if (!isUser) signIn()
  }, [isUser, status])

  if (isUser) {
    return children
  }

  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div>Loading...</div>
}

Line #23: Do nothing while in the loading state.

Line #24: If the user is not authenticated, force the user to the login page.

Custom Client Session Handling

Because of how Next.js handles getServerSideProps / getInitialProps, every protected page load must make a server-side request to determine whether the session is valid and then build the requested page. This alternate technique enables for the display of a loading status on the initial check, and all subsequent page transitions will be client-side, eliminating the need to check with the server and regenerate pages.

Consider the "/dashboard" page. Only authorized users should be able to view this page.

export default function Dashboard() {
  const { data: session } = useSession()
  return "Some super secret dashboard"
}

Dashboard.auth = true

The session is always non-null inside this page, all the way down the React tree.

Notice that we are using Dashboard.auth = true to check if the user is authenticated, if not redirect to the login page.

We need to add auth = true to every page that we want to protect from unauthenticated users.

It is simple to extend/modify to support something similar to an options object for role-based authentication on pages. As an example:

Dashboard.auth = {
  role: "admin",
  loading: <LoadingSkeleton />,
  unauthorized: "/login-with-different-user", // redirect to this url
}

I hope this post helps.

When it comes to adding authentication to your next.js project, NextAuth is a wonderful option. It's easy to see why, given its extensive provider support, which includes Apple, GitHub, Azure Active Directory, Azure Active Directory B2C, Google, and more. It can help you set up your authentication in minutes!

However, for different reasons, you may need to implement your custom backend or external API with an email/password login. That's where the credentials provider associated with your API server comes in handy. I was in the same situation and couldn't find a clear description with examples, so I had to pull together the details myself (especially handling errors from the custom backend and handling them on your custom login page). If you're in a similar boat, I hope this helps!

Starting your Project

Open a command prompt or terminal window in the location where you wish to save your project and run the following command.

npx create-next-app -e with-tailwindcss my-project

This creates a new project in the my-project directory. I have also included Tailwind CSS. You should see something like this in the my-project directory.

After that, change the directory to my-projects and type yarn dev from your terminal to start the next development server. You can now go to http://localhost:3000 and see the following.

Setting up the API

Now let's add the NextAuth package by running the following command.

yarn add next-auth@beta

In our .env file, we need to create a NEXTAUTH URL. Add the following to your .env file.

NEXTAUTH_URL=http://localhost:3000

Now, create a file called [...nextauth].js in pages/api/auth to include NextAuth.js in your project. This contains the NextAuth.js dynamic route handler, as well as all of your global NextAuth.js configuration.

We need to add the following to the [...nextauth].js, each section will be described later.

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'my-project',
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      credentials: {
        email: {
          label: 'email',
          type: 'email',
          placeholder: 'jsmith@example.com',
        },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials, req) {
        const payload = {
          email: credentials.email,
          password: credentials.password,
        };

        const res = await fetch('https://cloudcoders.azurewebsites.net/api/tokens', {
          method: 'POST',
          body: JSON.stringify(payload),
          headers: {
            'Content-Type': 'application/json',
          },
        });

        const user = await res.json();
        if (!res.ok) {
          throw new Error(user.message);
        }
        // If no error and we have user data, return it
        if (res.ok && user) {
          return user;
        }

        // Return null if user data could not be retrieved
        return null;
      },
    }),
    // ...add more providers here
  ],
  secret: process.env.JWT_SECRET,
  pages: {
    signIn: '/login',
  },
  callbacks: {
    async jwt({ token, user, account }) {
      if (account && user) {
        return {
          ...token,
          accessToken: user.token,
          refreshToken: user.refreshToken,
        };
      }

      return token;
    },

    async session({ session, token }) {
      session.user.accessToken = token.accessToken;
      session.user.refreshToken = token.refreshToken;
      session.user.accessTokenExpires = token.accessTokenExpires;

      return session;
    },
  },
  theme: {
    colorScheme: 'auto', // "auto" | "dark" | "light"
    brandColor: '', // Hex color code #33FF5D
    logo: '/logo.png', // Absolute URL to image
  },
  // Enable debug messages in the console if you are having problems
  debug: process.env.NODE_ENV === 'development',
});

All requests to /api/auth/* (signIn, callback, signOutetc.) will automatically be handled by NextAuth.js.

The first section is the providers section:

providers: [
    CredentialsProvider({
      id: 'credentials',
      name: 'my-project',
      credentials: {
        email: {
          label: 'email',
          type: 'email',
          placeholder: 'jsmith@example.com',
        },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials, req) {
        const payload = {
          email: credentials.email,
          password: credentials.password,
        };

        const res = await fetch('https://cloudcoders.azurewebsites.net/api/tokens', {
          method: 'POST',
          body: JSON.stringify(payload),
          headers: {
            'Content-Type': 'application/json',
          },
        });

        const user = await res.json();
        if (!res.ok) {
          throw new Error(user.message);
        }
        // If no error and we have user data, return it
        if (res.ok && user) {
          return user;
        }

        // Return null if user data could not be retrieved
        return null;
      },
    }),
    // ...add more providers here
  ],

This returns an array of providers; we only have one in our example, which is the credentials provider, but you may add others like GitHub, Google, or Apple.

When we execute the signin method from the frontend, the id is utilized to trigger the provider that we require, in this case, the credentials.

Next, we have an async authorize method. This method takes a parameter called credentials. Credentials will hold the user, password, and any other payloads required by the custom backend API that you will send from the frontend with the sign-in information.

The next section is secret and custom pages.

  secret: process.env.JWT_SECRET,
  pages: {
    signIn: '/login',
  },

A secret to using for a key generation - you should set this explicitly. This is used to generate the actual signing key and produces a warning message if not defined explicitly.

If you wish to create custom sign-in, sign-out, or error pages, you can utilize pages to provide URLs. I have put the custom login page at  pages/login.js.

Next up we have a series of callbacks. Note that the callbacks will accept a variety of parameters, but not all of them are required for the provider we're using, and some information may vary depending on the provider - the information below is only applicable for the credentials provider.

callbacks: {
    async jwt({ token, user, account }) {
      if (account && user) {
        return {
          ...token,
          accessToken: user.token,
          refreshToken: user.refreshToken,
        };
      }

      return token;
    },

    async session({ session, token }) {
      session.user.accessToken = token.accessToken;
        
      return session;
    },
  },

The JWT callback is called first, which sets up the data for the session.

The signing method returns the user parameter which contains the user model, but only on the first call, i.e. when the user first signs in, so here, add the user key to the token and set it to be the value of the user model, otherwise it just returns the token.

The session callback sets this in the session with the user key.

Using the NextAuth API in the frontend

The custom login.js page should look like this. I am also using Formik and Yup for client-side validation.

import { useState } from 'react';
import { signIn, getCsrfToken } from 'next-auth/react';
import { Formik, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { useRouter } from 'next/router';

export default function SignIn({ csrfToken }) {
  const router = useRouter();
  const [error, setError] = useState(null);

  return (
    <>
      <Formik
        initialValues={{ email: '', password: '', tenantKey: '' }}
        validationSchema={Yup.object({
          email: Yup.string()
            .max(30, 'Must be 30 characters or less')
            .email('Invalid email address')
            .required('Please enter your email'),
          password: Yup.string().required('Please enter your password'),
         })}
        onSubmit={async (values, { setSubmitting }) => {
          const res = await signIn('credentials', {
            redirect: false,
            email: values.email,
            password: values.password,
            callbackUrl: `${window.location.origin}`,
          });
          if (res?.error) {
            setError(res.error);
          } else {
            setError(null);
          }
          if (res.url) router.push(res.url);
          setSubmitting(false);
        }}
      >
        {(formik) => (
          <form onSubmit={formik.handleSubmit}>
            <div 
            className="bg-red-400 flex flex-col items-center 
            justify-center min-h-screen py-2 shadow-lg">
              <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                <input
                  name="csrfToken"
                  type="hidden"
                  defaultValue={csrfToken}
                />

                <div className="text-red-400 text-md text-center rounded p-2">
                  {error}
                </div>
                <div className="mb-4">
                  <label
                    htmlFor="email"
                    className="uppercase text-sm text-gray-600 font-bold"
                  >
                    Email
                    <Field
                      name="email"
                      aria-label="enter your email"
                      aria-required="true"
                      type="text"
                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
                    />
                  </label>

                  <div className="text-red-600 text-sm">
                    <ErrorMessage name="email" />
                  </div>
                </div>
                <div className="mb-6">
                  <label
                    htmlFor="password"
                    className="uppercase text-sm text-gray-600 font-bold"
                  >
                    password
                    <Field
                      name="password"
                      aria-label="enter your password"
                      aria-required="true"
                      type="password"
                      className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
                    />
                  </label>

                  <div className="text-red-600 text-sm">
                    <ErrorMessage name="password" />
                  </div>
                </div>
                <div className="flex items-center justify-center">
                  <button
                    type="submit"
                    className="bg-green-400 text-gray-100 p-3 rounded-lg w-full"
                  >
                    {formik.isSubmitting ? 'Please wait...' : 'Sign In'}
                  </button>
                </div>
              </div>
            </div>
          </form>
        )}
      </Formik>
    </>
  );
}

// This is the recommended way for Next.js 9.3 or newer
export async function getServerSideProps(context) {
  return {
    props: {
      csrfToken: await getCsrfToken(context),
    },
  };
}

Line #26 - 31: This uses the credentials provider to call the sign-in function and passes the email and password we need to authenticate against. You can also set the callback Url where you want to redirect after a successful login.

You should be able to log in at this stage if you've entered the correct credentials and your API endpoint is working as expected.

We can also display the error message on our custom login page in any way we want with this configuration. For example, I'm displaying the following server error message:

The easiest way to check if someone is logged in is to use useSession() React Hook. Make sure that <SessionProvider> is added to pages/_app.js.

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  const { data: session } = useSession()
  if(session) {
    return <>
      Signed in as {session.user.email} <br/>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  }
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>
  </>
}

The source code used in this article is here.

Read about how to create protected routes in NextJs.

I hope this post helps, I've only recently started looking into NextJS and NEXTAuth so if you spot any issues or areas where it can be improved then let me know in the comments and if you like the contents then please share this article.

We'll learn how to use JSON-based localization in.NET 6 and how to combine it with caching to make it even more efficient. We'll save the localized strings in JSON files and utilize middleware to swap languages using language keys in the request header.

The source code can be found here

What we'll Build?

We'll create a .NET 6 Web API that provides messages based on the Accepted Language in the request header. We'll use IDistributedCache to cache the string. The main purpose of this approach is to read language strings from a JSON file instead of a RESX file. We'll do this by adding a new IStringLocalizer implementation. This will be straightforward, but it will be extremely useful. Who doesn't want to work with JSON files?

It'll just need three new classes and a few service registrations. Let's get this started!

Getting started with JSON based localization in .NET 6

Create a new ASP.NET Core Web API project in your favorite IDE (I use Visual Studio 2022 Community). Make sure you're using the .NET 6.0 Framework.

I'm not going to include any other class files in this implementation because I want it to be as basic as possible. To clear up the project, I deleted the weather controllers and related files from the WebAPI solution.

There are two aspects to this implementation:

• A Middleware that can determine the language code passed in at the request header by the client (which will be a postman in our case).
• An implementation of the IStringLocalizer to support JSON files. I intend to store the JSON file by the locale name (en-US.json) under a Resources folder. Note that we will also use IDistributedCache to make our system more efficient.

Let’s create a new class and name it JsonStringLocalizer.cs

    public class JsonStringLocalizer : IStringLocalizer
    {
        private readonly IDistributedCache _cache;
        private readonly JsonSerializer _serializer = new();

        public JsonStringLocalizer(IDistributedCache cache)
        {
            _cache = cache;
        }

        public LocalizedString this[string name]
        {
            get
            {
                var value = GetString(name);
                return new LocalizedString(name, value ?? name, value == null);
            }
        }

        public LocalizedString this[string name, params object[] arguments]
        {
            get
            {
                var actualValue = this[name];
                return !actualValue.ResourceNotFound
                    ? new LocalizedString(name, string.Format(actualValue.Value, arguments), false)
                    : actualValue;
            }
        }

        public IEnumerable<LocalizedString> GetAllStrings(bool includeParentCultures)
        {
            var filePath = $"Resources/{Thread.CurrentThread.CurrentCulture.Name}.json";
            using var str = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read);
            using var sReader = new StreamReader(str);
            using var reader = new JsonTextReader(sReader);
            while (reader.Read())
            {
                if (reader.TokenType != JsonToken.PropertyName)
                    continue;
                string? key = reader.Value as string;
                reader.Read();
                var value = _serializer.Deserialize<string>(reader);
                yield return new LocalizedString(key, value, false);
            }
        }
        private string? GetString(string key)
        {
            string? relativeFilePath = $"Resources/{Thread.CurrentThread.CurrentCulture.Name}.json";
            var fullFilePath = Path.GetFullPath(relativeFilePath);
            if (File.Exists(fullFilePath))
            {
                var cacheKey = $"locale_{Thread.CurrentThread.CurrentCulture.Name}_{key}";
                var cacheValue = _cache.GetString(cacheKey);
                if (!string.IsNullOrEmpty(cacheValue))
                {
                    return cacheValue;
                }

                var result = GetValueFromJSON(key, Path.GetFullPath(relativeFilePath));

                if (!string.IsNullOrEmpty(result))
                {
                    _cache.SetString(cacheKey, result);

                }
                return result;
            }
            return default;
        }
        private string? GetValueFromJSON(string propertyName, string filePath)
        {
            if (propertyName == null) {
                return default;
            }
            if (filePath == null) {
                return default;
            }
            using var str = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read);
            using var sReader = new StreamReader(str);
            using var reader = new JsonTextReader(sReader);
            while (reader.Read())
            {
                if (reader.TokenType == JsonToken.PropertyName && reader.Value as string == propertyName)
                {
                    reader.Read();
                    return _serializer.Deserialize<string>(reader);
                }
            }
            return default;
        }
    }

Line #3: We use IDistributedCache here.

Line #31 - 46: With GetAllStrings(), we try to read the JSON file name according to CurrentCulture and return a list of LocalizedString objects. The key and values of all the entries in the retrieved JSON file would be included in this list. Deserialization is performed on each of the read JSON values.

Line #47 - 70: String localization is handled by the GetString() method. In this case, the file path is also determined by the request's current culture. If the file exists, a cache key with a unique name is generated. The system would look in cache memory to determine if the matched key contains any value. If a value is discovered in the cache, it is returned. Otherwise, the app opens the JSON file and tries to get and return the string it finds.

Line #11 - 18: this[string name]  This is the entry method in our controller that we will use. It accepts a key and uses the previously described approach to try to find the associated values in the JSON file. It's worth noting that if no value is discovered in the JSON file, the method will return the same key.

Next, we'll create a Factory class that will be responsible for generating the JsonStringLocalizer instance internally. Name the new class as JsonStringLocalizerFactory.

    public class JsonStringLocalizerFactory : IStringLocalizerFactory
    {
        private readonly IDistributedCache _cache;

        public JsonStringLocalizerFactory(IDistributedCache cache)
        {
            _cache = cache;
        }

        public IStringLocalizer Create(Type resourceSource) =>
            new JsonStringLocalizer(_cache);

        public IStringLocalizer Create(string baseName, string location) =>
            new JsonStringLocalizer(_cache);
    }

Then comes the fun part: writing a Middleware that can read the Accept-Language key from the request header and set the current thread's language if the culture is valid.

Create a new class and name it LocalizationMiddleware.

    public class LocalizationMiddleware : IMiddleware
    {
        public async Task InvokeAsync(HttpContext context, RequestDelegate next)
        {
            var cultureKey = context.Request.Headers["Accept-Language"];
            if (!string.IsNullOrEmpty(cultureKey))
            {
                if (DoesCultureExist(cultureKey))
                {
                    var culture = new CultureInfo(cultureKey);
                    Thread.CurrentThread.CurrentCulture = culture;
                    Thread.CurrentThread.CurrentUICulture = culture;
                }
            }
            await next(context);
        }
        private static bool DoesCultureExist(string cultureName)
        {
            return CultureInfo.GetCultures(CultureTypes.AllCultures)
                .Any(culture => string.Equals(culture.Name, cultureName,
              StringComparison.CurrentCultureIgnoreCase));
        }
    }

Line #5: The Accept-Language of the current HTTP context is read here from the request header.

Line #8-13: The current thread culture is set if a valid culture is found.

Let's start by adding some language files. Create a new Resources folder and add two new JSON files to it. The JSON files will be named en-US.json and de-DE.json

Sample of en-US.json

{
  "hi": "Hello",
  "welcome": "Welcome {0}, How are you?"
}

Next,de-DE.json. PS, the following was translated via Google Translate.

{
  "hi": "Hallo",
  "welcome": "Willkommen {0}, wie geht es dir?"
}

As you can see, we have two keys, hello and welcome, that the program is supposed to translate based on the request header.

Now comes the crucial phase, where we register our middleware and the JSONLocalizer as services. Add the following to the ConfigureServices function in Startup.cs.

services.AddLocalization();
services.AddSingleton<LocalizationMiddleware>();
services.AddDistributedMemoryCache();
services.AddSingleton<IStringLocalizerFactory, JsonStringLocalizerFactory>();

Add the following to the Configure method. It's worth noting that we've set en-US as our application's default culture. This can also be made configurable by moving it to the appsettings.

var options = new RequestLocalizationOptions
{
    DefaultRequestCulture = new RequestCulture(new CultureInfo("en-US"))
};
app.UseRequestLocalization(options);
app.UseStaticFiles();
app.UseMiddleware<LocalizationMiddleware>();

Finally, let's create a new API Controller to show how our JSON localizer works. Create a new Controller with the name HomeController.

    public class HomeController : ControllerBase
    {
        private readonly IStringLocalizer<HomeController> _stringLocalizer;

        public HomeController(IStringLocalizer<HomeController> stringLocalizer)
        {
            _stringLocalizer = stringLocalizer;
        }
        [HttpGet]
        public IActionResult Get()
        {
            var message = _stringLocalizer["hi"].ToString();
            return Ok(message);
        }
        [HttpGet("{name}")]
        public IActionResult Get(string name)
        {
            var message = string.Format(_stringLocalizer["welcome"], name);
            return Ok(message);
        }
        [HttpGet("all")]
        public IActionResult GetAll()
        {
            var message = _stringLocalizer.GetAllStrings();
            return Ok(message);
        }
    }

Line #3: Constructor Injection of IStringLocalizer instance.

Line #10 - 14: Here's a test to see whether we can output the localized version of the key 'hi' to the console and then return it as a response.

Line #16 - 20: The application should return a localized version of "Welcome xxxx, how are you?" when we give this endpoint a random name. That's all there is to it.

Line #22 - 26: This method would ideally return all the keys and values found in the corresponding JSON file.

Testing with Postman

Let's fire up Postman and perform some basic tests.

Here is what you get as a response when you send a GET request to the /api/home endpoint with the Accept-Language as de-DE

Accept-Language is set to en-US.

Now, I try to send a GET request to the /api/home endpoint along with the name. Accept-Language set to en-US

Accept-Language set to de-DE.

Finally, when you send a GET request to the /api/home/all endpoint, you get to see all the key/value pairs of our strings in the JSON file related to the relevant accept-language.

Isn't it great to have in your projects?

Summary

We learned a quick and easy technique to implement JSON-based localization in .NET 6 applications in this article. The source code can be found here.

Azure Resource Manager is the deployment and management service for Azure. It provides a management layer that enables you to create, update, and delete resources in your Azure account. You use management features, like access control, locks, and tags, to secure and organize your resources after deployment.

Key service characteristics

• Deployment and Management service
• Centralized layer for resource Manager

How does it work?

First, let's talk about how we can deploy resources in Azure.

There are several ways of deploying resources to Azure such as Azure Portal, Azure PowerShell, Azure CLI, rest client.

For Azure PowerShell and Azure CLI, we use SDKs, however, all those interfaces are communicating with the single Azure Resource Manager endpoint which is the centralized layer.

It is secured by default because it is secured with Active Directory.

Once the request is received, the resource manager talks to Resource Provider. Every single resource in Azure has its own Resource Provider and that resource provider handles everything related to that specific resource.

In Azure, everything is managed in hierarchical scope and the scope goes from the management groups to the lowest level of Resources.

ARM templates overview.

They are the unified language for you to manage resources in Azure using a declarative approach using very simple files.

HOW IT WORKS

The way it works is very simple. Imagine you have a resource group in which you have a virtual machine and a storage account. You can create a very simple template to deploy all that in a single go.

The format of the file is JSON. The format has standard properties of which some are the same and some are mandatory.

The template will look like this.

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {},
  "functions": [],
  "variables": {},
  "resources": [
        {

            /* Resource A */
        },
        {
            /* Resource B */
        }
       
  ],
  "outputs": {}
}

$schema: Describes properties available in the template.

contentVersion: Versioning system in the template for development purpose. If you are using git for versioning, then this field is not important to keep it up-to-date.

parameters: This field is optional but if you want to parameterize your template then you can use this to pick up some input parameters for the template.

variables: If you want to calculate something dynamically then you can use variables section to calculate some dynamic properties during the execution of the template based on your input parameters and other variables.

resources: The most important section of the template. It's an Array of JSON objects, where each objects describes the service that is going to be deploying and you can multiple resources deployed using the single template.

output: This section allows you to return some properties and information from the template execution. This is useful for chaining multiple templates together. For example, you can capture the Id of the component you have created and pass that to another template.

function: You can define expressions here and reuse across your template.

Benefits of using ARM Templates

• Infrastructure as Code (IaC), Policy and Roles as Code
• Declarative syntax (what is it)
• Repeatable results
• Orchestration
• Built-in Validation
• Modular files
• Tracked templates
• Many authoring tools
• Functions and expressions
• Linked and nested templates
• Dependencies
• References
• Export
• Loops
• Conditions

When to use ARM Templates

1. Application development and maintenance
2. CI/CD scenarios
3. Azure governance

• Policies
• Roles
• Etc.

The most typical and common scenario is application development and maintenance. It can also be used for CI/CD of those applications and it is very helpful when you are moving resources across multiple environments that ensure consistent results.

If you are an administrator for managing resources, you can use ARM templates for governance. You can define policies, roles, and many more.

By now, we have some concepts about the Azure Resource Manager, now let’s dive into the demo.

I will be using VS Code for editing files and deploying them to Azure. There is one extension from Microsoft called Azure Resource Manager (ARM) tools. I am using this extension in VS Code because it gives great IntelliSense and snippets to work with.

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {},
  "functions": [],
  "variables": {},
  "resources": [
{
    "name": "storageaccount1",
    "type": "Microsoft.Storage/storageAccounts",
    "apiVersion": "2019-06-01",
    "tags": {
        "displayName": "storageaccount1"
    },
    "location": "[resourceGroup().location]",
    "kind": "StorageV2",
    "sku": {
        "name": "Standard_LRS",
        "tier": "Standard"
    }
}
  ],
  "outputs": {}
}

As we have hardcoded the name of the resource, which is not the best approach because we need to update our templates several times. So, let’s add parameters in our template. We can add parameters for storage name as below.

"parameters": {
      "storageName": {
           "type":"string",
        "minLength":3,
        "maxLength":24
      }
  }

We can also add validation. Now we have our parameters ready, we can get the value by calling function. To call function in ARM Templates, we can call the function inside [] brackets. The function for the parameters is called parameters which takes the name of the parameter as argument.

"name": "[parameters('storageName')]",

Now, we need to provide the parameter name in the PowerShell script.

We can also add parameters for list of allowed values for storage SKU, which will run validation before it gets deployed.

"storageSKU": {
      "type": "string",
      "allowedValues": [
        "Standard_LRS",
        "Standard_GRS",
        "Standard_RAGRS",
        "Standard_ZRS",
        "Premium_LRS",
        "Premium_ZRS",
        "Standard_GZRS",
        "Standard_RAGZRS"
      ]
    }

The final template will look like this

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "storageName": {
      "type": "string",
      "minLength": 3,
      "maxLength": 24
    },
    "storageSKU": {
      "type": "string",
      "allowedValues": [
        "Standard_LRS",
        "Standard_GRS",
        "Standard_RAGRS",
        "Standard_ZRS",
        "Premium_LRS",
        "Premium_ZRS",
        "Standard_GZRS",
        "Standard_RAGZRS"
      ]
    }
  },
  "functions": [],
  "variables": {},
  "resources": [
    {
      "name": "[parameters('storageName')]",
      "type": "Microsoft.Storage/storageAccounts",
      "apiVersion": "2019-06-01",
      "tags": {
        "displayName": "storageaccount1" // optional
      },
      "location": "[resourceGroup().location]",
      "kind": "StorageV2",
      "sku": {
        "name": "[parameters('storageSKU')]",
        "tier": "Standard"
      }
    }
  ],
  "outputs": {}
}

Now, you can create a PowerShell script to deploy the template like this.

$rg = 'arm-demo-01'
New-AzResourceGroup -Name $rg -Location northeurope -Force

New-AzResourceGroupDeployment `
    -Name 'new-storage' `
    -ResourceGroupName $rg `
    -TemplateFile 'storage.json' `
    -storageName 'armdemostorage01a' `
    -storageSKU 'Standard_LRS'

Now, the template can be deployed using the terminal. Navigate to the folder where template file is stored. First connect to Azure account by typing the following command in the terminal.

Connect-AZAccount

Then, execute the PowerShell file.

Now, you can see that the resource has been deployed successfully.

Additional resources:

Azure Quickstart Templates

Deploy Azure resources through the Azure Resource Manager with community contributed<br>templates to get more done. Deploy, learn, fork and contribute back.

Microsoft Azure

Azure/azure-quickstart-templates

Azure Quickstart Templates. Contribute to Azure/azure-quickstart-templates development by creating an account on GitHub.

GitHubAzure

Azure Key Vault is a tool for securely storing and accessing secrets. A secret is anything that you want to tightly control access to, such as API keys, passwords, or certificates. A vault is a logical group of secrets. Essentially, Azure Key Vault can be thought of as well, a vault! You put your secret things in, and they are kept secure by the vault. Azure Key Vault is of course more complex and offers many features. Feel free to dig more into the details in case you are interested.

Motivation

The aim here is to configure the data protection system in such a way as to store its keys outside the app server, but also to do so in a secure way. The data security keys can be stored in a local folder by default (see default settings), and the keys may or may not be encrypted at rest. Azure Key Vault, in combination with managed identities for Azure resources, enables your Azure web app to access secret configuration values easily and securely without needing to store any secrets in your source control or configuration.

Prerequisite

• Azure portal access
• Visual studio or visual studio code

If you don't have an Azure account, you can create one for free here: https://portal.azure.com/

We need an Azure App Registration in the Azure Active Directory together with Azure Key Vault to access key vault secrets.

Using Azure Key Vault with ASP.NET Core apps

To use Azure Key Vault as one of the configuration providers for your app you'd need to do some work, such as adding specific NuGet packages, getting the Vault URL, creating your clientId and secret, connecting to the vault, and reading the secrets.

Steps of our demo

1. Creating the key vault.
2. Adding a database connection string to our key vault.
3. Configuring the access policy on the Key Vault for our App Service.
4. Creating a system-assigned identity for our App Service.
5. Creating ASP.NET Core 3.1 web application in visual studio and configuring the key vault.

Creating the Key Vault

On the Azure Portal, go to Resource groups >> <your resource group> <add new resource> <key vault> <create>

1. Fill in the Instance details: Name, Region, and Pricing tier.
2. Review the things and click on create. We will talk about Access Policy later in this post.

Adding a database connection string to our Key Vault

Navigate to your Key Vault once deployment finishes. Look at the left menu and click Secrets and then Generate/Import

Enter the connection string to your database and click Create. I have added my connection string and the page looks like this:

Configuring the access policy on the Key Vault for our App Service

We need to grant permission to our web app to read the secrets from the Key Vault. To do this go to Key Vault Page, and from the left menu click on Access Policies.

Once on the Access policies page, click on Add access policy. Select Get for the Secret permissions field. Next, click on the Select principal field. A sidebar will appear on the right side of the screen. There, you need to search for our managed identity, which matches the name of your App Service. Click Select on the window. In the end, it should look like this:

Click on Add then on Save to save changes. Now our app service has Get access to secrets in the Vault.

Creating a system-assigned identity for our App Service.

Our App Service needs to have access to it to be able to consume the secrets from the Key Vault. In Azure, you can configure one resource to access another by creating what’s called a managed identity. Once your resource has a managed identity, you can modify another resource and allow access to it.

Creating ASP.NET Core 3.1 web application in visual studio and configuring the key vault

After creating the project, install Microsoft.Extensions.Configuration.AzureKeyVault NuGet package to the project.

Now, let’s modify the CreateHostBuilder method in the Program.cs file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Azure.KeyVault;
using Microsoft.Azure.Services.AppAuthentication;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Configuration.AzureKeyVault;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;


namespace AzureKeyVaultDemo
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }


        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)


            .ConfigureAppConfiguration((context, config) =>
            {
                var keyVaultEndpoint = GetKeyVaultEndpoint();
                if (!string.IsNullOrEmpty(keyVaultEndpoint))
                {
                    var azureServiceTokenProvider = new AzureServiceTokenProvider();
                    var keyVaultClient = new KeyVaultClient(
                        new KeyVaultClient.AuthenticationCallback(
                            azureServiceTokenProvider.KeyVaultTokenCallback));
                    config.AddAzureKeyVault(keyVaultEndpoint, keyVaultClient, new DefaultKeyVaultSecretManager());
                }
            })


            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
        private static string GetKeyVaultEndpoint() => "https://kvdemo-01.vault.azure.net/"; //Endpoint of the Azure Key Vault.
    }
}

Now we can access the value in our controller like this.

public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        private readonly IConfiguration _configuration;

        public HomeController(ILogger<HomeController> logger, IConfiguration  configuration)
        {
            _logger = logger;
            _configuration = configuration;
        }

        public IActionResult Index()
        {
            TempData["mysecrets"] = _configuration["mysecret01"];
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }

The sample project can be found on my GitHub repository.