DEV Community: Chandan Bangalore

Connecting Postgres to ASP.NET Core Web Api with EF Core and .NET Aspire

Chandan Bangalore — Mon, 03 Mar 2025 06:21:39 +0000

Introduction:

The introduction of .NET Aspire is a significant improvement that enables developers to define and deploy infrastructure and connect them across resources. The following post will demonstrate the use case for connecting PostgreSQL to an ASP.NET Core Web API.

Prerequisites:

ASP.NET Core SDK 9 (.NET 9) or above.
Visual Studio 2022 or any other text editor.
Docker Engine (MacOS, Linux) or Docker Desktop (MacOS, Linux, Windows) or podman(MacOS, Linux, Windows) or podman desktop (macos, Linux, Windows)

Background:

.NET Aspire: Highly opinionated first party set of implementations.
Postgres: An open source and very popular relational database management server.
ASP.NET Core: A popular open source framework for building web applications and REST API's.
EF Core: An ORM (Object Relational Mapper); At a fundamental level, it enables interactions with the database server with C#.

Let's get started;

Step 1: Create an empty aspire application

Instruction for Visual Studio:

Instruction for CLI:

dotnet new install Aspire.ProjectTemplates
dotnet new list aspire

Use the command below to create the project.

dotnet new aspire -o <ProjectName>

You will see two different projects - The AppHost and Service Defaults.

AppHost.csproj: Loosely think of this as the project that manages all other projects in the entire application. It utilizes the DistributedApplication Class from the Aspire.Hosting package to create resources and connect them to other projects.
ServiceDefaults.csproj: These are highly opinionated extension methods written by Microsoft that follow best practices for configuring various everyday use cases in an application (e.g., Adding logging, health checks, etc.).

Step 2: Add the ASP.Net Core Web Api to the created solution

Instruction for Visual Studio:
- Select the ASP.NET Core Web API template
- Additionally, ensure that the Enlist in .NET Aspire Orchestration checkbox is selected. The container support checkbox may be left unselected.

Instruction for CLI

dotnet new webapi -o <ProjectName>
dotnet sln add <ProjectName>

The final project structure will look something like this:

Feel free to update NuGet packages for all projects in the solution.

Step 3: Connecting the WEB Api to the .NET Aspire App Host

The AppHost project from aspire provides the DistributedApplication builder class, which allows us to orchestrate the creation of resources and startup of any project.

Step 3(a): Inside the Aspire AppHost project, add a reference to the ASP.NET Web API project (here called ExampleApp.Web).
- Instructions for Visual Studio
  - Right click on the AppHost project and navigate to the built-in reference manager
  - Mark the checkbox next to the Web Api project and click on 'OK'
- Instruction for CLI:
  - Change working directory to the AppHost project folder (cd <PATH_TO_APP_HOST_PROJECT>)
```
cd ExampleApp.AppHost
```
  - Now add a reference to the Web Api project using dotnet add reference <PATH_TO_WEB_PROJECT>
  In my case that would be:
```
dotnet add reference ..\<ProjectName>.Web
```
Step 3(b): Register the Web API project and trigger its startup inside AppHost

Original ExampleApp\ExampleApp.AppHost\Program.cs

var builder = DistributedApplication.CreateBuilder(args);

builder.Build().Run();

Updated ExampleApp\ExampleApp.AppHost\Program.cs


var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Example_Web>("web");

builder.Build().Run();

Step 4: Configure Web Api project to use the service defaults

Step 4(a): Inside the API project add a reference to the ServiceDefaults project

This step is very similar to step 3(a)

Instructions for CLI:
- From inside the solution folder, change working directory to the web API project
  
  cd ExampleProject.Web
- Add the reference
  
  dotnet add reference ..\ExampleProject.ServiceDefaults
Step 4(b): Invoke the extensions from the web API project.

Modify ExampleApp.Web\Program.cs to include the following line.

builder.AddServiceDefaults()

Finally, when running the AppHost project, we should see the following:

Step 5: Add the postgres server and database and integrate them.
- Step 5(a): First add the PostgreSQL hosting NuGet package to the AppHost project.
  - Using VS Code NuGet Package Manager
  - Using CLI command: dotnet add package Aspire.Hosting.PostgreSQL
