index.md

Developer Guide

Welcome to the DiracX-Web Developer Guide! This guide will help you navigate and ramp you up. Adding features, fixing the code in a consistent manner with tests and documentation will become a second nature.

Architecture Overview

---
config:
  layout: elk
---
flowchart TD
 subgraph monorep["Monorepo"]
        monorep1["diracx-web-components"]
        monorep2["diracx-web"]
        monorep3["extension[gubbins]"]
  end
    monorep2 -- images deployed in --> docker[" "]
    monorep2 -. uses .-> monorep1
    monorep3 -. uses .-> monorep1
    monorep1 -- documented on --> storybook[" "]
    monorep1 -- published on --> npm[" "]
    extension["diracx-community-extension"] -. uses .-> npm
    docker@{ img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLQKd_MRed_mZQlgrzQuUXVA3P39ssOVX8_g&s", h: 100, w: 100}
    storybook@{ img: "https://miro.medium.com/v2/resize:fit:900/1*ZuBTYHXl6l3XzTb8d9Oi5Q.png", h: 100, w: 150, pos: "b"}
    npm@{ img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/2560px-Npm-logo.svg.png", h: 40, w: 100}
     monorep1:::Ash
     monorep1:::Cyan
     monorep2:::Green
     monorep3:::Green
     extension:::Ash
    classDef Cyan stroke-width:1px, stroke-dasharray:none, stroke:#00FFFF, fill:#9CFFFF
    classDef Green stroke-width:1px, stroke-dasharray:none, stroke:#5BFF00, fill:#A4FF8E, color:#374D7C
    classDef Ash stroke-width:1px, stroke-dasharray:none, stroke:#999999, fill:#EEEEEE, color:#000000

Loading

This repository is organized as a monorepo, with the following key packages:

• DiracX-Web-Components: A library of reusable React components designed for integration within the DiracX-Web package and to facilitate the creation of custom DiracX web extensions.

• DiracX-Web: Vanilla Dirac web interface based on Next.js. Leverages components from DiracX-Web-Components to provide core functionalities.

• Extensions: An illustrative example of a web extension, also based on Next.js, demonstrating how to extend the functionality of DiracX-Web using the components from the DiracX-Web-Components package.

The monorepo structure is based on npm workspaces to ensure that related packages (DiracX-Web-Components) are automatically used from their local versions instead of fetching them from the npm registry.

Ramping up

• Set up a development environment
• Manage the extension
• Contribute to the effort