Git Product home page Git Product logo

damikun / trouble-training Goto Github PK

View Code? Open in Web Editor NEW
448.0 11.0 108.0 38.83 MB

FullStack DDD/CQRS with GraphQL workshop including distributed tracing and monitoring. This shows the configuration from React frontend to .Net backend.

License: MIT License

C# 63.95% JavaScript 1.56% HTML 3.08% CSS 2.17% TypeScript 28.56% SCSS 0.06% Batchfile 0.02% PowerShell 0.33% Shell 0.24% Dockerfile 0.05%
full-stack graphql duende-identityserver bff workshop graphql-api relay opentelemetry architecture-guidelines webhooks-api

trouble-training's Introduction

Full Stack Workshop (Frontend + Backend + Monitoring)

Workshop stack tools logos

The application contains a full frontend and backend implementation (Net6.0๐Ÿš€) 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
  • Device - Machine-to-machine comunucation using clinetcredentials for external apps/devices
  • Tests - Unit, Integration and API tests

Integration steps:

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

  1. WebHook backend - I`ll show you how to create basic WebHook integration under .NetCore Backend for this demo.
  2. Configure logging - I`ll show you how to set up a proper distributed logging solution for .Net
  3. Configure telemetry - I`ll show you how to properly set up Opentelemetry and Elastic APM.
  4. Configure identity - You`ll learn how to use the BFF pattern to secure your application.
  5. Configure monitoring - You will learn how to monitor the entire app stack (this depends on parts 1 and 2).
  6. Handle GraphQL Mutation errors - You will learn how to integrate 6a pattern.
  7. Build automation and workflows - You will learn how to setup build plan and generate workflows.
  8. Automate GraphQL API Testing - You will automate API testing using Postman/Newman from Github-Actions

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

Net6.0 is ๐Ÿš€ (Net5.0 vs Net6.0 measurement) Net performens


Download docker

Based on your system download and install docker. This is required!


Restore all projects

There are two options:

  • Use prepared init script. Run .\build.cmd E2E_RunAs_Local from project root. (This will take time since restore)
  • Manual instalation (Use in case script fails) follow the manual instal readme

NOTE Restore scripts use npm. In case you wanna use yarn you need to use manual instalation process..


Run Frontend and Backend

From root directory run tye run

(Make sure Docker is running before)


Compose elastic docker images

Set this configurtaion settings (for localhost) from your cmd:

#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

Continue with images:

In the /Docker folder you will find prepared images for:

  • Elasticsearch - Elastic, Kibana, OtelCollector, APMserver, Logstash.
    • Shell cd to Docker/ElasticSearch and run docker-compose up
  • Beats - (Optional) FileBeat, HeartBeat, MetricBeat, PacketBeat (โš ๏ธ Skip this in case you dont have enaught RAM !)
    • Shell cd to Docker/Beats and run docker-compose up

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 Docker Desktop.

Note: Folder /Docker also contains other images for aditional lessons. (For this demo ignor it)


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.

Note: Running beats for demo is optional. This require additional RAM and CPU allocation..

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

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

trouble-training's Issues

OpenTelemerty instead of OpenTelemetry

Describe the bug
The read.me says OpenTelemerty instead of OpenTelemetry

To Reproduce
Open the read.me and look for 'OpenTelemerty instead of OpenTelemetry'

Expected behavior
should sayOpenTelemetry

can not locate /Src/Shared/API/Shared.Api.csproj

Describe the bug
can not locate /Src/Shared/API/Shared.Api.csproj
root@xxxxxxx:~/projects/trouble-training/Src/Device/API# dotnet restore
Determining projects to restore...
Skipping project "/root/projects/trouble-training/Src/Shared/Api/Shared.Api.csproj" because it was not found.
Skipping project "/root/projects/trouble-training/Src/Shared/Api/Shared.Api.csproj" because it was not found.
Restored /root/projects/trouble-training/Src/Device/Domain/Device.Domain.csproj (in 397 ms).
Restored /root/projects/trouble-training/Src/Device/Aplication/Device.Aplication.csproj (in 892 ms).
To Reproduce
Steps to reproduce the behavior:

Expected behavior
rename /Src/Shared/API to /Src/Shared/Api

Screenshots
If applicable, add screenshots to help explain your problem.

Enviroment:

  • OS: [windows 10 , wsl2]
  • Browser [chome ]
  • Elastic Stack version [e.g. 15.0]
  • Docker version [ 20.10.16]
  • Resources available on your PC [4G, 4cores]

Additional context
Add any other context about the problem here.

Docker images not same as shown in install instructions

Instead of the docker images you mention in the install instructions Docker Images are not the same that are in the ./Docker folder.

Currently I see the following docker images in this folder:

  • ElasticSearch (with Beats in sub folder)
  • Jaeger
  • OpenSearch

Interesting demo! I'm curious about your setup. Could be helpful for a new large-scale project I'm starting.

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.