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

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

## 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.

