--- title: Příkazy Frontend image: /images/user-guide/create-workspace/workspace-cover.png --- Header ## Užitečné příkazy ### Spuštění aplikace ```bash npx nx start twenty-front ``` ### Regenerujte schéma GraphQL na základě API graphql schématu ```bash npx nx run twenty-front:graphql:generate --configuration=metadata ``` NEBO ```bash npx nx run twenty-front:graphql:generate ``` ### Linter ```bash npx nx run twenty-front:lint # pass --fix to fix lint errors ``` ## Překlady ```bash npx nx run twenty-front:lingui:extract npx nx run twenty-front:lingui:compile ``` ### Testovat ```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) ``` ## Technologický Stack Projekt má čistý a jednoduchý stack s minimálním počtem šablonových kódů. **Aplikace** - [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/) **Testování** - [Jest](https://jestjs.io/) - [Storybook](https://storybook.js.org/) **Nástroje** - [Yarn](https://yarnpkg.com/) - [Craco](https://craco.js.org/docs/) - [ESLint](https://eslint.org/) ## Architektura ### Směrování [React Router](https://reactrouter.com/) zajišťuje směrování. Aby se předešlo zbytečnému [překreslování](/l/cs/developers/frontend-development/best-practices-front#managing-re-renders) je veškerá logika směrování v `useEffect` v `PageChangeEffect`. ### Správa stavu [Recoil](https://recoiljs.org/docs/introduction/core-concepts) zajišťuje správu stavu. Podívejte se na [osvědčené postupy](/l/cs/developers/frontend-development/best-practices-front#state-management) pro více informací o správě stavu. ## Testování [Jest](https://jestjs.io/) slouží jako nástroj pro testování jednotek, zatímco [Storybook](https://storybook.js.org/) je pro testování komponent. Jest je primárně určen pro testování pomocných funkcí, nikoli samotných komponent. Storybook slouží k testování chování izolovaných komponent, stejně jako k zobrazování návrhového systému.