> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend-Befehle

## Nützliche Befehle

### Die App starten

```bash theme={null}
npx nx start twenty-front
```

### GraphQL-Schema basierend auf API-GraphQL-Schema regenerieren

```bash theme={null}
npx nx run twenty-front:graphql:generate --configuration=metadata
```

ODER

```bash theme={null}
npx nx run twenty-front:graphql:generate
```

### Lint

```bash theme={null}
npx nx run twenty-front:lint # pass --fix to fix lint errors
```

## Übersetzungen

```bash theme={null}
npx nx run twenty-front:lingui:extract
npx nx run twenty-front:lingui:compile
```

### Test

```bash theme={null}
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**

* [React](https://react.dev/)
* [Apollo](https://www.apollographql.com/docs/)
* [GraphQL Codegen](https://the-guild.dev/graphql/codegen)
* [Jotai](https://jotai.org/)
* [TypeScript](https://www.typescriptlang.org/)

**Tests**

* [Jest](https://jestjs.io/)
* [Storybook](https://storybook.js.org/)

**Tools**

* [Yarn](https://yarnpkg.com/)
* [Craco](https://craco.js.org/docs/)
* [Oxlint](https://oxc.rs/docs/guide/usage/linter.html)

## Architektur

### Routing

[React Router](https://reactrouter.com/) übernimmt das Routing.

Um unnötige [re-renders](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) zu vermeiden, befindet sich die gesamte Routing-Logik in einem `useEffect` in `PageChangeEffect`.

### Zustandsverwaltung

[Jotai](https://jotai.org/) übernimmt die Zustandsverwaltung.

Siehe [Best Practices](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) für mehr Informationen zur Zustandsverwaltung.

## Tests

[Jest](https://jestjs.io/) dient als Werkzeug für Unittests, während [Storybook](https://storybook.js.org/) 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.