154fb4665e
Created by Github action
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Adds a full French documentation set covering developers (API,
webhooks, backend/frontend, self‑hosting) and user guide (CRM
essentials, data model, workflows, settings, integrations, pricing,
reporting).
>
> - **Docs (FR i18n)**:
> - **Developers**: Add `API`, `Webhooks`, backend (best practices,
custom objects, feature flags, architecture, commands, Zapier), frontend
(best practices, architecture, commands, hotkeys, style guide,
Storybook, Figma), self‑hosting (Docker Compose, upgrade guide, cloud
providers), introduction.
> - **User Guide**: Add getting started (what is Twenty,
create/configure workspace, migration, import/export), CRM essentials
(contacts/accounts, pipelines, views), data model (objects, fields,
relations, table views), collaboration (emails/calendars, notes, tasks),
integrations API (overview, integrations), workflows (getting started,
features, credits, internal automations, services), settings (profile,
permissions, members, domains, releases, email/calendar setup), pricing
(billing/FAQ), reporting overview, resources (GitHub, glossary),
introduction.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
9ba8c24571. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: github-actions <github-actions@twenty.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
97 lines
2.5 KiB
Plaintext
97 lines
2.5 KiB
Plaintext
---
|
|
title: Commandes Frontend
|
|
image: /images/user-guide/create-workspace/workspace-cover.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
|
|
</Frame>
|
|
|
|
## Commandes utiles
|
|
|
|
### Lancement de l'application
|
|
|
|
```bash
|
|
npx nx start twenty-front
|
|
```
|
|
|
|
### Régénérer le schéma GraphQL basé sur le schéma API GraphQL
|
|
|
|
```bash
|
|
npx nx run twenty-front:graphql:generate --configuration=metadata
|
|
```
|
|
|
|
OU
|
|
|
|
```bash
|
|
npx nx run twenty-front:graphql:generate
|
|
```
|
|
|
|
### Analyse
|
|
|
|
```bash
|
|
npx nx run twenty-front:lint # pass --fix to fix lint errors
|
|
```
|
|
|
|
## Traductions
|
|
|
|
```bash
|
|
npx nx run twenty-front:lingui:extract
|
|
npx nx run twenty-front:lingui:compile
|
|
```
|
|
|
|
### Test
|
|
|
|
```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)
|
|
```
|
|
|
|
## Écosystème Tech
|
|
|
|
Le projet a une stack simple et propre, avec un code boilerplate minimal.
|
|
|
|
**Application**
|
|
|
|
- [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/)
|
|
|
|
**Tests**
|
|
|
|
- [Jest](https://jestjs.io/)
|
|
- [Storybook](https://storybook.js.org/)
|
|
|
|
**Outils**
|
|
|
|
- [Yarn](https://yarnpkg.com/)
|
|
- [Craco](https://craco.js.org/docs/)
|
|
- [ESLint](https://eslint.org/)
|
|
|
|
## Architecture
|
|
|
|
### Routage
|
|
|
|
[React Router](https://reactrouter.com/) gère le routage.
|
|
|
|
Pour éviter les [re-renders](/developers/frontend-development/best-practices-front#managing-re-renders) inutiles, toute la logique de routage est dans un `useEffect` dans `PageChangeEffect`.
|
|
|
|
### Gestion de l'État
|
|
|
|
[Recoil](https://recoiljs.org/docs/introduction/core-concepts) gère la gestion de l'état.
|
|
|
|
Voir [les meilleures pratiques](/developers/frontend-development/best-practices-front#state-management) pour plus d'informations sur la gestion de l'état.
|
|
|
|
## Tests
|
|
|
|
[Jest](https://jestjs.io/) sert de guide pour les tests unitaires tandis que [Storybook](https://storybook.js.org/) est utilisé pour les tests de composants.
|
|
|
|
Jest est principalement utilisé pour tester les fonctions utilitaires, et non les composants eux-mêmes.
|
|
|
|
Storybook est utilisé pour tester le comportement des composants isolés, ainsi que pour afficher le système de design.
|
|
|