.NET 7.0 + Postgres CRUD API with Angular Front End App
Built with .NET 7, Postgres and Angular 14
In this tutorial we'll go through how to build a full stack CRUD app with a .NET 7.0 API, PostgreSQL database and Angular front end.
Tutorial Contents
- Tools required
- .NET 7.0 (ASP.NET Core) API Overview
- Angular App Overview
- Download and Start the .NET API
- Download and Start the Angular App
Tools required for this tutorial
To follow the steps in this tutorial you'll need the following:
- Node.js and npm - includes the Node runtime and command line tools
- .NET SDK - includes the .NET runtime and command line tools
- Visual Studio Code - code editor that runs on Windows, Mac and Linux
- C# extension for Visual Studio Code - adds support to VS Code for developing .NET applications
- PostgreSQL - you'll need access to a running PostgreSQL server instance for the API to connect to, it can be remote (e.g. Azure, AWS etc) or on your local machine. The PostgreSQL downloads page is at https://www.postgresql.org/download/, ensure it is started so the API can connect to it. You can also run it in a Docker container, the official docker images for Postgres are available at https://hub.docker.com/_/postgres.
.NET 7.0 (ASP.NET Core) CRUD API Overview
The example ASP.NET Core API includes routes to retrieve, update, create and delete records in the database, the records in the example app are for users but this is only for demonstration purposes, the same CRUD pattern and code structure could be used to manage any type of data e.g. products, services, articles etc.
PostgreSQL Database
PostgreSQL (also known as Postgres) is the database used by the ASP.NET Core API, a free and open-source full featured relational database, it's a good option for any size application in production or development. The ADO.NET provider for Postgres (Npgsql) is used to connect to the database.
Dapper ORM (Object Relational Mapper)
The API uses Dapper to access and manage data in the database. Dapper is a micro ORM that supports executing raw SQL queries and mapping results to C# objects and collections, it's implemented as a collection of extension methods on top of the ADO.NET IDbConnection interface.
Dapper doesn't support all of the functionality of full ORMs such as Entity Framework Core (e.g. SQL generation, caching, database migrations etc) but instead is focused on performance and is known for being lightweight and fast.
For more info see .NET 7.0 + Dapper + PostgreSQL - CRUD API Tutorial in ASP.NET Core.
Angular 14 CRUD App Overview
The Angular app includes a basic home page and users section with CRUD functionality, the default page in the users section displays a list of all users and includes buttons to add, edit and delete users. The add and edit buttons navigate to a page containing an Angular Reactive Form for creating or updating a user record, and the delete button executes a function within the user list component to delete a user record.
For more info see Angular 14 - CRUD Example with Reactive Forms.
Download and Start the .NET 7.0 CRUD API
- Download or clone the tutorial project code from https://github.com/cornflourblue/dotnet-7-dapper-postgres-crud-api
- Update the database credentials in
/appsettings.jsonto connect to your PostgreSQL instance, and ensure Postgres is running. - Start the API by running
dotnet runfrom the command line in the project root folder (where the WebApi.csproj file is located), you should see the messageNow listening on: http://localhost:4000.
PostgreSQL database creation
A new Postgres database (dotnet-7-dapper-crud-api) is created with all required tables by the data context class the first time the API is started.
Download and Start the Angular 14 CRUD App
- Download or clone the Angular project source code from https://github.com/cornflourblue/angular-14-crud-example
- Install all required npm packages by running
npm installornpm ifrom the command line in the project root folder (where the package.json is located). - Delete or comment out the line below the comment
// provider used to create fake backendlocated in the/src/app/app.module.tsfile. This disables the default "fake backend API" so the Angular app will send requests to the real .NET API. - Start the app by running
npm startfrom the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URLhttp://localhost:4200.
That's it!
You have a full stack Angular + .NET + Postgres CRUD application running.
Need Some .NET Help?
Search fiverr for freelance .NET developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!