- Step 5(b): Create the PostgreSQL server and the example database
```
 var postgresServer = builder.AddPostgres("postgreSQLServer");

 var exampleDatabase = postgresServer.AddDatabase("exampleDB");
```
Optionally, you may include pgadmin to manage the database, as shown below.
```
 var postgresServer = builder.AddPostgres("postgreSQLServer")
                             .WithPgAdmin();

 var exampleDatabase = postgresServer.AddDatabase("exampleDB");
```
- Step 5(c): Add a reference for the database to the web project.
```
  builder.AddProject<Projects.ExampleApp_Web>("web")
.WithReference(exampleDatabase);
```

The final program.cs should be as below.

ExampleApp\ExampleApp.AppHost\Program.cs

var builder = DistributedApplication.CreateBuilder(args);


var postgresServer = builder.AddPostgres("postgreSQLServer").WithPgAdmin();

var exampleDatabase = postgresServer.AddDatabase("exampleDB");

builder.AddProject<Projects.ExampleApp_Web>("web")
    .WithReference(exampleDatabase);

builder.Build().Run();

### Step 6: Configure the web project to use the PostgreSQL database.

The next step may depend on the level of customization you require. For the scope of this blog, let's take the most straightforward approach.

Without EFCore:
- Add the Aspire.Npgsql nuget package to the web project
  
  dotnet add package Aspire.Npgsql
- Modify the ExampleApp\ExampleApp.Web\Program.cs to include
```
builder.AddNpgsqlDataSource("<POSTGRES_DATABASE_NAME>");
```
  For my example this would be builder.AddNpgsqlDataSource('exampleDB');
- With EFCore:
  - Add the Aspire.Npgsql.EntityFrameworkCore.PostgreSQL nuget package to the web project dotnet add package Aspire.Npgsql.EntityFrameworkCore.PostgreSQL
```
  builder.AddNpgsqlDbContext<YourDbContext>(connectionName: "<DATABASE_NAME>");
```
  - For my example this would be builder.AddNpgsqlDbContext<ENTER_DB_CONTEXT_CLASS>(connectionName: "exampleDB");
  - Note: I have not shown the creation of DB Context here to keep the blog succinct. Furthermore, using EFCore world may also require you to add Microsoft.EntityFrameworkCore and Npgsql.EntityFrameworkCore.PostgreSQL NuGet packages depending on your needs.

Result

We have created the architectural design shown below using the steps outlined above.

While Aspire's inner workings are outside the scope of our discussion, understanding them is still essential.

Aspire is a mechanism that among other capabilities allows developers to spin up OCI-compliant containers using C#. We can configure Aspire to use either Docker or Podman, the top two leading containerization applications.

Think of it as the alternatives to writing docker-compose files and nothing more.

Furthermore, let's understand the connection between a deployed resource (such as a PostgreSQL database) and a project.

builder.AddProject<Projects.ExampleApp_Web>("web")
    .WithReference(exampleDatabase);

Idiomatically speaking, the above line adds a connecting string configuration to the ExampleApp.Web project, which can be accessed using the project's HostApplicationBuilder.

For example

var builder = WebApplication.CreateBuilder(args);
var databaseConnectionString = builder.Configuration.GetConnectionString("ExampleDB");

However, these details can/may be abstracted away when we use the Aspire hosting packages.

Conclusion

Aspire is an incredible framework that significantly improves developer productivity, especially for local development. It also reduces the barrier for new software engineers/programmers/developers to pick up the fundamental concepts and best practices of DevOps.

Please feel free to comment your thoughts on it. I welcome all feedback and will do my best to update the content to reflect up-to-date and accurate information.

Link to companion github repo: https://github.com/chandanbsd/aspire-postgres-efcore-aspnet-template/tree/main

How to design a beautiful website? CSS Super Simplified Explanation

Chandan Bangalore — Mon, 20 Jun 2022 00:01:18 +0000

What is CSS?

CSS stands for Cascade Styling Sheets
It is a set of rules that determine the look and feel of web pages.

How do we write CSS?

First we select the HTML element( or tag)
Then we provide key-value pairs that depict the element’s design.

selector 
{
    style-name: value;
}

Example:

