Frontend Commands - Twenty

Useful commands

Starting the app

bash

npx nx start twenty-front

Regenerate graphql schema based on API graphql schema

bash

npx nx run twenty-front:graphql:generate --configuration=metadata

bash

npx nx run twenty-front:graphql:generate

Lint

bash

npx nx run twenty-front:lint # pass --fix to fix lint errors

Translations

bash

npx nx run twenty-front:lingui:extract
npx nx run twenty-front:lingui:compile

Test

bash

npx nx run twenty-front:test # run jest tests
npx nx run twenty-front:storybook:serve:dev # run storybook
npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve:dev to be running)
npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)

Tech Stack

The project has a clean and simple stack, with minimal boilerplate code.

App

Testing

Tooling

Architecture

Routing

React Router handles the routing.

To avoid unnecessary re-renders all the routing logic is in a useEffect in PageChangeEffect.

State Management

Jotai handles state management.

See best practices for more information on state management.

Testing

Jest serves as the tool for unit testing while Storybook is for component testing.

Jest is mainly for testing utility functions, and not components themselves.

Storybook is for testing the behavior of isolated components, as well as displaying the design system.