9bc5486d0d
Created by Github action --------- Co-authored-by: github-actions <github-actions@twenty.com>
97 lines
3.2 KiB
Plaintext
97 lines
3.2 KiB
Plaintext
---
|
|
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 είναι για τον έλεγχο της συμπεριφοράς των μεμονωμένων συστατικών, καθώς και για την προβολή του συστήματος σχεδιασμού.
|
|
|