Where do we write CSS?

We can write CSS in 3 possible locations:

Inline CSS
Internal CSS
External CSS

Inline CSS

CSS rules are specified as values to the style attribute of the tags
Disadvantages:
- Redundant Code: Say we have ten paragraphs whose text color we need to set to red, then we will have to specify the style ten times which is not a good approach
- Hard to maintain: Suppose we need to update the style of all paragraph tags, then we would have to search and manually change every occurrence of the p tag.
- Impacts page performance: Inline CSS often increases the HTML document's total size and the webpage's loading time.
- Decreases Accessibility: The purpose of HTML is to only provide structure to content. Mixing style rules and HTML will make it harder for screen readers to interpret the webpage.

Internal CSS

Here too we write the CSS within the HTML document. However, all CSS instructions are grouped together and placed under a special HTML tag i.e, <style> </style>.
Advantages:
- Allows CSS styles to be reused between elements
- Improve the readability and maintainability of code.
Disadvantages:
- It still increases the size of the HTML document
- Code may be reused within the same webpage but cannot be shared between multiple web pages under the same website.

External CSS

Here we write all the CSS elements in its own .css file and then we use the <link> </link> HTML tag to connect the webpage to the CSS file, i.e. <link rel = "stylesheet" href = "{ Enter location of CSS file}" />
Advantages:
- Complete Code Reusability
  - Similar elements in the same webpage can share the styles
  - We can have a shared CSS file between webpages (Ex: The header, navbar, and footer on any webpage under the same website may share the same styling)
- Improves Code Readability and Maintainability
- Web pages load faster since HTML files are not large due to CSS stylings.


<html>
<head>
<link rel = "stylesheet" href = "index.css">
</head>
    <body>
        <p>This line is white but its background is black</p>
        <p>This line is also another white line but its background is black</p>
</body>
<html>

body{
    background-color: black;
}

p {
    color: white;   
}

CSS Selectors

If we write internal or external CSS instead of inline CSS, we need to understand a CSS concept called selectors. There are three main types of selectors

Element Selectors
Class Selectors
Id selectors

Element Selectors

Here we use the name of the tag to define the styles.
The styling will be applied to all occurrences of that tag on the webpage

Class Selectors

Class selectors allow us to identify one or more elements and style them the same.
We do this by giving the selected tags a class attribute and a common value.
We then write the value prefixed with the. while specifying the CSS rule

ID selectors

ID selectors allow us to identify a single element uniquely
We can do this by using the id attribute
We then write the value prefixed with the # while specifying the CSS rule

How does CSS handle conflicts?

We saw multiple ways (element, class, and id) to select elements and give them style. We also visited the locations (inline, internal, and external) where the CSS rules may be specified.
If we use some or a combination of these, then there is a possibility that different styles are specified for the same element.
To handle such ambiguity, the browser uses a concept known as CSS Specificity. In the simplest terms, the style with the higher specificity takes precedence (or wins).
Precedence based on Location of CSS Rule:
- Inline CSS has the highest precedence
- Internal CSS comes next
- External CSS is the least dominant.
Precedence based on Type of CSS Selector:
- ID selector has the highest precedence
- Class selector comes next
- Element selector is the most minor
What if the same selector is used at the same level? What happens then?
- In this case, the last rule takes precedence over the earlier rule.

How to create a webpage? Super Simplified Explanation of HTML

Chandan Bangalore — Sun, 29 May 2022 00:29:44 +0000

HTML stands for HyperText Markup Language. In simple terms, HTML is the language that gives structure to content on a webpage. That’s it!

Where to write HTML?

HTML instructions need to be saved in a file with the extension .html or .htm. This is similar to how we save text files as .txt and Microsoft office documents as .docx
The file extensions directly indicate to the web browser that it is an HTML file and needs to be processed, and its output is displayed to the user at the web address URL.

That’s it!

Structure of an HTML document?

Any HTML document will have the following basic structure

<html>

    <head> 
                {Special Section that describes the webpage} 
    </head>

    <body> 
                {Put Content to be displayed on webpage here} 
    <body>

</html>

