--- title: Comandes del Frontend image: /images/user-guide/create-workspace/workspace-cover.png --- Header ## Comandes útils ### Iniciant l'aplicació ```bash npx nx start twenty-front ``` ### Regenerar l'esquema graphql basat en l'esquema de l'API graphql ```bash npx nx run twenty-front:graphql:generate --configuration=metadata ``` O ```bash npx nx run twenty-front:graphql:generate ``` ### Lint ```bash npx nx run twenty-front:lint # pass --fix to fix lint errors ``` ## Traduccions ```bash npx nx run twenty-front:lingui:extract npx nx run twenty-front:lingui:compile ``` ### Provar ```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) ``` ## Tecnologia utilitzada El projecte té una pila neta i simple, amb un codi mínim d'estructura. **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/) **Proves** - [Jest](https://jestjs.io/) - [Storybook](https://storybook.js.org/) **Eines** - [Yarn](https://yarnpkg.com/) - [Craco](https://craco.js.org/docs/) - [ESLint](https://eslint.org/) ## Arquitectura ### Routing [React Router](https://reactrouter.com/) gestiona el routing. To avoid unnecessary [re-renders](/l/ca/developers/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`. ### Gestió de l'estat [Recoil](https://recoiljs.org/docs/introduction/core-concepts) gestiona la gestió de l'estat. Consulta [pràctiques recomanades](/l/ca/developers/frontend-development/best-practices-front#state-management) per obtenir més informació sobre la gestió de l'estat. ## Proves [Jest](https://jestjs.io/) serveix com a eina per a proves d'unitat mentre que [Storybook](https://storybook.js.org/) és per a proves de components. Jest s'utilitza principalment per provar funcions d'utilitat, no els components en si mateixos. Storybook serveix per provar el comportament de components aïllats, així com per mostrar el sistema de disseny.