pjx-root

An one stop shop to launch the entire pjx dockerized application.

Overview

To run pjx-root you will need the following projects:

• pjx-web-react - this is the client side web interface, developed using React.js

• pjx-graphql-apollo - Api gateway using Apollo Server, the web interface pjx-web-react consumes Api through this GraphQL middleware

• pjx-sso-identityserver - open source IdentityServer4 with .NET Core 3.1, it is an identity server to handle authentication of the web app with OAuth2, the pjx-web-react web interface will be connecting to this server using ocid-client client library. Visit IdentityServer4 for documentations.

• pjx-api-node - Api backend developed with TypeScript to fetch data and manage business logic.

• pjx-api-dotnet - Api backend developed with DotNet Core 3.1 to fetch data and manage business logic.

Architecture overview looks like this:

Kubernetes Cluster looks like this:

Plant UML (Auto converted by Cluade.Ai)

``` @startuml pjx-overview

package "web Pjx" { component "pjx-web-react:\nGeneral data" as WebReactGeneral component "pjx-web-react:\nClientPage" as WebReactClient component "pjx-web-react:\nLogin,Register,Activation Pages" as WebReactLogin }

package "Apollo_Server" as ApolloServer { component "GraphQL API" as GraphQLAPI }

package "API server" as APIServerNode { component "pjx-api-node:\nRestify API" as RestifyAPI database "Database1" as DB1 }

package "API server" as APIServerDotnet { component "pjx-api-dotnet:\ncontroller" as DotnetController database "Database2" as DB2 }

package "Identity Server" as IdentityServer { component "pjx-sso-identityserver:\nOAuth2.0 endpoint" as OAuth component "pjx-sso-identityserver:\nMVC" as MVC database "Database3" as DB3 }

note top of ApolloServer : pjx-graphql-apollo note top of APIServerNode : pjx-api-node note top of APIServerDotnet : pjx-api-dotnet note top of IdentityServer : pjx-sso-identityserver note top of WebReactGeneral : React js Web note left of WebReactClient : restricted pages

WebReactGeneral -right-> GraphQLAPI : "GraphQL query" GraphQLAPI -right-> RestifyAPI : "request data"

WebReactClient -right-> DotnetController : "OpenID Connect" DotnetController -down-> OAuth : "authorize"

WebReactLogin -right-> MVC : "redirect"

@enduml

Installation

Prerequisites

You will need to ensure you have Docker installed on your machine.

• Install Docker for Mac
• Install Docker for Windows
• Install Docker for Ubuntu

For WSL Development Container support, you'll also need:

• Visual Studio Code
• Dev Containers extension
• WSL 2 (Windows users)

Repository Setup

Clone pjx-root repo. This is to make this the parent directory for the pjx projects.

How does it work?

Once you've cloned this repo you will see an empty folder /projects.

This folder contains other cloned github repos, where each repo represents a dockerized project. (ie. api, Apollo server, web client, etc). The contents of this folder are ignored by git, and should not be committed to version control - you download the repos and launch them, but not supposed to make or commit any changes inside projects folder.

Helm Charts

helm install pjx-release helm-pjx/

Running a solution

Option 1: Traditional Docker Compose

To run the pjx solution, clone all the required repos inside the projects folder, then run the docker-compose up on the root folder:

cd ./projects
git clone https://github.com/mikelau13/pjx-graphql-apollo.git
git clone https://github.com/mikelau13/pjx-api-node.git
git clone https://github.com/mikelau13/pjx-api-dotnet.git
git clone https://github.com/mikelau13/pjx-sso-identityserver.git
git clone https://github.com/mikelau13/pjx-web-react.git
docker-compose -f ../docker-compose.yml up

Option 2: WSL Development Container (Recommended for Development)

For development with full IDE support, debugging, and hot-reload capabilities:

1a. Open in VS Code Dev Container:

• Clone this repository to your WSL file system
• Open the repository in VS Code
• When prompted, click "Reopen in Container" or run Ctrl+Shift+P → "Dev Containers: Reopen in Container"

1b. Or open folder directly from WSL command line

• devcontainers@AWMD-48MYC44:/mnt/f/repos/pjx$ code .

2. Start all services:

   docker-compose -f docker-compose.devcontainer.yml up

3. Individual Service Development: Each service has its own .devcontainer folder. You can open any individual service in its own container:

   • projects/pjx-web-react/ - React frontend development
   • projects/pjx-api-node/ - Node.js API development
   • projects/pjx-graphql-apollo/ - GraphQL server development
   • projects/pjx-api-dotnet/ - .NET API development
   • projects/pjx-sso-identityserver/ - Identity server development

Benefits of Dev Container approach:

• Full IntelliSense and debugging support
• Hot reload for all services
• Consistent development environment across team members
• Integrated terminal access to each service
• Pre-configured extensions and settings

Execute this command to stop them:

$ docker-compose -f ../docker-compose.yml down

On development environment, you might want to first prune all containers to avoid any conflicts:

docker system prune

Then verify your containers are up and running:

$ docker ps

Hosts and SSL

For localhost testing, you will need to set up the hosts file and trust the SSL certificate for your machine/web browsers, please follow the instructions on my other project pjx-sso-identityserver.

Using the web app

You can now visit http://localhost:3000 to try the website, there are few sanity testing you can try:

• register a new account - verify if the web app client side is consuming the Identity Server API, with SSL and CoRS settings, properly or not
  

• activate your account - since this project is for demo purpose, you will not receive the activation email, instead, after registration, check the command logs to find the activation code to active your account
  
  

• login
  

• on the site menu, visit the /country/all page - this will verify the connectivity with the .NET Core API, which will authenticate the connection with the Identity Server on the backend side

• on the left/hamburger menu, visit the /cities page - it will verify the Apollo Server and the Restify API

• on the left/hamburger menu, visit the Profile page - it will verify the Identity Server MVC

• Calendar - CURD
  

• Sign Out
  

• visit the GraphQL playground of the Apollo Server - http://localhost:4000

• try out the Swagger of the .NET Core API - http://localhost:6001/swagger/

• try out the Swagger of the Identity Server - https://pjx-sso-identityserver/swagger

• try out the responsive HTML design by changing the browser size