TDP UI

tdp-ui is a graphical interface for tdp-server.

Pre-requisites

We assume that are available:

• An instance of tdp-server, with the appropriate cors configuration (BACKEND_CORS_ORIGINS=[...,"http://tdp-ui-domain.local"]).
• An identity provider, provisioned and configured to work with tdp-server. tdp-ui domain has to be registered as a redirect URI.
  Note: tdp_server provides a Docker environment containing an IDP for development purposes.

The following are required to build and develop tdp-ui. They aren't needed when exporting the project. tdp-ui can be used with any web server (such as NGINX):

• Node.js 14.13.0 or later.
  The UI is based on Next.js, which requires Node.js.

Development and testing

• Use the sample config.example.json file to provide tdp-ui the required environment variables:

  cp config.example.json config.json

  A skipAuth option is available to skip the authentication process. It is useful for development purposes.

• Generate the RTK Query OpenAPI client:

  npm run generate

  The RTK Query OpenAPI client is generated in the ./src/features/api/tdpApi.ts file using ./scripts/openapi-config.ts and a schema in the ./schemas/ folder.

• Install dependencies and start the app in development mode:

  npm install
  npm run dev

  By default, the client is available at http://localhost:3000.

Development with Docker

A Docker environment is provided with the required dependencies for development. It contains both tdp-server and Keycloak as the identity provider:

docker compose -f env/dev/compose.yml up -d

An user is provisioned in Keycloak to access the app. The credentials are:

• username: user@tdp.com
• password: secret

Build and export

By default, Next.js uses a Node.js server to serve the app. tdp-ui doesn't need a Node.js server and is exported to work without it:

npm install       # Install dependencies
npm run export    # Build and export the project

The project is exported in the ./out folder to be used with any web server (such as NGINX).

Test export with Docker

A Docker environment is provided with NGINX to test the exported project:

docker compose -f env/export/compose.yml up -d

Contributions

Git hooks are defined using Husky to enforce good coding practices. For each commit, Husky automatically:

• Lint your staged files (see ESLint)
• Format your staged files (see Prettier)
• Lint your commit messages according to the Conventional Commit specification (see commitlint)

Further instructions are available in the docs folder.