---
title: Voorkant Opdragte
image: /images/user-guide/create-workspace/workspace-cover.png
---

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

## Nuttige opdragte

### Begin die toepassing

```bash
npx nx start twenty-front
```

### Genereer weer graphql-skema gebaseer op API graphql-skema

```bash
npx nx run twenty-front:graphql:generate --configuration=metadata
```

OF

```bash
npx nx run twenty-front:graphql:generate
```

### Klop

```bash
npx nx run twenty-front:lint # pass --fix to fix lint errors
```

## Vertalings

```bash
npx nx run twenty-front:lingui:extract
npx nx run twenty-front:lingui:compile
```

### Toets

```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)
```

## Tegnologie Stapel

Die projek het 'n skoon en eenvoudige stapel, met minimale sjabloonkode.

**App**

- [React](https://react.dev/)
- [Apollo](https://www.apollographql.com/docs/)
- [GraphQL Kodegenerering](https://the-guild.dev/graphql/codegen)
- [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
- [TypeScript](https://www.typescriptlang.org/)

**Toetsing**

- [Jest](https://jestjs.io/)
- [Storybook](https://storybook.js.org/)

**Gereedskap**

- [Yarn](https://yarnpkg.com/)
- [Craco](https://craco.js.org/docs/)
- [ESLint](https://eslint.org/)

## Argitektuur

### Roetering

[React Router](https://reactrouter.com/) hanteer die roetering.

Om onnodige [her-weergawes](/l/af/developers/frontend-development/best-practices-front#managing-re-renders) te vermy, is al die roeteringslogika in 'n `useEffect` in `PageChangeEffect`.

### Toestandbestuur

[Recoil](https://recoiljs.org/docs/introduction/core-concepts) hanteer toestandbestuur.

Kyk na [beste praktyke](/l/af/developers/frontend-development/best-practices-front#state-management) vir meer inligting oor toestandbestuur.

## Toetsing

[Jest](https://jestjs.io/) dien as die hulpmiddel vir eenheitoetsing, terwyl [Storybook](https://storybook.js.org/) vir komponenttoetsing is.

Jest is hoofsaaklik vir die toets van hulpmiddelfunksies, en nie komponente self nie.

Storybook is vir die toets van die gedrag van geïsoleerde komponente, sowel as die vertoon van die ontwerpstelsel.