HTML instructions are called “tags.” At a fundamental level, there are two types of tags:
1. Tags that require explicit opening and closing (ex: <html> and </html>)
2. Self-closing tags, i.e., they need to be written only once (ex: <hr/>)
Furthermore, a special property of HTML is that it is case insensitive i.e. tags can be written in uppercase, lowercase or a mix of both, <HTML>, <html> , <hTmL> all have the same meaning. However, the convention is to write all HTML tags in lowercase.

Let’s look at an example webpage:

<html>
    <head>
        <title>Beautiful Website</title>
    </head>

    <body>

        <h1>Heading Line</h1>

    <hr/>

        <p>This is a line in the paragraph.
      This is another line in our paragraph.
      This is also a line in our paragraph
        </p>

    </body>

</html>

Result:

Explanation:

Let’s look at each of these instructions and what they mean.

As always the entire document is enclosed between the <html> and </html> tags.
Next is the “head” section enclosed between the <head> and </html> is special information that describes our webpage. There are a lot of tags that can be enclosed within the head section.
- Here I have used the <title> </title> tags. The content enclosed within these tags is displayed in the web browser's title bar below.
Next is the “body” section enclosed with <body> </body>.
- <h1> </h1> tags are called Heading Level 1, and these ensure that the content is displayed prominently on the webpage.
- <hr/> is a self-closing tag called the “horizontal rule,” which displays a horizontal line in HTML.
- <p> and </p> tags are called Paragraph tags which are used to structure paragraphs of content in the webpage

So, All it takes to make a website is HTML?

Technically yes. HTML is sufficient to create a skeletal website. But to make a beautiful webpage, we need CSS. Likewise, we also need JavaScript to create a web application (a fancy name for a dynamic website and supports user interaction).

What are all the HTML tags?

HTML has evolved over the years to include a massive list of tags. The best way to find and understand the different HTML tags is using Mozilla’s MDN documentation https://developer.mozilla.org/en-US/docs/Web/HTML.

Further Reading:

This article is only meant to be the most basic guide to HTML. There is a lot more to HTML than what is described above. In fact the latest iteration of HTML i.e., HTML5 has the following skeletal structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{Name of Webpage}</title>
</head>
<body>
    {Content of HTML document}
</body>
</html>

Such additions to HTML are due to the fact that the web itself is evolving over time and modern requirements necessitate such changes. However, each of these is very well documented in MDN and easy to understand.

Try it on your own: https://codepen.io/chandanbsd/pen/NWyypjv

How do websites work? Super Simplified Explanation

Chandan Bangalore — Fri, 27 May 2022 23:25:48 +0000

Internet and Web Addresses:

To access a website on the world wide web, we use IP addresses
Each Website has an associated IP address (This is similar to our home address)
When we enter the IP addresses (we actually enter web address like www.google.com which the browser converts into IP address) on a web browser, the web browser makes a query to the webserver (A computer that handles user requests and provides responses) and then downloads three files: an HTML file, a CSS file, and a javascript file.
The web browser then takes these three files to show us the webpage

What is the HTML file?

The HTML file is similar to the “stone bricks.” we use to build our house.
i.e., Its only purpose is to define the structure of the webpage

For Example:

<HTML>
    <HEAD>
        <TITLE> My Personal Website </TITLE>
    <HEAD>
    <BODY>
            Hello World, My name is Chandan.
    <BODY>
</HTML>

Output:

Explanation:

In the above HTML snippet, we can see that the HTML tags provide a structure that identifies the webpage. In this case,
<TITLE> My Personal Website </TITLE>
This line ensures that the title of our website is called “My Personal Website"
<BODY> Hello World, My name is Chandan </BODY>
This line ensures that the content or body of our website displays the line “Hello World, My name is Chandan”

What is the CSS file?

The CSS tells the web browser how to present our HTML elements.
i.e., it is similar to a hairstylist who gives shape, length, and color to our hair
For Example:
```
body{
    color: lightgreen;
    background-color: grey;
    text-align: center
}
```
OUTPUT:

The above example shows that HTML tells the web browser “WHAT” to display, and CSS tells the web browser “HOW” to show.

What is a JavaScript file?

JS files provide the functionality or “actions” of a webpage.
Without JavaScript, we can only display some content beautifully using HTML and CSS.
But to provide some functionality, we need to use JavaScript.