Zum Hauptinhalt springen
Header

Nützliche Befehle

Die App starten

npx nx start twenty-front

GraphQL-Schema basierend auf API-GraphQL-Schema regenerieren

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

Lint

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

Übersetzungen

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

Test

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)

Technologie-Stack

Das Projekt hat einen sauberen und einfachen Stack mit minimalem Boilerplate-Code. App Tests Tools

Architektur

Routing

React Router übernimmt das Routing. Um unnötige Re-Renders zu vermeiden, befindet sich die gesamte Routing-Logik in einem useEffect in PageChangeEffect.

Zustandsverwaltung

Recoil übernimmt die Zustandsverwaltung. Siehe Best Practices für mehr Informationen zur Zustandsverwaltung.

Tests

Jest dient als Werkzeug für Unittests, während Storybook für Komponententests verwendet wird. Jest ist hauptsächlich für das Testen von Dienstprogrammfunktionen und nicht für die Komponenten selbst gedacht. Storybook dient zum Testen des Verhaltens isolierter Komponenten sowie zur Darstellung des Designsystems.