• 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

Monorepo for the SGM project.

/
├── 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

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.

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.

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

  sudo apt-get install libpangocairo-1.0-0

• Poetry

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

nx run api:dev

nx run api:start

nx run web:dev

nx run web:build

nx run web:preview

nx run storybook:start

nx run openapi:generate

• Devops
  • Staging env