Commenting System Using AWS SAM + ASP.NET Core

Serverless,Software Engineering,Uncategorized |

October 7, 2020

I wanted to create a commenting system for my blog. My friend Paul encouraged me to build my own instead of using an off-the-shelve one. The reason why I agreed is because it sounded like a fun challenge as I had never created one before. I thought it will be a good exercise to know how the commenting systems are actually built and work inside out. Below I share the steps involved in getting this system up and running!

What’s Covered

Serverless Template
Create the ASP.NET Core Web API project
Integrating Swagger UI
Connecting to AWS DynamoDB
Getting all Comments from AWS DynamoDB By Post
Inserting Comment into AWS DynamoDB
Deleting Comment From DynamoDB

Prerequisites:

AWS account
Knowledge of C#, Javascript, HTML and CSS
.NET Core SDK and Runtime installed (if you haven’t got them, install them from the given links)
.NET CLI

Architecture

Serverless Template

You can get the template from here. It is created from the command dotnet new -i Amazon.Lambda.Templates and what it creates is a serverless function, API Gateway and DynamoDB table.

Lambda (serverless) function is triggered by API Gateway which in turn performs CRUD operations in DynamoDB.

Create the ASP.NET Core Web API Project

Open up terminal
Check the dotnet verison installed (I had 3.1) by runninng

Install Lambda and serverless template

Create a ASP.NET Core Web API

cd into the src and then project’s folder

Restore all the dependencies

Run the project to make sure it’s working without errors

Use VS Code or your favourite text editor and open the project folder
Notice four new files in addition to the normal files new .NET project area created.

aws-lambda-tools-defaults.json – This file is read by lambda tooling by default. Your function handler is specified in this file. So, if you update the function’s name, you need to update it in this file too.

LambdaEntryPoint – Pretty much self explanatory (file from which lambda executes your application code) when you deploy to AWS

LocalEntryProint– Local testing entry point when you test the application locally

serverless.template – SAM template file in JSON which defines infrastructure as code.

Integrating Swagger UI

We will be using Swagger to document our Web API and test it from the browser. I like Swagger because it generates a UI with which you can interact and test your API in the browser.

Add the NuGet(like npm but for .NET development) package to use Swagger in your application

To use it, you need to register it by adding the below code in the ConfigureServices method in Startup.cs file

Add import of Microsoft.OpenApi.Models on the top of the page which allows you to describes your API’s endpoints
using Microsoft.OpenApi.Models;
Then, enable it by inserting the below code in the Configure method of Startup.cs; file. Add the below code above the app.UseHttpsRedirection(); Otherwise, Swagger UI won’t load.

Run the application and then click url shown.

https://localhost:5001/

Append swagger to the URL and press enter.
If everything went well, you should see Swagger UI now.

Connection to AWS DynamoDB

Navigate to you project folder. We will add two NuGet packages. These are essential to make a connection to DynamoDB

AWSSDK.DynamoDBv2 – Adds the ability to interact with DynamoDB using AWS .NET SDK

AWSSDK.Extensions.NETCore.Setup – has methods for configuration and registrations of AWS Services with dependency injection

Now we need to register Dynamo Service. In the Startup.cs file, add the below code in ConfigureServices

Code Explanation

AllowAnyOrigin – We add CORS policy as the origin we will be accessing the DynamoDb will be a different one. Hence, specifying

services.AddAWSService<IAmazonDynamoDB>(); – registering the Interface IAmazonDynamoDB

Delete the below line from the method:

services.AddAWSService<Amazon.S3.IAmazonS3>();

Now, that we are connected, let’s read from database. As we don’t have any data to read from the database, let’s add a record in the database manually to test our GET functionality.

Insert Record in DynamoDB

Open AWS CLI and run the below command

The above should create a record in your DynamoDB table. Open AWS console and navigate to DynamoDB table to ensure it’s created.

Getting all Comments from AWS DynamoDB (By Post)

In this section, we will get all the comments by Post. So, each post displays only comments that related to it.

After registering IAmazonDynamoDB in our application we are now in the position to insert it using Microsoft Dependency injection in our Controller.

Delete the two controllers, S3ProxyController and ValuesController in the controllers folde
Right click on Controllers folder > New C# Class
Name the class CommentsController
Make sure the class is derived from ControllerBase
Add the below line above the class keywords

If you get compilation error (red squiggly lines) on the above three lines, this means that you need to add (click the squiggly line, a light bulb will appear, click bulb and choose the imports below respectively) or simply add below “using” statements at the top of the page:

Add below code available here inside the class

Inserting Comment into AWS DynamoDB

We will be creating a form which will ask for username and a comment. Then upon pressing submit button, it will write the data to DynamoDB.

In your frontend, create a form (copy paste the below code from here)

Add the Javascript / Ajax code to communicate to ASP.NET Core Web API from here
That is all we needed to do in the frontend.
Now to back to your ASP.NET Core Web API project
Create a folder called Model and in it, create new C# class called Comments.cs
Add the below code from here in the file

Navigate to the CommentsController and add the below code from here.

Code Explanation

[HttpPost] – Annotation that the this method handles POST requests only

[FromBody] – Annotate thats take all the content from the body

This function is taking the user’s input and inserting it into the relevant column in the database asynchronously

Deleting Comment From DynamoDB

This can be done in two ways

1. Manually by logging into AWS and deleting the record from the DynamoDB Table
2. Click a button from the frontend.

As a blog owner, I believe users shouldn’t have the ability to delete comments. Hence, I didn’t implement this, However, if you want to implement it, please copy paste the below code from here in the CommentsController.cs and do an AJAX request from the frontend on the click of a button provided that the comment that needs to be deleted is selected.

You have successfully implemented your own commenting system for your website / blog etc.

I will be implementing the feature of notifying the admin of a new message via email and will blog that too when done.

If any of the above didn’t work for you, please leave a comment below and I’ll contact you through email

Announcing the Dev(){CoP} Mentorship Program