Skip to content

Getting Started with DiracX Web Development

This tutorial walks you through setting up a DiracX Web development environment, making your first change, and running tests.

Prerequisites

Before starting, ensure you have the following installed:

  • Node.js (LTS version recommended)
  • npm (included with Node.js)
  • Git

You should also have basic knowledge of:

Setting up the environment

Follow the Setup web environment guide to clone the repository and install dependencies:

git clone git@github.com:DIRACGrid/diracx-web.git
cd diracx-web
npm ci

Running the development server

Start the development server against a remote DiracX backend:

export DIRACX_URL=<backend url>
npm run dev

The application will be available at http://localhost:3000. Changes to source files are reflected in real time.

Project structure

The repository is a monorepo with three main packages:

  • packages/diracx-web-components — Reusable React component library published to npm
  • packages/diracx-web — Main Next.js application that consumes the components
  • packages/extensions — Example extension (gubbins) showing how to build custom extensions

Making your first change

  1. Open packages/diracx-web-components/src/components/ and pick a component to modify.
  2. Make a small change (e.g. update a label or add a tooltip).
  3. The dev server will hot-reload your change automatically.

Running tests

Unit tests (Jest + React Testing Library):

npm run test:diracx-web-components

End-to-end tests (Cypress — requires a running DiracX backend):

export DIRACX_URL=<diracx-backend-url>
npm run --prefix packages/diracx-web test

Storybook (interactive component documentation):

npm run doc:diracx-web-components

Next steps