barthofu/sgm

Monorepo for the SGM web application project

SGM

• Description
• Project structure
• Understanding the project
  • API auto-generated client
  • CLI commands
• Requirements
  • Initialize the project
• Usage
  • API
    • Start the server in dev mode
    • Start the server in production mode
  • Web
    • Start in dev mode
    • Build
    • Serve the build
  • Storybook
    • Start storybook locally
  • OpenApi
    • Generate client
• Todo

Description

Monorepo for the SGM project.

Project structure

/
├── apps 
│   ├── api # Django API
│   └── web # React web app powered by vite
└── libs
    ├── ui # Common UI components, hooks and utils
    ├── theme # Centralized Chakra-UI theme for all components
    ├── storybook # Storybook for components
    └── openapi # OpenAPI schema for API and auto-generated client services and typescript models

Understanding the project

API auto-generated client

The front-end http client is auto-generated from the API OpenAPI schema using openapi-codegen. The codegen is run in 3 different situations :

• Each time a .py file is modified and saved in the api app source code.
• Each time the web app is build.
• On demand with the nx run openapi:generate command.

This ensures that the client is always up to date with the API.

The output of the codegen is located in libs/openapi/src/generated and the openapi specification is located in libs/openapi/src/openapi.yaml.

Concretly, the codegen generates :

• apiSchemas.ts: all the typescript models synced on the request input and response data output of the api controllers.
• apiComponents.ts: @tanstack/query (previously react-query) hooks for each API endpoint their associated fetch functions for classic async/await calls.
• apiFetcher.ts: the fetcher function used by @tanstack/query to make the actual http calls, which is completely customizable and won't be overwritten by the codegen.

CLI commands

In addition to classic nx generators commands, the project have additionnal commands to help with development by generating different type of files:

• pnpm g:web: Generate files for apps/web. It can generate following types of files dynamically:
  • component: Generate a component.
  • page: Generate a page.
• pnpm g:ui: Generate files for libs/ui. It can generate following types of files dynamically:
  • component: Generate a component with a storybook story.

Requirements

• Node.js (>=18)
• PNPM (>=8)
• Python (3.9)
• Pango

  sudo apt-get install libpangocairo-1.0-0

• Poetry

Initialize the project

1. Install Node dependencies

   pnpm install

2. Install nx globally

   pnpm install -g nx

3. Install Python dependencies for the API

   nx run api:install 

4. Run the API migrations

   nx run api:migrate

Usage

API

Start the server in dev mode

nx run api:dev

Start the server in production mode

nx run api:start

Web

Start in dev mode

nx run web:dev

Build

nx run web:build

Serve the build

nx run web:preview

Storybook

Start storybook locally

nx run storybook:start

OpenApi

Generate client

nx run openapi:generate

Todo

• Devops
  • Staging env