---
title: Frontend-Befehle
image: /images/user-guide/create-workspace/workspace-cover.png
---

<Frame>
  <img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
</Frame>

## Nützliche Befehle

### Die App starten

```bash
npx nx start twenty-front
```

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

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

ODER

```bash
npx nx run twenty-front:graphql:generate
```

### Lint

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

## Übersetzungen

```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)
```

## 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)
- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
- [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/)
- [ESLint](https://eslint.org/)

## Architektur

### Routing

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

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

### Zustandsverwaltung

[Recoil](https://recoiljs.org/docs/introduction/core-concepts) übernimmt die Zustandsverwaltung.

Siehe [Best Practices](/l/de/developers/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.

