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

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

## Χρήσιμες εντολές

### Εκκίνηση της εφαρμογής

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

### Αναδημιουργήστε το σχήμα graphql με βάση το σχήμα API graphql

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

Ή

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

### Έλεγχος

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

## Μεταφράσεις

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

### Δοκιμή

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

## Τεχνολογική Στοίβα

Το έργο έχει μια καθαρή και απλή στοίβα, με ελάχιστο περιττό κώδικα.

**Εφαρμογή**

- [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/)

**Δοκιμές**

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

**Εργαλεία**

- [Yarn](https://yarnpkg.com/)
- [Craco](https://craco.js.org/docs/)
- [ESLint](https://eslint.org/)

## Αρχιτεκτονική

### Δρομολόγηση

[React Router](https://reactrouter.com/) αναλαμβάνει τη δρομολόγηση.

Για να αποφεύγονται περιττές [επανεκτελέσεις](/l/el/developers/frontend-development/best-practices-front#managing-re-renders), όλη η λογική της δρομολόγησης βρίσκεται σε μια `useEffect` στο `PageChangeEffect`.

### Διαχείριση κατάστασης

[Recoil](https://recoiljs.org/docs/introduction/core-concepts) αναλαμβάνει τη διαχείριση κατάστασης.

Δείτε τις [καλύτερες πρακτικές](/l/el/developers/frontend-development/best-practices-front#state-management) για περισσότερες πληροφορίες σχετικά με τη διαχείριση κατάστασης.

## Δοκιμές

[Jest](https://jestjs.io/) χρησιμεύει ως εργαλείο για τις δοκιμές μονάδων ενώ το [Storybook](https://storybook.js.org/) χρησιμοποιείται για τις δοκιμές συστατικών.

Το Jest είναι κυρίως για τον έλεγχο των ωφελίμων συναρτήσεων, και όχι για τα ίδια τα συστατικά.

Το Storybook είναι για τον έλεγχο της συμπεριφοράς των μεμονωμένων συστατικών, καθώς και για την προβολή του συστήματος σχεδιασμού.

