ameyvaidya/trouble-training

Full Stack Workshop (Frontend + Backend + Monitoring)

The application contains a full frontend and backend implementation with infrastructure and app monitoring. There are several patterns used such as. Mediator, BFF, Domain etc.. and everything is secured with Identity server fully supporting OpenId Connect and OAuth2.0

Demo Application contains small UI, where you can manage your WebHooks

Stack

Frontend - React, Relay, Typecsript, ReactRouter, TailwindCSS
Backend - Netcore, Hotchocolate, IdentityServer, ElasticSearch, Opentelemerty, Serilog, MediatR, Hangfire, Automapper, Fluentvalidation, Docker, Entity Framework

Project structure

APIServer - Is protected GraphQL API
BFF - Is Backend for Frontend pattern
- Frontend React - This also contains Frontend React app served using static files
IdentityServer - Idetity server service for providing OpenId Connect and OAuth2.0

Integration steps:

Please follow these steps if you want to understand it because of the connection between the parts:

Configure logging - I`ll show you how to set up a proper distributed logging solution for .Net
Configure telemetry - I`ll show you how to properly set up Opentelemetry and Elastic APM.
Configure idenity - You`ll learn how to use the BFF pattern to secure your application.
Configure monitoring - You will learn how to monitor the entire app stack (this depends on parts 1 and 2).

Monitoring example

Quick setup

Quick setup

To run this stack locally, you need to ensure the following:

Make sure you have NET SDK installed.
You need to install Docker. Most of the stack runs in a Docker container.
You need to run all prepared docker-compose files to populate all images for the monitoring platform.
You need to set up PostgreSQL databases (Create any DB server).
You need to migrate all DBs (each project has its own migration folder).
Run the NetCore project from the terminal or back it up to Docker.

Instal Net SDK

Make sure you have installed Net 5.0 SDK. You can verify installed SDK version by running: dotnet --list-sdks in your terminal.

#Example output on Windows
PS C:\Users\dakupc> dotnet --list-sdks
5.0.100 [C:\Program Files\dotnet\sdk]
5.0.201 [C:\Program Files\dotnet\sdk]

Download docker

Based on your system download and install docker

Docker images

In folder /Docker you can find prepared images for:

Elasticsearch - Elastic, Kibana, OtelCollector, APMserver, Logstash
Beats - FileBeat, HeartBeat, MetricBeat, PacketBeat
PostgresSQL - Database

In each folder you will find docker-compose.yml and you need to run docker-compose up command from your terminal. The setup was tested on WSL Docer Desktop.

##### Setup Database

Make sure PostgreSQL is running. The following main and related databases need to be configured:

APIServer Database

Host: localhost
DatabaseName: ApiDB
Port: 6543
Username: postgres
PasswordL postgres

IdentityServer Database

Host: localhost
DatabaseName: IdentityDB
Port: 6543
Username: postgres
PasswordL postgres

Scheduler Database

Host: localhost
DatabaseName: Scheduler
Port: 6543
Username: postgres
PasswordL postgres

Preconfigured connection strings:

"ConnectionStrings": {
  "HangfireConnection": "Host=localhost;Port=6543;Database=Scheduler;Username=postgres;Password=postgres",
  "ApiDbContext": "Host=localhost;Port=6543;Database=ApiDB;Username=postgres;Password=postgres",
  "AppIdnetityDbContext": "Host=localhost;Port=6543;Database=IdentityDB;Username=postgres;Password=postgres",
  "AppIdnetityDbContext": "Host=localhost;Port=6543;Database=IdentityDB;Username=postgres;Password=postgres",
  "Elasticsearch": "http://admin:admin@localhost:9200",
  "Opentelemetry": "http://localhost:55680"
},

Run the database its required by next step!

Migrations

Make sure you have installed Entity Framework Core tools to perform any necessary migrations.

dotnet tool install --global dotnet-ef

If you run dotnet ef in terminal yoy shoud get:

                     _/\__       
               ---==/    \\      
         ___  ___   |.    \|\    
        | __|| __|  |  )   \\\   
        | _| | _|   \_/ |  //|\\ 
        |___||_|       /   \\\/\\

Entity Framework Core .NET Command-line Tools 5.0.9

Go to dirrectory: APIServer/Persistence and run following commands:

 dotnet ef database update

Go to dirrectory: IdentityServer/Persistence and run following commands:

 dotnet ef database update --context AppConfigurationDbContext
 dotnet ef database update --context AppPersistedGrantDbContext
 dotnet ef database update --context AppIdnetityDbContext

Run Frontned and Backend

Since all migrations, databases and infrastructures are prepared, you can start each project from the respective directory. You can also put each application in a docker container and launch it from there. This is entirely up to you.

⠀ NOTE: Make sure you trust developer certificates: dotnet dev-certs https --trust. This is only for development needs make sure you properly setup certificate in production! ⠀

Go to dirrectory: APIServer/API and run:

dotnet restore
dotnet watch run

Go to dirrectory: IdentityServer/API and run:

dotnet restore
dotnet watch run

Go to dirrectory: BFF/API and run:

dotnet restore
dotnet watch run

⠀ NOTE: Restoring and running will take some time, especially for BFF, since the frontend is fully recompiled and served by the BFF backend using static files. ⠀

APIServer runs on: https://localhost:5022

IdentityServer runs on: https://localhost:5001

BFF runs on: https://localhost:5015

Run Elastic and Beats

Start the elasticsearch container group and then beats. Please stick to this order to avoid exception logging due to a missing connection. You can also put everything into a Docker image and wait until the previous section is complete.

To run all containers, please make sure you have enough RAM and a good computer - this is not for kids :P Have fun :)

ameyvaidya / trouble-training