Git Product home page Git Product logo

trouble-training's Introduction

Full Stack Workshop (Frontend + Backend + Monitoring)

Workshop stack tools logos

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

Workshop UI example

Stack

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:

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

Workshop architecture

Frontend to Backend distributed tracing example

On this monitoring graphical visualization, you can see entire request sended from Client Frontend (Creating a webhook)

Elastic Frontend to backend distributed tracing


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 Net 5.0 SDK installed. You can cheque the 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 the /Docker folder you will 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 the command docker-compose up in your terminal. The setup has been tested on WSL Docer Desktop.


Setup Database

Make sure that PostgreSQL is running. The following empty databases need to be manualy created:

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 you 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 its 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:

  1. dotnet restore
  2. dotnet watch run

Go to dirrectory: IdentityServer/API and run:

  1. dotnet restore
  2. dotnet watch run

Go to dirrectory: BFF/API and run:

  1. dotnet restore
  2. 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.

In case you have problem to start elastic due to memory issues adjust max_map_count

#For Linux
sysctl -w vm.max_map_count=262144 
echo "vm.max_map_count=262144" >> /etc/sysctl.conf
#For Windows WSL
wsl -d docker-desktop
sysctl -w vm.max_map_count=262144

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

trouble-training's People

Contributors

damikun avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.