--- title: Frontend Commands image: /images/user-guide/create-workspace/workspace-cover.png --- Header ## Χρήσιμες εντολές ### Εκκίνηση της εφαρμογής ```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 είναι για τον έλεγχο της συμπεριφοράς των μεμονωμένων συστατικών, καθώς και για την προβολή του συστήματος σχεδιασμού.