Skip to content

UI Development Overview

The /clients directory houses all front-end packages and shared code amongst clients, and also includes e2e tests.

Prerequisites

To run and develop the Fides UI components locally, you'll need to do the following:

  1. Clone the Fides repository
  2. Install Node.js
  3. Globally install Turbo
  4. In the clients folder, run npm install. This will install the dev dependency turbo. This will also install the appropriate dependencies in clients and in each client within clients folder. You may need to first remove all node_modules in each of the clients (admin-ui, privacy-center, etc)

Dependencies within this directory are managed by Turborepo. Our root package.json file defines 3 workspaces (or packages) that are part of the Turbo ecosystem:

  1. admin-ui
  2. privacy-center
  3. fides-js

Running Locally

1
turbo run dev

Running this in the root clients folder will result in every workspace being run.

Running this command within admin-ui will result in only admin-ui being run.

Available commands that exist for every workspace are defined in the root turbo.json file, while commands unique to a specific workspace are defined in the turbo.json file within the workspace.

It's important to use the turbo command because, as you see in the turbo.json files, we've defined some dependencies and caching details on some turbo commands.

Adding packages

To install packages in any package in clients, run the following from clients:

1
npm install <package> --workspace=<workspace>

Example:

1
npm install react --workspace=admin-ui

See https://turbo.build/repo/docs/handbook/package-installation#addingremovingupgrading-packages for more details

Back to top