i18n - docs translations (#17433)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
c8c821a692
commit
2353bc62cc
+11
-11
@@ -1,22 +1,22 @@
|
||||
---
|
||||
title: Best Practices
|
||||
title: Meilleures pratiques
|
||||
---
|
||||
|
||||
This document outlines the best practices you should follow when working on the backend.
|
||||
Ce document décrit les meilleures pratiques à suivre lors de travaux sur le backend.
|
||||
|
||||
## Follow a modular approach
|
||||
## Suivez une approche modulaire
|
||||
|
||||
The backend follows a modular approach, which is a fundamental principle when working with NestJS. Make sure you break down your code into reusable modules to maintain a clean and organized codebase.
|
||||
Each module should encapsulate a particular feature or functionality and have a well-defined scope. This modular approach enables clear separation of concerns and removes unnecessary complexities.
|
||||
Le backend suit une approche modulaire, qui est un principe fondamental lors de l'utilisation de NestJS. Assurez-vous de décomposer votre code en modules réutilisables pour maintenir une base de code propre et organisée.
|
||||
Chaque module doit encapsuler une fonctionnalité particulière et avoir un périmètre bien défini. Cette approche modulaire permet une séparation claire des préoccupations et supprime les complexités inutiles.
|
||||
|
||||
## Expose services to use in modules
|
||||
## Exposez des services à utiliser dans les modules
|
||||
|
||||
Always create services that have a clear and single responsibility, which enhances code readability and maintainability. Name the services descriptively and consistently.
|
||||
Créez toujours des services avec une responsabilité claire et unique, ce qui améliore la lisibilité et la maintenabilité du code. Nommez les services de manière descriptive et cohérente.
|
||||
|
||||
You should also expose services that you want to use in other modules. Exposing services to other modules is possible through NestJS's powerful dependency injection system, and promotes loose coupling between components.
|
||||
Vous devez également exposer les services que vous souhaitez utiliser dans d'autres modules. Exposer des services à d'autres modules est possible grâce au puissant système d'injection de dépendance de NestJS, et favorise un couplage lâche entre les composants.
|
||||
|
||||
## Avoid using `any` type
|
||||
## Évitez d'utiliser le type `any`
|
||||
|
||||
When you declare a variable as `any`, TypeScript's type checker doesn't perform any type checking, making it possible to assign any type of values to the variable. TypeScript uses type inference to determine the type of variable based on the value. By declaring it as `any`, TypeScript can no longer infer the type. This makes it hard to catch type-related errors during development, leading to runtime errors and makes the code less maintainable, less reliable, and harder to understand for others.
|
||||
Lorsque vous déclarez une variable comme `any`, le vérificateur de types de TypeScript ne procède à aucune vérification de type, ce qui permet d'affecter n'importe quel type de valeur à la variable. TypeScript utilise l'inférence de type pour déterminer le type d'une variable en fonction de sa valeur. En le déclarant comme `any`, TypeScript ne peut plus inférer le type. Cela rend difficile la détection des erreurs liées aux types pendant le développement, conduisant à des erreurs d'exécution et rendant le code moins maintenable, moins fiable et plus difficile à comprendre pour d'autres.
|
||||
|
||||
This is why everything should have a type. So if you create a new object with a first name and last name, you should create an interface or type that contains a first name and last name that defines the shape of the object you are manipulating.
|
||||
C'est pourquoi tout devrait avoir un type. Donc si vous créez un nouvel objet avec un prénom et un nom, vous devriez créer une interface ou un type contenant un prénom et un nom qui définit la forme de l'objet que vous manipulez.
|
||||
|
||||
+15
-15
@@ -1,39 +1,39 @@
|
||||
---
|
||||
title: Custom Objects
|
||||
title: Objets personnalisés
|
||||
---
|
||||
|
||||
Objects are structures that allow you to store data (records, attributes, and values) specific to an organization. Twenty provides both standard and custom objects.
|
||||
Les objets sont des structures qui vous permettent de stocker des données (enregistrements, attributs et valeurs) spécifiques à une organisation. Twenty fournit à la fois des objets standard et personnalisés.
|
||||
|
||||
Standard objects are in-built objects with a set of attributes available for all users. Examples of standard objects in Twenty include Company and Person. Standard objects have standard fields that are also available for all Twenty users, like Company.displayName.
|
||||
Les objets standard sont des objets intégrés avec un ensemble d'attributs disponibles pour tous les utilisateurs. Les exemples d'objets standard dans Twenty incluent Société et Personne. Les objets standard ont des champs standard également disponibles pour tous les utilisateurs de Twenty, comme Company.displayName.
|
||||
|
||||
Custom objects are objects that you can create to store information that is unique to your organization. They are not built-in; members of your workspace can create and customize custom objects to hold information that standard objects aren't suitable for.
|
||||
Les objets personnalisés sont des objets que vous pouvez créer pour stocker des informations uniques à votre organisation. Ils ne sont pas intégrés ; les membres de votre espace de travail peuvent créer et personnaliser des objets personnalisés pour contenir des informations que les objets standard ne conviennent pas.
|
||||
|
||||
## High-level schema
|
||||
## Schéma de haut niveau
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="High level schema" />
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="Schéma de haut niveau" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
## How it works
|
||||
## Comment ça marche
|
||||
|
||||
Custom objects come from metadata tables that determine the shape, name, and type of the objects. All this information is present in the metadata schema database, consisting of tables:
|
||||
Les objets personnalisés proviennent de tables de métadonnées qui déterminent la forme, le nom et le type des objets. Toutes ces informations sont présentes dans la base de données des schémas de métadonnées, composée de tables :
|
||||
|
||||
* **DataSource**: Details where the data is present.
|
||||
* **Object**: Describes the object and links to a DataSource.
|
||||
* **Field**: Outlines an Object's fields and connects to the Object.
|
||||
* **DataSource** : Détaille où les données sont présentes.
|
||||
* **Objet** : Décrit l'objet et lie à une DataSource.
|
||||
* **Champ** : Décrit les champs d'un objet et se connecte à l'objet.
|
||||
|
||||
To add a custom object, the workspaceMember will query the /metadata API. This updates the metadata accordingly and computes a GraphQL schema based on the metadata, storing it in a GQL cache for later use.
|
||||
Pour ajouter un objet personnalisé, le workspaceMember interrogera l'API /metadata. Cela met à jour les métadonnées en conséquence et calcule un schéma GraphQL basé sur les métadonnées, en le stockant dans un cache GQL pour une utilisation ultérieure.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/server/add-custom-objects.jpeg" alt="Query the /metadata API to add custom objects" />
|
||||
<img src="/images/docs/server/add-custom-objects.jpeg" alt="Interroger l'API /metadata pour ajouter des objets personnalisés" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
To fetch data, the process involves making queries through the /graphql endpoint and passing them through the Query Resolver.
|
||||
Pour obtenir des données, le processus implique de faire des requêtes via le point de terminaison /graphql et de les transmettre via le Query Resolver.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="Query the /graphql endpoint to fetch data" />
|
||||
<img src="/images/docs/server/custom-object-schema.png" alt="Interroger le point de terminaison /graphql pour obtenir des données" />
|
||||
</div>
|
||||
|
||||
+12
-12
@@ -1,12 +1,12 @@
|
||||
---
|
||||
title: Feature Flags
|
||||
title: Drapeaux de fonctionnalité
|
||||
---
|
||||
|
||||
Feature flags are used to hide experimental features. For Twenty, they are set on workspace level and not on a user level.
|
||||
Les drapeaux de fonctionnalité sont utilisés pour masquer les fonctionnalités expérimentales. Pour Twenty, ils sont définis au niveau de l'espace de travail et non au niveau de l'utilisateur.
|
||||
|
||||
## Adding a new feature flag
|
||||
## Ajout d'un nouveau drapeau de fonctionnalité
|
||||
|
||||
In `FeatureFlagKey.ts` add the feature flag:
|
||||
Dans `FeatureFlagKey.ts` ajoutez l'indicateur de fonctionnalité :
|
||||
|
||||
```ts
|
||||
type FeatureFlagKey =
|
||||
@@ -14,7 +14,7 @@ type FeatureFlagKey =
|
||||
| ...;
|
||||
```
|
||||
|
||||
Also add it to the enum in `feature-flag.entity.ts`:
|
||||
Ajoutez-le également à l'énumération dans `feature-flag.entity.ts` :
|
||||
|
||||
```ts
|
||||
enum FeatureFlagKeys {
|
||||
@@ -23,7 +23,7 @@ enum FeatureFlagKeys {
|
||||
}
|
||||
```
|
||||
|
||||
To apply a feature flag on a **backend** feature use:
|
||||
Pour appliquer un drapeau de fonctionnalité à une fonctionnalité **back-end**, utilisez :
|
||||
|
||||
```ts
|
||||
@Gate({
|
||||
@@ -31,16 +31,16 @@ To apply a feature flag on a **backend** feature use:
|
||||
})
|
||||
```
|
||||
|
||||
To apply a feature flag on a **frontend** feature use:
|
||||
Pour appliquer un drapeau de fonctionnalité à une fonctionnalité **front-end**, utilisez :
|
||||
|
||||
```ts
|
||||
const isFeatureNameEnabled = useIsFeatureEnabled('IS_FEATURENAME_ENABLED');
|
||||
```
|
||||
|
||||
## Configure feature flags for the deployment
|
||||
## Configurer les drapeaux de fonctionnalité pour le déploiement
|
||||
|
||||
Change the corresponding record in the Table `core.featureFlag`:
|
||||
Modifiez l'enregistrement correspondant dans la Table `core.featureFlag` :
|
||||
|
||||
| id | key | workspaceId | value |
|
||||
| ------ | ------------------------ | ----------- | ------ |
|
||||
| Random | `IS_FEATURENAME_ENABLED` | WorkspaceID | `true` |
|
||||
| iD | clé | workspaceId | valeur |
|
||||
| --------- | ------------------------ | ----------- | ------ |
|
||||
| Aléatoire | `IS_FEATURENAME_ENABLED` | WorkspaceID | `vrai` |
|
||||
|
||||
+36
-36
@@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Folder Architecture
|
||||
info: A detailed look into our server folder architecture
|
||||
title: Architecture des Dossiers
|
||||
info: Un regard détaillé sur l'architecture des dossiers de notre serveur
|
||||
---
|
||||
|
||||
The backend directory structure is as follows:
|
||||
La structure du répertoire backend est la suivante :
|
||||
|
||||
```
|
||||
server
|
||||
@@ -23,35 +23,35 @@ server
|
||||
|
||||
## Ability
|
||||
|
||||
Defines permissions and includes handlers for each entity.
|
||||
Définit les permissions et inclut des gestionnaires pour chaque entité.
|
||||
|
||||
## Decorators
|
||||
## Décorateurs
|
||||
|
||||
Defines custom decorators in NestJS for added functionality.
|
||||
Définit des décorateurs personnalisés dans NestJS pour des fonctionnalités supplémentaires.
|
||||
|
||||
See [custom decorators](https://docs.nestjs.com/custom-decorators) for more details.
|
||||
|
||||
## Filters
|
||||
## Filtres
|
||||
|
||||
Includes exception filters to handle exceptions that might occur in GraphQL endpoints.
|
||||
Inclut des filtres d'exception pour gérer les exceptions qui pourraient se produire dans les points de terminaison GraphQL.
|
||||
|
||||
## Guards
|
||||
|
||||
See [guards](https://docs.nestjs.com/guards) for more details.
|
||||
Voir [gardiens](https://docs.nestjs.com/guards) pour plus de détails.
|
||||
|
||||
## Health
|
||||
## Santé
|
||||
|
||||
Includes a publicly available REST API (healthz) that returns a JSON to confirm whether the database is working as expected.
|
||||
Inclut une API REST disponible publiquement (healthz) qui renvoie un JSON pour confirmer si la base de données fonctionne comme prévu.
|
||||
|
||||
## Metadata
|
||||
## Métadonnées
|
||||
|
||||
Defines custom objects and makes available a GraphQL API (graphql/metadata).
|
||||
Définit des objets personnalisés et met une API GraphQL à disposition (graphql/metadata).
|
||||
|
||||
## Workspace
|
||||
## Espace de travail
|
||||
|
||||
Generates and serves custom GraphQL schema based on the metadata.
|
||||
Génère et sert un schéma GraphQL personnalisé basé sur les métadonnées.
|
||||
|
||||
### Workspace Directory Structure
|
||||
### Structure du répertoire de l'espace de travail
|
||||
|
||||
```
|
||||
workspace
|
||||
@@ -83,43 +83,43 @@ workspace
|
||||
└───workspace.factory.ts
|
||||
```
|
||||
|
||||
The root of the workspace directory includes the `workspace.factory.ts`, a file containing the `createGraphQLSchema` function. This function generates workspace-specific schema by using the metadata to tailor a schema for individual workspaces. By separating the schema and resolver construction, we use the `makeExecutableSchema` function, which combines these discrete elements.
|
||||
La racine du répertoire de l'espace de travail inclut le fichier `workspace.factory.ts`, qui contient la fonction `createGraphQLSchema`. Cette fonction génère un schéma spécifique à l'espace de travail en utilisant les métadonnées pour adapter un schéma pour chaque espace de travail. En séparant la construction du schéma et du résolveur, nous utilisons la fonction `makeExecutableSchema`, qui combine ces éléments distincts.
|
||||
|
||||
This strategy is not just about organization, but also helps with optimization, such as caching generated type definitions to enhance performance and scalability.
|
||||
Cette stratégie n'est pas seulement une question d'organisation, mais aide également à l'optimisation, comme la mise en cache des définitions de type générées pour améliorer les performances et la scalabilité.
|
||||
|
||||
### Workspace Schema builder
|
||||
### Constructeur de schéma d'espace de travail
|
||||
|
||||
Generates the GraphQL schema, and includes:
|
||||
Génère le schéma GraphQL, et inclut :
|
||||
|
||||
#### Factories:
|
||||
#### Usines :
|
||||
|
||||
Specialised constructors to generate GraphQL-related constructs.
|
||||
Constructeurs spécialisés pour générer des constructions liées à GraphQL.
|
||||
|
||||
* The type.factory translates field metadata into GraphQL types using `TypeMapperService`.
|
||||
* The type-definition.factory creates GraphQL input or output objects derived from `objectMetadata`.
|
||||
* La type.factory traduit les métadonnées de champs en types GraphQL en utilisant le `TypeMapperService`.
|
||||
* La type-definition.factory crée des objets d'entrée ou de sortie GraphQL dérivés de `objectMetadata`.
|
||||
|
||||
#### GraphQL Types
|
||||
#### Types GraphQL
|
||||
|
||||
Includes enumerations, inputs, objects, and scalars, and serves as the building blocks for the schema construction.
|
||||
Inclut des énumérations, des entrées, des objets et des scalaires, et sert de blocs de construction pour la construction du schéma.
|
||||
|
||||
#### Interfaces and Object Definitions
|
||||
#### Interfaces et définitions d'objets
|
||||
|
||||
Contains the blueprints for GraphQL entities, and includes both predefined and custom types like `MONEY` or `URL`.
|
||||
Contient les plans pour les entités GraphQL, et inclut à la fois des types prédéfinis et personnalisés comme `MONEY` ou `URL`.
|
||||
|
||||
#### Services
|
||||
|
||||
Contains the service responsible for associating FieldMetadataType with its appropriate GraphQL scalar or query modifiers.
|
||||
Contient le service responsable de l'association du FieldMetadataType avec son type scalaire ou modificateur de requête GraphQL approprié.
|
||||
|
||||
#### Storage
|
||||
#### Stockage
|
||||
|
||||
Includes the `TypeDefinitionsStorage` class that contains reusable type definitions, preventing duplication of GraphQL types.
|
||||
Inclut la classe `TypeDefinitionsStorage` qui contient des définitions de type réutilisables, empêchant la duplication des types GraphQL.
|
||||
|
||||
### Workspace Resolver Builder
|
||||
### Constructeur de résolveur d'espace de travail
|
||||
|
||||
Creates resolver functions for querying and mutating the GraphQL schema.
|
||||
Crée des fonctions de résolveur pour interroger et modifier le schéma GraphQL.
|
||||
|
||||
Each factory in this directory is responsible for producing a distinct resolver type, such as the `FindManyResolverFactory`, designed for adaptable application across various tables.
|
||||
Chaque usine de ce répertoire est responsable de la production d'un type de résolveur distinct, comme le `FindManyResolverFactory`, conçu pour une application adaptable à plusieurs tables.
|
||||
|
||||
### Workspace Query Runner
|
||||
### Exécuteur de requêtes d'espace de travail
|
||||
|
||||
Runs the generated queries on the database and parses the result.
|
||||
Exécute les requêtes générées sur la base de données et analyse le résultat.
|
||||
|
||||
+10
-10
@@ -1,20 +1,20 @@
|
||||
---
|
||||
title: Message Queue
|
||||
title: File d'attente de messages
|
||||
---
|
||||
|
||||
Queues facilitate async operations to be performed. They can be used for performing background tasks such as sending a welcome email on register.
|
||||
Each use case will have its own queue class extended from `MessageQueueServiceBase`.
|
||||
Les files d'attente facilitent les opérations asynchrones. Elles peuvent être utilisées pour effectuer des tâches de fond telles que l'envoi d'un e-mail de bienvenue lors de l'enregistrement.
|
||||
Chaque cas d'utilisation aura sa propre classe de file d'attente étendue à partir de `MessageQueueServiceBase`.
|
||||
|
||||
Currently, we only support `bull-mq`[bull-mq](https://bullmq.io/) as the queue driver.
|
||||
Actuellement, nous ne supportons que `bull-mq`[bull-mq](https://bullmq.io/) comme pilote de file d'attente.
|
||||
|
||||
## Steps to create and use a new queue
|
||||
## Étapes pour créer et utiliser une nouvelle file d'attente
|
||||
|
||||
1. Add a queue name for your new queue under enum `MESSAGE_QUEUES`.
|
||||
2. Provide the factory implementation of the queue with the queue name as the dependency token.
|
||||
3. Inject the queue that you created in the required module/service with the queue name as the dependency token.
|
||||
4. Add worker class with token based injection just like producer.
|
||||
1. Ajoutez un nom de file d'attente pour votre nouvelle file sous l'énumération `MESSAGE_QUEUES`.
|
||||
2. Fournissez l'implémentation de la fabrique de la file d'attente avec le nom de la file comme dépendance.
|
||||
3. Injectez la file d'attente que vous avez créée dans le module/service requis en utilisant le nom de la file comme dépendance.
|
||||
4. Ajoutez une classe worker avec une injection basée sur des jetons, comme pour le producteur.
|
||||
|
||||
### Example usage
|
||||
### Exemple d'utilisation
|
||||
|
||||
```ts
|
||||
class Resolver {
|
||||
|
||||
+27
-28
@@ -1,28 +1,28 @@
|
||||
---
|
||||
title: Backend Commands
|
||||
title: Commandes Backend
|
||||
---
|
||||
|
||||
## Useful commands
|
||||
## Commandes utiles
|
||||
|
||||
These commands should be executed from packages/twenty-server folder.
|
||||
From any other folder you can run `npx nx {command} twenty-server` (or `npx nx run twenty-server:{command}`).
|
||||
Ces commandes doivent être exécutées depuis le dossier packages/twenty-server.
|
||||
Depuis n'importe quel autre dossier, vous pouvez exécuter `npx nx {command} twenty-server` (ou `npx nx run twenty-server:{command}`).
|
||||
|
||||
### First time setup
|
||||
### Configuration initiale
|
||||
|
||||
```
|
||||
npx nx database:reset twenty-server # setup the database with dev seeds
|
||||
```
|
||||
|
||||
### Starting the server
|
||||
### Démarrer le serveur
|
||||
|
||||
```
|
||||
npx nx run twenty-server:start
|
||||
```
|
||||
|
||||
### Lint
|
||||
### Analyse
|
||||
|
||||
```
|
||||
npx nx run twenty-server:lint # pass --fix to fix lint errors
|
||||
npx nx run twenty-server:lint # passez --fix pour corriger les erreurs de lint
|
||||
```
|
||||
|
||||
### Test
|
||||
@@ -32,11 +32,11 @@ npx nx run twenty-server:test:unit # run unit tests
|
||||
npx nx run twenty-server:test:integration # run integration tests
|
||||
```
|
||||
|
||||
Note: you can run `npx nx run twenty-server:test:integration:with-db-reset` in case you need to reset the database before running the integration tests.
|
||||
Remarque: vous pouvez exécuter `npx nx run twenty-server:test:integration:with-db-reset` si vous avez besoin de réinitialiser la base de données avant de lancer les tests d'intégration.
|
||||
|
||||
### Resetting the database
|
||||
### Réinitialiser la base de données
|
||||
|
||||
If you want to reset and seed the database, you can run the following command:
|
||||
Si vous souhaitez réinitialiser et peupler la base de données, vous pouvez exécuter la commande suivante :
|
||||
|
||||
```bash
|
||||
npx nx run twenty-server:database:reset
|
||||
@@ -44,58 +44,57 @@ npx nx run twenty-server:database:reset
|
||||
|
||||
### Migrations
|
||||
|
||||
#### For objects in Core/Metadata schemas (TypeORM)
|
||||
#### Pour les objets dans les schémas Core/Metadata (TypeORM)
|
||||
|
||||
```bash
|
||||
npx nx run twenty-server:typeorm migration:generate src/database/typeorm/core/migrations/nameOfYourMigration -d src/database/typeorm/core/core.datasource.ts
|
||||
```
|
||||
|
||||
#### For Workspace objects
|
||||
#### Pour les objets de l'Espace de travail
|
||||
|
||||
There are no migrations files, migration are generated automatically for each workspace,
|
||||
stored in the database, and applied with this command
|
||||
Il n'y a pas de fichiers de migrations, les migrations sont générées automatiquement pour chaque espace de travail, stockées dans la base de données et appliquées avec cette commande
|
||||
|
||||
```bash
|
||||
npx nx run twenty-server:command workspace:sync-metadata -f
|
||||
```
|
||||
|
||||
<Warning>
|
||||
This will drop the database and re-run the migrations and seed.
|
||||
Cela supprimera la base de données et réexécutera les migrations et l'initialisation des données.
|
||||
|
||||
Make sure to back up any data you want to keep before running this command.
|
||||
Assurez-vous de sauvegarder toutes les données que vous souhaitez conserver avant d'exécuter cette commande.
|
||||
</Warning>
|
||||
|
||||
## Tech Stack
|
||||
## Écosystème Tech
|
||||
|
||||
Twenty primarily uses NestJS for the backend.
|
||||
Twenty utilise principalement NestJS pour le backend.
|
||||
|
||||
Prisma was the first ORM we used. But in order to allow users to create custom fields and custom objects, a lower-level made more sense as we need to have fine-grained control. The project now uses TypeORM.
|
||||
Prisma a été le premier ORM que nous avons utilisé. Mais pour permettre aux utilisateurs de créer des champs et objets personnalisés, un niveau inférieur avait plus de sens car nous avons besoin d'un contrôle granulaire. Le projet utilise maintenant TypeORM.
|
||||
|
||||
Here's what the tech stack now looks like.
|
||||
Voici à quoi ressemble maintenant la pile technologique.
|
||||
|
||||
**Core**
|
||||
**Noyau**
|
||||
|
||||
* [NestJS](https://nestjs.com/)
|
||||
* [TypeORM](https://typeorm.io/)
|
||||
* [GraphQL Yoga](https://the-guild.dev/graphql/yoga-server)
|
||||
|
||||
**Database**
|
||||
**Base de données**
|
||||
|
||||
* [Postgres](https://www.postgresql.org/)
|
||||
|
||||
**Third-party integrations**
|
||||
**Intégrations tierces**
|
||||
|
||||
* [Sentry](https://sentry.io/welcome/) for tracking bugs
|
||||
* [Sentry](https://sentry.io/welcome/) pour suivre les bugs.
|
||||
|
||||
**Testing**
|
||||
**Tests**
|
||||
|
||||
* [Jest](https://jestjs.io/)
|
||||
|
||||
**Tooling**
|
||||
**Outils**
|
||||
|
||||
* [Yarn](https://yarnpkg.com/)
|
||||
* [ESLint](https://eslint.org/)
|
||||
|
||||
**Development**
|
||||
**Développement**
|
||||
|
||||
* [AWS EKS](https://aws.amazon.com/eks/)
|
||||
|
||||
+20
-20
@@ -1,18 +1,18 @@
|
||||
---
|
||||
title: Zapier App
|
||||
title: Application Zapier
|
||||
---
|
||||
|
||||
Effortlessly sync Twenty with 3000+ apps using [Zapier](https://zapier.com/). Automate tasks, boost productivity, and supercharge your customer relationships!
|
||||
Synchronisez facilement Twenty avec plus de 3000 applications à l'aide de [Zapier](https://zapier.com/). Automatisez les tâches, boostez la productivité et dynamisez vos relations client !
|
||||
|
||||
## About Zapier
|
||||
## À propos de Zapier
|
||||
|
||||
Zapier is a tool that allows you to automate workflows by connecting the apps that your team uses every day. The fundamental concept of Zapier is automation workflows, called Zaps, and include triggers and actions.
|
||||
Zapier est un outil qui vous permet d'automatiser des flux de travail en connectant les applications que votre équipe utilise quotidiennement. Le concept fondamental de Zapier est l'automatisation des flux de travail, appelés Zaps, et inclut des déclencheurs et des actions.
|
||||
|
||||
You can learn more about how Zapier works [here](https://zapier.com/how-it-works).
|
||||
Vous pouvez en savoir plus sur le fonctionnement de Zapier [ici](https://zapier.com/how-it-works).
|
||||
|
||||
## Setup
|
||||
## Installation
|
||||
|
||||
### Step 1: Install Zapier packages
|
||||
### Étape 1 : Installez les packages Zapier
|
||||
|
||||
```bash
|
||||
cd packages/twenty-zapier
|
||||
@@ -20,30 +20,30 @@ cd packages/twenty-zapier
|
||||
yarn
|
||||
```
|
||||
|
||||
### Step 2: Login with the CLI
|
||||
### Étape 2 : Connectez-vous avec le CLI
|
||||
|
||||
Use your Zapier credentials to log in using the CLI:
|
||||
Utilisez vos identifiants Zapier pour vous connecter en utilisant le CLI :
|
||||
|
||||
```bash
|
||||
zapier login
|
||||
```
|
||||
|
||||
### Step 3: Set environment variables
|
||||
### Étape 3 : Configurer les variables d'environnement
|
||||
|
||||
From the `packages/twenty-zapier` folder, run:
|
||||
Depuis le dossier `packages/twenty-zapier`, exécutez :
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Run the application locally, go to [http://localhost:3000/settings/api-webhooks](http://localhost:3000/settings/api-webhooks), and generate an API key.
|
||||
Exécutez l'application localement, rendez-vous sur [http://localhost:3000/settings/api-webhooks](http://localhost:3000/settings/api-webhooks) et générez une clé API.
|
||||
|
||||
Replace the **YOUR_API_KEY** value in the `.env` file with the API key you just generated.
|
||||
Remplacez la valeur **YOUR_API_KEY** dans le fichier `.env` par la clé API que vous venez de générer.
|
||||
|
||||
## Development
|
||||
## Développement
|
||||
|
||||
<Warning>
|
||||
Make sure to run `yarn build` before any `zapier` command.
|
||||
Assurez-vous d'exécuter `yarn build` avant toute commande `zapier`.
|
||||
</Warning>
|
||||
|
||||
### Test
|
||||
@@ -52,31 +52,31 @@ Replace the **YOUR_API_KEY** value in the `.env` file with the API key you just
|
||||
yarn test
|
||||
```
|
||||
|
||||
### Lint
|
||||
### Analyse
|
||||
|
||||
```bash
|
||||
yarn format
|
||||
```
|
||||
|
||||
### Watch and compile as you edit code
|
||||
### Surveillez et compilez pendant que vous éditez le code
|
||||
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
|
||||
### Validate your Zapier app
|
||||
### Validez votre application Zapier
|
||||
|
||||
```bash
|
||||
yarn validate
|
||||
```
|
||||
|
||||
### Deploy your Zapier app
|
||||
### Déployez votre application Zapier
|
||||
|
||||
```bash
|
||||
yarn deploy
|
||||
```
|
||||
|
||||
### List all Zapier CLI commands
|
||||
### Liste de toutes les commandes CLI de Zapier
|
||||
|
||||
```bash
|
||||
zapier
|
||||
|
||||
@@ -1,78 +1,78 @@
|
||||
---
|
||||
title: Bugs, Requests & Pull Requests
|
||||
info: Report issues, request features, and contribute code
|
||||
title: Signalements de bogues, demandes et pull requests
|
||||
info: Signalez des problèmes, demandez des fonctionnalités et contribuez au code
|
||||
---
|
||||
|
||||
## Reporting Bugs
|
||||
## Signaler des bogues
|
||||
|
||||
To report a bug, please [create an issue on GitHub](https://github.com/twentyhq/twenty/issues/new).
|
||||
Pour signaler un bogue, veuillez [créer un problème sur GitHub](https://github.com/twentyhq/twenty/issues/new).
|
||||
|
||||
You can also ask for help on [Discord](https://discord.gg/cx5n4Jzs57).
|
||||
Vous pouvez également demander de l'aide sur [Discord](https://discord.gg/cx5n4Jzs57).
|
||||
|
||||
## Feature Requests
|
||||
## Demandes de fonctionnalités
|
||||
|
||||
If you're not sure if it's a bug, and you feel it's closer to a feature request, then you should probably [open a discussion instead](https://github.com/twentyhq/twenty/discussions/new).
|
||||
Si vous n'êtes pas sûr qu'il s'agisse d'un bogue, et que vous pensez que cela ressemble plus à une demande de fonctionnalité, alors vous devriez probablement [ouvrir une discussion à la place](https://github.com/twentyhq/twenty/discussions/new).
|
||||
|
||||
## Submit a Pull Request
|
||||
## Soumettre une pull request
|
||||
|
||||
Contributing code to Twenty starts with a pull request (PR).
|
||||
La contribution au code de Twenty commence par une pull request (PR).
|
||||
|
||||
### Before You Start
|
||||
### Avant de démarrer
|
||||
|
||||
1. Check [existing issues](https://github.com/twentyhq/twenty/issues) for related work
|
||||
2. For new features, open an issue first to discuss
|
||||
3. Review our [Code of Conduct](https://github.com/twentyhq/twenty/blob/main/CODE_OF_CONDUCT.md)
|
||||
1. Consultez les [problèmes existants](https://github.com/twentyhq/twenty/issues) pour repérer les travaux liés
|
||||
2. Pour les nouvelles fonctionnalités, ouvrez d’abord un problème pour en discuter
|
||||
3. Consultez notre [Code de conduite](https://github.com/twentyhq/twenty/blob/main/CODE_OF_CONDUCT.md)
|
||||
|
||||
### Fork and Clone
|
||||
### Forker et cloner
|
||||
|
||||
1. Fork the repository on GitHub
|
||||
2. Clone your fork:
|
||||
1. Forkez le dépôt sur GitHub
|
||||
2. Clonez votre fork:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/twenty.git
|
||||
cd twenty
|
||||
```
|
||||
|
||||
3. Add upstream remote:
|
||||
3. Ajoutez le remote upstream:
|
||||
|
||||
```bash
|
||||
git remote add upstream https://github.com/twentyhq/twenty.git
|
||||
```
|
||||
|
||||
### Create a Branch
|
||||
### Créer une branche
|
||||
|
||||
```bash
|
||||
git checkout -b feature/your-feature-name
|
||||
```
|
||||
|
||||
Use descriptive branch names:
|
||||
Utilisez des noms de branche descriptifs:
|
||||
|
||||
* `feature/add-export-button`
|
||||
* `fix/login-redirect-issue`
|
||||
* `docs/update-api-guide`
|
||||
|
||||
### Make Your Changes
|
||||
### Apportez vos modifications
|
||||
|
||||
1. Write clean, well-documented code
|
||||
2. Follow existing code style
|
||||
3. Add tests for new functionality
|
||||
4. Update documentation if needed
|
||||
1. Écrivez un code propre et bien documenté
|
||||
2. Suivez le style de code existant
|
||||
3. Ajoutez des tests pour les nouvelles fonctionnalités
|
||||
4. Mettez à jour la documentation si nécessaire
|
||||
|
||||
### Submit Your PR
|
||||
### Soumettez votre PR
|
||||
|
||||
1. Push your branch:
|
||||
1. Poussez votre branche:
|
||||
|
||||
```bash
|
||||
git push origin feature/your-feature-name
|
||||
```
|
||||
|
||||
2. Open a PR on GitHub
|
||||
3. Fill in the PR template
|
||||
4. Link related issues
|
||||
2. Ouvrez une PR sur GitHub
|
||||
3. Remplissez le modèle de PR
|
||||
4. Liez les problèmes associés
|
||||
|
||||
### PR Checklist
|
||||
### Liste de contrôle de la PR
|
||||
|
||||
* [ ] Code follows project style guidelines
|
||||
* [ ] Tests pass locally
|
||||
* [ ] Documentation is updated
|
||||
* [ ] PR description explains the changes
|
||||
* [ ] Le code respecte les directives de style du projet
|
||||
* [ ] Les tests réussissent localement
|
||||
* [ ] La documentation est à jour
|
||||
* [ ] La description de la PR explique les modifications
|
||||
|
||||
+79
-79
@@ -1,19 +1,19 @@
|
||||
---
|
||||
title: Best Practices
|
||||
title: Meilleures pratiques
|
||||
---
|
||||
|
||||
This document outlines the best practices you should follow when working on the frontend.
|
||||
Ce document décrit les meilleures pratiques à suivre lors de votre travail sur l'interface frontend.
|
||||
|
||||
## State management
|
||||
## Gestion de l'état
|
||||
|
||||
React and Recoil handle state management in the codebase.
|
||||
React et Recoil gèrent la gestion de l'état dans la base de code.
|
||||
|
||||
### Use `useRecoilState` to store state
|
||||
### Utilisez `useRecoilState` pour stocker l'état
|
||||
|
||||
It's good practice to create as many atoms as you need to store your state.
|
||||
C'est une bonne pratique de créer autant d'atomes que nécessaire pour stocker votre état.
|
||||
|
||||
<Warning>
|
||||
It's better to use extra atoms than trying to be too concise with props drilling.
|
||||
Il vaut mieux utiliser des atomes supplémentaires plutôt que d'essayer d'être trop concis en perçant les propriétés.
|
||||
</Warning>
|
||||
|
||||
```tsx
|
||||
@@ -36,29 +36,29 @@ export const MyComponent = () => {
|
||||
}
|
||||
```
|
||||
|
||||
### Do not use `useRef` to store state
|
||||
### Ne pas utiliser `useRef` pour stocker l'état
|
||||
|
||||
Avoid using `useRef` to store state.
|
||||
Évitez d'utiliser `useRef` pour stocker l'état.
|
||||
|
||||
If you want to store state, you should use `useState` or `useRecoilState`.
|
||||
|
||||
See [how to manage re-renders](#managing-re-renders) if you feel like you need `useRef` to prevent some re-renders from happening.
|
||||
Consultez [comment gérer les re-rendus](#managing-re-renders) si vous avez l'impression d'avoir besoin de `useRef` pour empêcher certains re-rendus.
|
||||
|
||||
## Managing re-renders
|
||||
## Gestion des re-rendus
|
||||
|
||||
Re-renders can be hard to manage in React.
|
||||
Les re-rendus peuvent être difficiles à gérer dans React.
|
||||
|
||||
Here are some rules to follow to avoid unnecessary re-renders.
|
||||
Voici quelques règles à suivre pour éviter les re-rendus inutiles.
|
||||
|
||||
Keep in mind that you can **always** avoid re-renders by understanding their cause.
|
||||
Gardez à l'esprit que vous pouvez **toujours** éviter les re-rendus en comprenant leur cause.
|
||||
|
||||
### Work at the root level
|
||||
### Travaillez au niveau racine
|
||||
|
||||
Avoiding re-renders in new features is now made easy by eliminating them at the root level.
|
||||
Éviter les re-rendus dans les nouvelles fonctionnalités est désormais facile en les éliminant au niveau racine.
|
||||
|
||||
The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.
|
||||
|
||||
That way you know that there's just one place that can trigger a re-render.
|
||||
De cette manière, vous savez qu'il n'y a qu'un seul endroit qui peut déclencher un re-rendu.
|
||||
|
||||
### Always think twice before adding `useEffect` in your codebase
|
||||
|
||||
@@ -68,17 +68,17 @@ You should think whether you need `useEffect`, or if you can move the logic in a
|
||||
|
||||
You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.
|
||||
|
||||
You can also find them in libraries like Apollo: `onCompleted`, `onError`, etc.
|
||||
Vous pouvez également les trouver dans des bibliothèques comme Apollo : `onCompleted`, `onError`, etc.
|
||||
|
||||
### Use a sibling component to extract `useEffect` or data fetching logic
|
||||
|
||||
If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.
|
||||
|
||||
You can apply the same for data fetching logic, with Apollo hooks.
|
||||
Vous pouvez appliquer la même chose à la logique de récupération de données, avec les hooks Apollo.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, will cause re-renders even if data is not changing,
|
||||
// because useEffect needs to be re-evaluated
|
||||
// ❌ Mauvais, provoquera de nouveaux rendus même si les données ne changent pas,
|
||||
// car useEffect doit être réévalué
|
||||
export const PageComponent = () => {
|
||||
const [data, setData] = useRecoilState(dataState);
|
||||
const [someDependency] = useRecoilState(someDependencyState);
|
||||
@@ -100,8 +100,8 @@ export const App = () => (
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, will not cause re-renders if data is not changing,
|
||||
// because useEffect is re-evaluated in another sibling component
|
||||
// ✅ Bon, ne provoquera pas de nouveaux rendus si les données ne changent pas,
|
||||
// car useEffect est réévalué dans un autre composant frère
|
||||
export const PageComponent = () => {
|
||||
const [data, setData] = useRecoilState(dataState);
|
||||
|
||||
@@ -129,84 +129,84 @@ export const App = () => (
|
||||
);
|
||||
```
|
||||
|
||||
### Use recoil family states and recoil family selectors
|
||||
### Utilisez les états de famille de recoil et les sélecteurs de famille de recoil
|
||||
|
||||
Recoil family states and selectors are a great way to avoid re-renders.
|
||||
Les états et sélecteurs de famille recoil sont un excellent moyen d'éviter les re-rendus.
|
||||
|
||||
They are useful when you need to store a list of items.
|
||||
Ils sont utiles lorsque vous devez stocker une liste d'articles.
|
||||
|
||||
### You shouldn't use `React.memo(MyComponent)`
|
||||
### Vous ne devriez pas utiliser `React.memo(MyComponent)`
|
||||
|
||||
Avoid using `React.memo()` because it does not solve the cause of the re-render, but instead breaks the re-render chain, which can lead to unexpected behavior and make the code very hard to refactor.
|
||||
Évitez d'utiliser `React.memo()` car cela ne résout pas la cause du re-rendu, mais brise plutôt la chaîne de re-rendu, ce qui peut entraîner un comportement inattendu et rendre le code très difficile à refactoriser.
|
||||
|
||||
### Limit `useCallback` or `useMemo` usage
|
||||
### Limitez l'utilisation de `useCallback` ou `useMemo`
|
||||
|
||||
They are often not necessary and will make the code harder to read and maintain for a gain of performance that is unnoticeable.
|
||||
Ils ne sont souvent pas nécessaires et rendront le code plus difficile à lire et à maintenir pour un gain de performance imperceptible.
|
||||
|
||||
## Console.logs
|
||||
|
||||
`console.log` statements are valuable during development, offering real-time insights into variable values and code flow. But, leaving them in production code can lead to several issues:
|
||||
Les déclarations `console.log` sont précieuses pendant le développement, offrant des insights en temps réel sur les valeurs de variables et le flux de code. Mais, les laisser dans le code de production peut entraîner plusieurs problèmes :
|
||||
|
||||
1. **Performance**: Excessive logging can affect the runtime performance, especially on client-side applications.
|
||||
1. **Performance** : Un journalisation excessive peut affecter les performances d'exécution, notamment sur les applications côté client.
|
||||
|
||||
2. **Security**: Logging sensitive data can expose critical information to anyone who inspects the browser's console.
|
||||
2. **Sécurité** : La journalisation de données sensibles peut exposer des informations critiques à toute personne qui inspecte la console du navigateur.
|
||||
|
||||
3. **Cleanliness**: Filling up the console with logs can obscure important warnings or errors that developers or tools need to see.
|
||||
3. **Propreté** : Remplir la console de logs peut masquer les avertissements ou erreurs importants que les développeurs ou outils doivent voir.
|
||||
|
||||
4. **Professionalism**: End users or clients checking the console and seeing a myriad of log statements might question the code's quality and polish.
|
||||
4. **Professionnalisme** : Les utilisateurs finaux ou clients vérifiant la console et voyant une myriade de déclarations de log pourraient remettre en question la qualité et la finition du code.
|
||||
|
||||
Make sure you remove all `console.logs` before pushing the code to production.
|
||||
Assurez-vous de supprimer tous les `console.logs` avant de pousser le code en production.
|
||||
|
||||
## Naming
|
||||
## Nommage
|
||||
|
||||
### Variable Naming
|
||||
### Nom des variables
|
||||
|
||||
Variable names ought to precisely depict the purpose or function of the variable.
|
||||
Les noms de variables doivent décrire précisément l'objectif ou la fonction de la variable.
|
||||
|
||||
#### The issue with generic names
|
||||
#### Le problème avec les noms génériques
|
||||
|
||||
Generic names in programming are not ideal because they lack specificity, leading to ambiguity and reduced code readability. Such names fail to convey the variable or function's purpose, making it challenging for developers to understand the code's intent without deeper investigation. This can result in increased debugging time, higher susceptibility to errors, and difficulties in maintenance and collaboration. Meanwhile, descriptive naming makes the code self-explanatory and easier to navigate, enhancing code quality and developer productivity.
|
||||
Les noms génériques en programmation ne sont pas idéaux car ils manquent de spécificité, ce qui conduit à une ambiguïté et réduit la lisibilité du code. De tels noms ne parviennent pas à transmettre l'objectif de la variable ou de la fonction, rendant difficile pour les développeurs de comprendre l'intention du code sans une enquête plus approfondie. Cela peut entraîner un temps de débogage accru, une plus grande vulnérabilité aux erreurs et des difficultés de maintenance et de collaboration. Pendant ce temps, des noms descriptifs rendent le code explicite et plus facile à naviguer, améliorant la qualité du code et la productivité des développeurs.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, uses a generic name that doesn't communicate its
|
||||
// purpose or content clearly
|
||||
// ❌ Mauvais, utilise un nom générique qui ne communique pas clairement son
|
||||
// objectif ou son contenu
|
||||
const [value, setValue] = useState('');
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, uses a descriptive name
|
||||
// ✅ Bon, utilise un nom descriptif
|
||||
const [email, setEmail] = useState('');
|
||||
```
|
||||
|
||||
#### Some words to avoid in variable names
|
||||
#### Certains mots à éviter dans les noms de variables
|
||||
|
||||
* dummy
|
||||
* factice
|
||||
|
||||
### Event handlers
|
||||
### Gestionnaires d'événements
|
||||
|
||||
Event handler names should start with `handle`, while `on` is a prefix used to name events in components props.
|
||||
Les noms des gestionnaires d'événements doivent commencer par `handle`, tandis que `on` est un préfixe utilisé pour nommer les événements dans les propriétés des composants.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
// ❌ Mauvais
|
||||
const onEmailChange = (val: string) => {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good
|
||||
// ✅ Bon
|
||||
const handleEmailChange = (val: string) => {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## Optional Props
|
||||
## Props optionnels
|
||||
|
||||
Avoid passing the default value for an optional prop.
|
||||
Évitez de passer la valeur par défaut pour un prop optionnel.
|
||||
|
||||
**EXAMPLE**
|
||||
**EXEMPLE**
|
||||
|
||||
Take the`EmailField` component defined below:
|
||||
Prenez le composant`EmailField` défini ci-dessous :
|
||||
|
||||
```tsx
|
||||
type EmailFieldProps = {
|
||||
@@ -219,28 +219,28 @@ const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
|
||||
);
|
||||
```
|
||||
|
||||
**Usage**
|
||||
**Utilisation**
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, passing in the same value as the default value adds no value
|
||||
// ❌ Mauvais, passer la même valeur que la valeur par défaut n'apporte rien
|
||||
const Form = () => <EmailField value="username@email.com" disabled={false} />;
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, assumes the default value
|
||||
// ✅ Bon, s'appuie sur la valeur par défaut
|
||||
const Form = () => <EmailField value="username@email.com" />;
|
||||
```
|
||||
|
||||
## Component as props
|
||||
## Composant en tant que props
|
||||
|
||||
Try as much as possible to pass uninstantiated components as props, so children can decide on their own of what props they need to pass.
|
||||
Essayez autant que possible de transmettre des composants non instanciés comme props, afin que les enfants puissent décider eux-mêmes des props qu'ils ont besoin de passer.
|
||||
|
||||
The most common example for that is icon components:
|
||||
L'exemple le plus courant pour cela est les composants icône :
|
||||
|
||||
```tsx
|
||||
const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;
|
||||
|
||||
// In MyComponent
|
||||
// Dans MyComponent
|
||||
const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
@@ -252,25 +252,25 @@ const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
|
||||
};
|
||||
```
|
||||
|
||||
For React to understand that the component is a component, you need to use PascalCase, to later instantiate it with `<MyIcon>`
|
||||
Pour que React comprenne qu'un composant est un composant, vous devez utiliser PascalCase, pour l'instancier plus tard avec `<MyIcon>`
|
||||
|
||||
## Prop Drilling: Keep It Minimal
|
||||
## Forage de Props : Gardez-le Minimal
|
||||
|
||||
Prop drilling, in the React context, refers to the practice of passing state variables and their setters through many component layers, even if intermediary components don't use them. While sometimes necessary, excessive prop drilling can lead to:
|
||||
Le forage de props, dans le contexte de React, fait référence à la pratique consistant à passer des variables d'état et leurs setters à travers de nombreuses couches de composants, même si les composants intermédiaires ne les utilisent pas. Bien que parfois nécessaire, un forage de props excessif peut entraîner :
|
||||
|
||||
1. **Decreased Readability**: Tracing where a prop originates or where it's utilized can become convoluted in a deeply nested component structure.
|
||||
1. **Lisibilité Réduite** : Retrouver l'origine d'un prop ou l'endroit où il est utilisé peut devenir complexe dans une structure de composants profondément imbriquée.
|
||||
|
||||
2. **Maintenance Challenges**: Changes in one component's prop structure might require adjustments in several components, even if they don't directly use the prop.
|
||||
2. **Défis de Maintenance** : Des modifications dans la structure des props d'un composant peuvent nécessiter des ajustements dans plusieurs composants, même s'ils n'utilisent pas directement le prop.
|
||||
|
||||
3. **Reduced Component Reusability**: A component receiving a lot of props solely for passing them down becomes less general-purpose and harder to reuse in different contexts.
|
||||
3. **Réutilisabilité Réduite du Composant** : Un composant recevant beaucoup de props uniquement pour les transmettre devient moins polyvalent et plus difficile à réutiliser dans différents contextes.
|
||||
|
||||
If you feel that you are using excessive prop drilling, see [state management best practices](#state-management).
|
||||
Si vous sentez que vous utilisez un forage de props excessif, voir [les meilleures pratiques de gestion d'état](#state-management).
|
||||
|
||||
## Imports
|
||||
|
||||
When importing, opt for the designated aliases rather than specifying complete or relative paths.
|
||||
Lors de l'importation, optez pour les alias désignés plutôt que de spécifier des chemins complets ou relatifs.
|
||||
|
||||
**The Aliases**
|
||||
**Les Alias**
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -282,10 +282,10 @@ When importing, opt for the designated aliases rather than specifying complete o
|
||||
}
|
||||
```
|
||||
|
||||
**Usage**
|
||||
**Utilisation**
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, specifies the entire relative path
|
||||
// ❌ Mauvais, spécifie l'intégralité du chemin relatif
|
||||
import {
|
||||
CatalogDecorator
|
||||
} from '../../../../../testing/decorators/CatalogDecorator';
|
||||
@@ -295,14 +295,14 @@ import {
|
||||
```
|
||||
|
||||
```tsx
|
||||
// ✅ Good, utilises the designated aliases
|
||||
// ✅ Bon, utilise les alias désignés
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from 'twenty-ui/testing';
|
||||
```
|
||||
|
||||
## Schema Validation
|
||||
## Validation de Schéma
|
||||
|
||||
[Zod](https://github.com/colinhacks/zod) is the schema validator for untyped objects:
|
||||
[Zod](https://github.com/colinhacks/zod) est le validateur de schéma pour les objets non typés:
|
||||
|
||||
```js
|
||||
const validationSchema = z
|
||||
@@ -310,16 +310,16 @@ const validationSchema = z
|
||||
exist: z.boolean(),
|
||||
email: z
|
||||
.string()
|
||||
.email('Email must be a valid email'),
|
||||
.email('L\'adresse e-mail doit être valide'),
|
||||
password: z
|
||||
.string()
|
||||
.regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
|
||||
.regex(PASSWORD_REGEX, 'Le mot de passe doit contenir au moins 8 caractères'),
|
||||
})
|
||||
.required();
|
||||
|
||||
type Form = z.infer<typeof validationSchema>;
|
||||
```
|
||||
|
||||
## Breaking Changes
|
||||
## Changements Radicaux
|
||||
|
||||
Always perform thorough manual testing before proceeding to guarantee that modifications haven’t caused disruptions elsewhere, given that tests have not yet been extensively integrated.
|
||||
Effectuez toujours des tests manuels approfondis avant de continuer pour garantir que les modifications n'ont pas causé de perturbations ailleurs, étant donné que les tests n'ont pas encore été intégrés de manière extensive.
|
||||
|
||||
+31
-31
@@ -1,11 +1,11 @@
|
||||
---
|
||||
title: Folder Architecture
|
||||
info: A detailed look into our folder architecture
|
||||
title: Architecture des Dossiers
|
||||
info: Un aperçu détaillé de notre architecture de dossiers
|
||||
---
|
||||
|
||||
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
|
||||
Dans ce guide, vous explorerez les détails de la structure du répertoire de projet et comment elle contribue à l'organisation et à la maintenabilité de Twenty.
|
||||
|
||||
By following this folder architecture convention, it's easier to find the files related to specific features and ensure that the application is scalable and maintainable.
|
||||
En suivant cette convention d'architecture de dossiers, il est plus facile de trouver les fichiers liés à des fonctionnalités spécifiques et de s'assurer que l'application est évolutive et maintenable.
|
||||
|
||||
```
|
||||
front
|
||||
@@ -24,12 +24,12 @@ front
|
||||
|
||||
## Pages
|
||||
|
||||
Includes the top-level components defined by the application routes. They import more low-level components from the modules folder (more details below).
|
||||
Comprend les composants de haut niveau définis par les routes de l'application. Ils importent des composants de plus bas niveau depuis le dossier `modules` (plus de détails ci-dessous).
|
||||
|
||||
## Modules
|
||||
|
||||
Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
|
||||
They should all follow the structure below. You can nest modules within modules (referred to as submodules) and the same rules will apply.
|
||||
Chaque module représente une fonctionnalité ou un groupe de fonctionnalités, comprenant ses composants spécifiques, ses états, et sa logique opérationnelle.
|
||||
Ils doivent tous suivre la structure ci-dessous. Vous pouvez imbriquer des modules dans des modules (appelés sous-modules) et les mêmes règles s'appliqueront.
|
||||
|
||||
```
|
||||
module1
|
||||
@@ -50,60 +50,60 @@ module1
|
||||
└───utils
|
||||
```
|
||||
|
||||
### Contexts
|
||||
### Contextes
|
||||
|
||||
A context is a way to pass data through the component tree without having to pass props down manually at every level.
|
||||
Un contexte est un moyen de transmettre des données à travers l'arborescence de composants sans avoir à transmettre les propriétés manuellement à chaque niveau.
|
||||
|
||||
See [React Context](https://react.dev/reference/react#context-hooks) for more details.
|
||||
Voir [React Context](https://react.dev/reference/react#context-hooks) pour plus de détails.
|
||||
|
||||
### GraphQL
|
||||
|
||||
Includes fragments, queries, and mutations.
|
||||
Comprend des fragments, des requêtes et des mutations.
|
||||
|
||||
See [GraphQL](https://graphql.org/learn/) for more details.
|
||||
Voir [GraphQL](https://graphql.org/learn/) pour plus de détails.
|
||||
|
||||
* Fragments
|
||||
|
||||
A fragment is a reusable piece of a query, which you can use in different places. By using fragments, it's easier to avoid duplicating code.
|
||||
Un fragment est une partie réutilisable d'une requête, que vous pouvez utiliser dans différents endroits. En utilisant des fragments, il est plus facile d'éviter de dupliquer du code.
|
||||
|
||||
See [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) for more details.
|
||||
Voir [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) pour plus de détails.
|
||||
|
||||
* Queries
|
||||
* Requêtes
|
||||
|
||||
See [GraphQL Queries](https://graphql.org/learn/queries/) for more details.
|
||||
Voir [GraphQL Queries](https://graphql.org/learn/queries/) pour plus de détails.
|
||||
|
||||
* Mutations
|
||||
|
||||
See [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) for more details.
|
||||
Voir [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) pour plus de détails.
|
||||
|
||||
### Hooks
|
||||
|
||||
See [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for more details.
|
||||
Voir [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) pour plus de détails.
|
||||
|
||||
### States
|
||||
### États
|
||||
|
||||
Contains the state management logic. [RecoilJS](https://recoiljs.org) handles this.
|
||||
Contient la logique de gestion des états. [RecoilJS](https://recoiljs.org) gère cela.
|
||||
|
||||
* Selectors: See [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) for more details.
|
||||
* Sélecteurs : Voir [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) pour plus de détails.
|
||||
|
||||
React's built-in state management still handles state within a component.
|
||||
La gestion de l'état intégrée de React gère toujours l'état au sein d'un composant.
|
||||
|
||||
### Utils
|
||||
### Utilitaires
|
||||
|
||||
Should just contain reusable pure functions. Otherwise, create custom hooks in the `hooks` folder.
|
||||
Devrait juste contenir des fonctions pures réutilisables. Autrement, créez des hooks personnalisés dans le dossier `hooks`.
|
||||
|
||||
## UI
|
||||
|
||||
Contains all the reusable UI components used in the application.
|
||||
Contient tous les composants d'interface utilisateur réutilisables utilisés dans l'application.
|
||||
|
||||
This folder can contain sub-folders, like `data`, `display`, `feedback`, and `input` for specific types of components. Each component should be self-contained and reusable, so that you can use it in different parts of the application.
|
||||
Ce dossier peut contenir des sous-dossiers, comme `data`, `display`, `feedback`, et `input` pour des types de composants spécifiques. Chaque composant doit être autonome et réutilisable, de sorte que vous puissiez l'utiliser dans différentes parties de l'application.
|
||||
|
||||
By separating the UI components from the other components in the `modules` folder, it's easier to maintain a consistent design and to make changes to the UI without affecting other parts (business logic) of the codebase.
|
||||
En séparant les composants UI des autres composants dans le dossier `modules`, il est plus facile de maintenir un design cohérent et d'effectuer des changements de l'interface utilisateur sans affecter d'autres parties (logique métier) de la base de code.
|
||||
|
||||
## Interface and dependencies
|
||||
## Interface et dépendances
|
||||
|
||||
You can import other module code from any module except for the `ui` folder. This will keep its code easy to test.
|
||||
Vous pouvez importer le code d'autres modules depuis n'importe quel module, sauf le dossier `ui`. Cela permettra de garder son code facile à tester.
|
||||
|
||||
### Internal
|
||||
### Interne
|
||||
|
||||
Each part (hooks, states, ...) of a module can have an `internal` folder, which contains parts that are just used within the module.
|
||||
Chaque partie (hooks, états, ...) d'un module peut avoir un dossier `internal`, qui contient des parties utilisées uniquement au sein du module.
|
||||
|
||||
+21
-21
@@ -1,34 +1,34 @@
|
||||
---
|
||||
title: Frontend Commands
|
||||
title: Commandes Frontend
|
||||
---
|
||||
|
||||
## Useful commands
|
||||
## Commandes utiles
|
||||
|
||||
### Starting the app
|
||||
### Lancement de l'application
|
||||
|
||||
```bash
|
||||
npx nx start twenty-front
|
||||
```
|
||||
|
||||
### Regenerate graphql schema based on API graphql schema
|
||||
### 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
|
||||
```
|
||||
|
||||
OR
|
||||
OU
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:graphql:generate
|
||||
```
|
||||
|
||||
### Lint
|
||||
### Analyse
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:lint # pass --fix to fix lint errors
|
||||
```
|
||||
|
||||
## Translations
|
||||
## Traductions
|
||||
|
||||
```bash
|
||||
npx nx run twenty-front:lingui:extract
|
||||
@@ -44,11 +44,11 @@ npx nx run twenty-front:storybook:test # run tests # (needs yarn storybook:serve
|
||||
npx nx run twenty-front:storybook:coverage # (needs yarn storybook:serve:dev to be running)
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
## Écosystème Tech
|
||||
|
||||
The project has a clean and simple stack, with minimal boilerplate code.
|
||||
Le projet a une stack simple et propre, avec un code boilerplate minimal.
|
||||
|
||||
**App**
|
||||
**Application**
|
||||
|
||||
* [React](https://react.dev/)
|
||||
* [Apollo](https://www.apollographql.com/docs/)
|
||||
@@ -56,12 +56,12 @@ The project has a clean and simple stack, with minimal boilerplate code.
|
||||
* [Recoil](https://recoiljs.org/docs/introduction/core-concepts)
|
||||
* [TypeScript](https://www.typescriptlang.org/)
|
||||
|
||||
**Testing**
|
||||
**Tests**
|
||||
|
||||
* [Jest](https://jestjs.io/)
|
||||
* [Storybook](https://storybook.js.org/)
|
||||
|
||||
**Tooling**
|
||||
**Outils**
|
||||
|
||||
* [Yarn](https://yarnpkg.com/)
|
||||
* [Craco](https://craco.js.org/docs/)
|
||||
@@ -69,22 +69,22 @@ The project has a clean and simple stack, with minimal boilerplate code.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Routing
|
||||
### Routage
|
||||
|
||||
[React Router](https://reactrouter.com/) handles the routing.
|
||||
[React Router](https://reactrouter.com/) gère le routage.
|
||||
|
||||
To avoid unnecessary [re-renders](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.
|
||||
|
||||
### State Management
|
||||
### Gestion de l'État
|
||||
|
||||
[Recoil](https://recoiljs.org/docs/introduction/core-concepts) handles state management.
|
||||
[Recoil](https://recoiljs.org/docs/introduction/core-concepts) gère la gestion de l'état.
|
||||
|
||||
See [best practices](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) for more information on state management.
|
||||
Voir [les meilleures pratiques](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) pour plus d'informations sur la gestion de l'état.
|
||||
|
||||
## Testing
|
||||
## Tests
|
||||
|
||||
[Jest](https://jestjs.io/) serves as the tool for unit testing while [Storybook](https://storybook.js.org/) is for component testing.
|
||||
[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 is mainly for testing utility functions, and not components themselves.
|
||||
Jest est principalement utilisé pour tester les fonctions utilitaires, et non les composants eux-mêmes.
|
||||
|
||||
Storybook is for testing the behavior of isolated components, as well as displaying the design system.
|
||||
Storybook est utilisé pour tester le comportement des composants isolés, ainsi que pour afficher le système de design.
|
||||
|
||||
+37
-37
@@ -1,42 +1,42 @@
|
||||
---
|
||||
title: Hotkeys
|
||||
title: Raccourcis clavier
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
When you need to listen to a hotkey, you would normally use the `onKeyDown` event listener.
|
||||
Lorsque vous devez écouter une touche de raccourci, vous utilisez normalement l'événement `onKeyDown`.
|
||||
|
||||
In `twenty-front` however, you might have conflicts between same hotkeys that are used in different components, mounted at the same time.
|
||||
Cependant, dans `twenty-front`, vous pourriez avoir des conflits entre les mêmes raccourcis utilisés dans différents composants, montés en même temps.
|
||||
|
||||
For example, if you have a page that listens for the Enter key, and a modal that listens for the Enter key, with a Select component inside that modal that listens for the Enter key, you might have a conflict when all are mounted at the same time.
|
||||
Par exemple, si vous avez une page qui écoute la touche Entrée, et une fenêtre modale qui écoute aussi la touche Entrée, avec un composant Select à l'intérieur de cette fenêtre qui écoute également la touche Entrée, vous risquez d'avoir un conflit lorsque tous sont montés en même temps.
|
||||
|
||||
## The `useScopedHotkeys` hook
|
||||
## Le hook `useScopedHotkeys`
|
||||
|
||||
To handle this problem, we have a custom hook that makes it possible to listen to hotkeys without any conflict.
|
||||
Pour résoudre ce problème, nous avons un hook personnalisé qui permet d'écouter les raccourcis sans aucun conflit.
|
||||
|
||||
You place it in a component, and it will listen to the hotkeys only when the component is mounted AND when the specified **hotkey scope** is active.
|
||||
Vous l'insérez dans un composant et il écoutera les raccourcis uniquement lorsque le composant est monté ET lorsque le **périmètre du raccourci** spécifié est actif.
|
||||
|
||||
## How to listen for hotkeys in practice?
|
||||
## Comment écouter les raccourcis en pratique ?
|
||||
|
||||
There are two steps involved in setting up hotkey listening :
|
||||
Deux étapes sont nécessaires pour configurer l'écoute des raccourcis :
|
||||
|
||||
1. Set the [hotkey scope](#what-is-a-hotkey-scope-) that will listen to hotkeys
|
||||
2. Use the `useScopedHotkeys` hook to listen to hotkeys
|
||||
1. Définir le [périmètre du raccourci](#what-is-a-hotkey-scope-) qui écoutera les raccourcis
|
||||
2. Utiliser le hook `useScopedHotkeys` pour écouter les raccourcis
|
||||
|
||||
Setting up hotkey scopes is required even in simple pages, because other UI elements like left menu or command menu might also listen to hotkeys.
|
||||
La configuration des périmètres de raccourcis est nécessaire même sur des pages simples, car d'autres éléments de l'interface utilisateur comme le menu de gauche ou le menu de commandes pourraient également écouter les raccourcis.
|
||||
|
||||
## Use cases for hotkeys
|
||||
## Cas d'utilisation des raccourcis
|
||||
|
||||
In general, you'll have two use cases that require hotkeys :
|
||||
En général, vous aurez deux cas d'utilisation nécessitant des raccourcis :
|
||||
|
||||
1. In a page or a component mounted in a page
|
||||
2. In a modal-type component that takes the focus due to a user action
|
||||
1. Dans une page ou un composant monté dans une page
|
||||
2. Dans un composant de type modal qui prend le focus à la suite d'une action utilisateur
|
||||
|
||||
The second use case can happen recursively : a dropdown in a modal for example.
|
||||
Le deuxième cas d'utilisation peut se produire de manière récursive : un menu déroulant dans une fenêtre modale par exemple.
|
||||
|
||||
### Listening to hotkeys in a page
|
||||
### Écouter les raccourcis dans une page
|
||||
|
||||
Example :
|
||||
Exemple :
|
||||
|
||||
```tsx
|
||||
const PageListeningEnter = () => {
|
||||
@@ -71,11 +71,11 @@ const PageListeningEnter = () => {
|
||||
};
|
||||
```
|
||||
|
||||
### Listening to hotkeys in a modal-type component
|
||||
### Écouter les raccourcis dans un composant de type modal
|
||||
|
||||
For this example we'll use a modal component that listens for the Escape key to tell its parent to close it.
|
||||
Pour cet exemple, nous allons utiliser un composant modal qui écoute la touche Échap pour informer son parent de le fermer.
|
||||
|
||||
Here the user interaction is changing the scope.
|
||||
Ici, l'interaction utilisateur change le périmètre.
|
||||
|
||||
```tsx
|
||||
const ExamplePageWithModal = () => {
|
||||
@@ -108,13 +108,13 @@ const ExamplePageWithModal = () => {
|
||||
};
|
||||
```
|
||||
|
||||
Then in the modal component :
|
||||
Ensuite, dans le composant modal :
|
||||
|
||||
```tsx
|
||||
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
|
||||
// 2. Use the useScopedHotkeys hook to listen for Escape.
|
||||
// Note that escape is a common hotkey that could be used by many other components
|
||||
// So it's important to use a hotkey scope to avoid conflicts
|
||||
// 2. Utilisez le hook useScopedHotkeys pour écouter la touche Échap.
|
||||
// Notez que la touche Échap est un raccourci courant qui peut être utilisé par de nombreux autres composants
|
||||
// Il est donc important d'utiliser une portée de raccourci clavier pour éviter les conflits
|
||||
useScopedHotkeys(
|
||||
Key.Escape,
|
||||
() => {
|
||||
@@ -123,7 +123,7 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
|
||||
ExampleHotkeyScopes.ExampleModal,
|
||||
);
|
||||
|
||||
return <div>My modal component</div>;
|
||||
return <div>Mon composant modal</div>;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -131,15 +131,15 @@ It's important to use this pattern when you're not sure that just using a useEff
|
||||
|
||||
Those conflicts can be hard to debug, and it might happen more often than not with useEffects.
|
||||
|
||||
## What is a hotkey scope?
|
||||
## Qu'est-ce qu'un périmètre de raccourci ?
|
||||
|
||||
A hotkey scope is a string that represents a context in which the hotkeys are active. It is generally encoded as an enum.
|
||||
Un périmètre de raccourci est une chaîne de caractères qui représente un contexte dans lequel les raccourcis sont actifs. Il est généralement encodé sous forme d'enum.
|
||||
|
||||
When you change the hotkey scope, the hotkeys that are listening to this scope will be enabled and the hotkeys that are listening to other scopes will be disabled.
|
||||
Lorsque vous modifiez le périmètre de raccourci, les raccourcis qui écoutent ce périmètre seront activés et ceux qui écoutent d'autres périmètres seront désactivés.
|
||||
|
||||
You can set only one scope at a time.
|
||||
Vous ne pouvez définir qu'un seul périmètre à la fois.
|
||||
|
||||
As an example, the hotkey scopes for each page are defined in the `PageHotkeyScope` enum:
|
||||
Par exemple, les périmètres de raccourcis pour chaque page sont définis dans l'`enum PageHotkeyScope` :
|
||||
|
||||
```tsx
|
||||
export enum PageHotkeyScope {
|
||||
@@ -160,7 +160,7 @@ export enum PageHotkeyScope {
|
||||
}
|
||||
```
|
||||
|
||||
Internally, the currently selected scope is stored in a Recoil state that is shared across the application :
|
||||
En interne, le périmètre sélectionné est stocké dans un état Recoil qui est partagé dans toute l'application :
|
||||
|
||||
```tsx
|
||||
export const currentHotkeyScopeState = createState<HotkeyScope>({
|
||||
@@ -169,10 +169,10 @@ export const currentHotkeyScopeState = createState<HotkeyScope>({
|
||||
});
|
||||
```
|
||||
|
||||
But this Recoil state should never be handled manually ! We'll see how to use it in the next section.
|
||||
Mais cet état Recoil ne doit jamais être manipulé manuellement ! Nous verrons comment l'utiliser dans la prochaine section.
|
||||
|
||||
## How is it working internally?
|
||||
## Comment cela fonctionne-t-il en interne ?
|
||||
|
||||
We made a thin wrapper on top of [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) that makes it more performant and avoids unnecessary re-renders.
|
||||
Nous avons créé un léger emballage au-dessus de [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) qui le rend plus performant et évite les rendus inutiles.
|
||||
|
||||
We also create a Recoil state to handle the hotkey scope state and make it available everywhere in the application.
|
||||
Nous créons également un état Recoil pour gérer l'état du périmètre des raccourcis et le rendre disponible partout dans l'application.
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Storybook
|
||||
description: Browse Twenty's UI component library
|
||||
description: Parcourir la bibliothèque de composants UI de Twenty
|
||||
---
|
||||
|
||||
View our complete component library and documentation in Storybook.
|
||||
Consultez notre bibliothèque de composants complète et la documentation dans Storybook.
|
||||
|
||||
[Open Storybook →](https://storybook.twenty.com)
|
||||
[Ouvrir Storybook →](https://storybook.twenty.com)
|
||||
|
||||
+64
-65
@@ -1,24 +1,24 @@
|
||||
---
|
||||
title: Style Guide
|
||||
title: Guide de style
|
||||
---
|
||||
|
||||
This document includes the rules to follow when writing code.
|
||||
Ce document inclut les règles à suivre lors de l'écriture de code.
|
||||
|
||||
The goal here is to have a consistent codebase, which is easy to read and easy to maintain.
|
||||
L'objectif ici est d'avoir une base de code cohérente, facile à lire et à maintenir.
|
||||
|
||||
For this, it's better to be a bit more verbose than to be too concise.
|
||||
Pour cela, il vaut mieux être un peu plus verbeux que trop concis.
|
||||
|
||||
Always keep in mind that people read code more often than they write it, specially on an open source project, where anyone can contribute.
|
||||
Gardez toujours à l'esprit que les gens lisent le code plus souvent qu'ils ne l'écrivent, surtout dans un projet open source où tout le monde peut contribuer.
|
||||
|
||||
There are a lot of rules that are not defined here, but that are automatically checked by linters.
|
||||
Il existe de nombreuses règles qui ne sont pas définies ici, mais qui sont vérifiées automatiquement par des linters.
|
||||
|
||||
## React
|
||||
|
||||
### Use functional components
|
||||
### Utilisez des composants fonctionnels
|
||||
|
||||
Always use TSX functional components.
|
||||
Utilisez toujours des composants fonctionnels TSX.
|
||||
|
||||
Do not use default `import` with `const`, because it's harder to read and harder to import with code completion.
|
||||
N'utilisez pas `import` par défaut avec `const`, car c'est plus difficile à lire et plus difficile à importer avec l'autocomplétion du code.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, harder to read, harder to import with code completion
|
||||
@@ -34,11 +34,11 @@ export function MyComponent() {
|
||||
};
|
||||
```
|
||||
|
||||
### Props
|
||||
### Propriétés
|
||||
|
||||
Create the type of the props and call it `(ComponentName)Props` if there's no need to export it.
|
||||
Créez le type des props et nommez-le `(NomDuComposant)Props` s'il n'est pas nécessaire de l'exporter.
|
||||
|
||||
Use props destructuring.
|
||||
Utilisez la déstructuration des props.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, no type
|
||||
@@ -52,7 +52,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
#### Refrain from using `React.FC` or `React.FunctionComponent` to define prop types
|
||||
#### Évitez d'utiliser `React.FC` ou `React.FunctionComponent` pour définir les types de props.
|
||||
|
||||
```tsx
|
||||
/* ❌ - Bad, defines the component type annotations with `FC`
|
||||
@@ -67,10 +67,10 @@ const EmailField: React.FC<{
|
||||
```
|
||||
|
||||
```tsx
|
||||
/* ✅ - Good, a separate type (OwnProps) is explicitly defined for the
|
||||
* component's props
|
||||
* - This method doesn't automatically include the children prop. If
|
||||
* you want to include it, you have to specify it in OwnProps.
|
||||
/* ✅ - Bon, un type séparé (OwnProps) est explicitement défini pour les
|
||||
* props du composant
|
||||
* - Cette méthode ne comprend pas automatiquement la prop children. Si
|
||||
* vous souhaitez l'inclure, vous devez la spécifier dans OwnProps.
|
||||
*/
|
||||
type EmailFieldProps = {
|
||||
value: string;
|
||||
@@ -81,9 +81,9 @@ const EmailField = ({ value }: EmailFieldProps) => (
|
||||
);
|
||||
```
|
||||
|
||||
#### No Single Variable Prop Spreading in JSX Elements
|
||||
#### Pas de propagation de props à variable unique dans les éléments JSX
|
||||
|
||||
Avoid using single variable prop spreading in JSX elements, like `{...props}`. This practice often results in code that is less readable and harder to maintain because it's unclear which props the component is receiving.
|
||||
Évitez d'utiliser la propagation de props à variable unique dans les éléments JSX, comme `{...props}`. Cette pratique résulte souvent en un code moins lisible et plus difficile à maintenir car il n'est pas clair quels props le composant reçoit.
|
||||
|
||||
```tsx
|
||||
/* ❌ - Bad, spreads a single variable prop into the underlying component
|
||||
@@ -94,23 +94,23 @@ const MyComponent = (props: OwnProps) => {
|
||||
```
|
||||
|
||||
```tsx
|
||||
/* ✅ - Good, Explicitly lists all props
|
||||
* - Enhances readability and maintainability
|
||||
/* ✅ - Bon, liste explicitement tous les props
|
||||
* - Améliore la lisibilité et la maintenabilité
|
||||
*/
|
||||
const MyComponent = ({ prop1, prop2, prop3 }: MyComponentProps) => {
|
||||
return <OtherComponent {...{ prop1, prop2, prop3 }} />;
|
||||
};
|
||||
```
|
||||
|
||||
Rationale:
|
||||
Raisonnement :
|
||||
|
||||
* At a glance, it's clearer which props the code passes down, making it easier to understand and maintain.
|
||||
* It helps to prevent tight coupling between components via their props.
|
||||
* Linting tools make it easier to identify misspelled or unused props when you list props explicitly.
|
||||
* D'un coup d'œil, il est plus clair quels props le code transmet, le rendant plus facile à comprendre et à maintenir.
|
||||
* Cela aide à éviter le couplage serré entre les composants via leurs props.
|
||||
* Les outils de linting facilitent l'identification des props mal orthographiés ou inutilisées lorsque vous listez explicitement les props.
|
||||
|
||||
## JavaScript
|
||||
|
||||
### Use nullish-coalescing operator `??`
|
||||
### Utilisez l'opérateur de coalescence nulle `??`
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, can return 'default' even if value is 0 or ''
|
||||
@@ -120,21 +120,21 @@ const value = process.env.MY_VALUE || 'default';
|
||||
const value = process.env.MY_VALUE ?? 'default';
|
||||
```
|
||||
|
||||
### Use optional chaining `?.`
|
||||
### Utilisez la chaîne facultative `?.`
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
// ❌ Mauvais
|
||||
onClick && onClick();
|
||||
|
||||
// ✅ Good
|
||||
// ✅ Bon
|
||||
onClick?.();
|
||||
```
|
||||
|
||||
## TypeScript
|
||||
|
||||
### Use `type` instead of `interface`
|
||||
### Utilisez `type` au lieu de `interface`
|
||||
|
||||
Always use `type` instead of `interface`, because they almost always overlap, and `type` is more flexible.
|
||||
Utilisez toujours `type` au lieu de `interface`, car ils se chevauchent presque toujours, et `type` est plus flexible.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -148,11 +148,11 @@ type MyType = {
|
||||
};
|
||||
```
|
||||
|
||||
### Use string literals instead of enums
|
||||
### Utilisez des littéraux de chaîne au lieu d'enums
|
||||
|
||||
[String literals](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) are the go-to way to handle enum-like values in TypeScript. They are easier to extend with Pick and Omit, and offer a better developer experience, specially with code completion.
|
||||
[Les littéraux de chaîne](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) sont la méthode de référence pour gérer des valeurs semblables à des enums dans TypeScript. Ils sont plus faciles à étendre avec Pick et Omit, et offrent une meilleure expérience pour le développeur, notamment avec l'autocompletion de code.
|
||||
|
||||
You can see why TypeScript recommends avoiding enums [here](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums).
|
||||
Vous pouvez voir pourquoi TypeScript recommande d'éviter les enums [ici](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums).
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, utilizes an enum
|
||||
@@ -171,13 +171,13 @@ let color = Color.Red;
|
||||
let color: "red" | "green" | "blue" = "red";
|
||||
```
|
||||
|
||||
#### GraphQL and internal libraries
|
||||
#### GraphQL et bibliothèques internes
|
||||
|
||||
You should use enums that GraphQL codegen generates.
|
||||
Vous devriez utiliser les enums générés par le codegen GraphQL.
|
||||
|
||||
It's also better to use an enum when using an internal library, so the internal library doesn't have to expose a string literal type that is not related to the internal API.
|
||||
Il est également préférable d'utiliser un enum lors de l'utilisation d'une bibliothèque interne, afin que la bibliothèque interne n'ait pas à exposer un type de littéral de chaîne qui n'est pas lié à l'API interne.
|
||||
|
||||
Example:
|
||||
Exemple :
|
||||
|
||||
```TSX
|
||||
const {
|
||||
@@ -190,11 +190,11 @@ setHotkeyScopeAndMemorizePreviousScope(
|
||||
);
|
||||
```
|
||||
|
||||
## Styling
|
||||
## Stylisme
|
||||
|
||||
### Use StyledComponents
|
||||
### Utilisez StyledComponents
|
||||
|
||||
Style the components with [styled-components](https://emotion.sh/docs/styled).
|
||||
Styliser les composants avec [styled-components](https://emotion.sh/docs/styled).
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -208,7 +208,7 @@ const StyledTitle = styled.div`
|
||||
`;
|
||||
```
|
||||
|
||||
Prefix styled components with "Styled" to differentiate them from "real" components.
|
||||
Préfixez les composants stylisés avec "Styled" pour les différencier des composants "réels".
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -224,17 +224,17 @@ const StyledTitle = styled.div`
|
||||
`;
|
||||
```
|
||||
|
||||
### Theming
|
||||
### Thematisation
|
||||
|
||||
Utilizing the theme for the majority of component styling is the preferred approach.
|
||||
Utiliser le thème pour la majorité du stylisme des composants est l'approche préférée.
|
||||
|
||||
#### Units of measurement
|
||||
#### Unités de mesure
|
||||
|
||||
Avoid using `px` or `rem` values directly within the styled components. The necessary values are generally already defined in the theme, so it’s recommended to make use of the theme for these purposes.
|
||||
Évitez d'utiliser des valeurs `px` ou `rem` directement dans les composants stylisés. Les valeurs nécessaires sont généralement déjà définies dans le thème, il est donc recommandé d'utiliser le thème à ces fins.
|
||||
|
||||
#### Colors
|
||||
#### Couleurs
|
||||
|
||||
Refrain from introducing new colors; instead, use the existing palette from the theme. Should there be a situation where the palette does not align, please leave a comment so that the team can rectify it.
|
||||
Évitez d'introduire de nouvelles couleurs ; utilisez plutôt la palette existante du thème. Si la palette ne correspond pas, veuillez laisser un commentaire pour que l'équipe puisse rectifier cela.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad, directly specifies style values without utilizing the theme
|
||||
@@ -258,34 +258,33 @@ const StyledButton = styled.button`
|
||||
`;
|
||||
```
|
||||
|
||||
## Type Imports
|
||||
## Application d'interdiction d'importations de type
|
||||
|
||||
Prefer **inline type imports** when importing TypeScript types.
|
||||
This aligns with the enforced ESLint configuration and existing usage across the codebase.
|
||||
Évitez les importations de type. Pour appliquer cette norme, une règle ESLint vérifie et signale toutes les importations de type. Cela aide à maintenir la cohérence et la lisibilité dans le code TypeScript.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad – imports types as runtime values
|
||||
import { Meta, StoryObj } from '@storybook/react-vite';
|
||||
// ❌ Bad
|
||||
import { type Meta, type StoryObj } from '@storybook/react';
|
||||
|
||||
// ❌ Bad – valid but not the preferred fix style
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
// ❌ Bad
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
// ✅ Good – preferred inline type imports
|
||||
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
||||
// ✅ Good
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
```
|
||||
|
||||
### Why Inline Type Imports
|
||||
### Pourquoi éviter les importations de type
|
||||
|
||||
* **Consistency**: Matches the enforced ESLint rule and current code usage.
|
||||
* **Cohérence** : En évitant les importations de type et en utilisant une seule approche pour les importations de type et de valeur, la base de code reste cohérente dans son style d'importation de module.
|
||||
|
||||
* **Clarity**: Explicitly marks types while keeping imports grouped.
|
||||
* **Lisibilité** : Les importations sans type améliorent la lisibilité du code en clarifiant quand vous importez des valeurs ou des types. Cela réduit l'ambiguïté et facilite la compréhension de l'objectif des symboles importés.
|
||||
|
||||
* **Tooling Alignment**: Avoids ESLint errors and unnecessary auto-fixes.
|
||||
* **Maintenabilité** : Cela améliore la maintenabilité de la base de code car les développeurs peuvent identifier et localiser les importations uniquement de type lors de la révision ou de la modification du code.
|
||||
|
||||
### ESLint Rule
|
||||
### Règle ESLint
|
||||
|
||||
An ESLint rule, `@typescript-eslint/consistent-type-imports`, is configured to:
|
||||
Une règle ESLint, `@typescript-eslint/consistent-type-imports`, impose la convention des imports "type-only". Cette règle génère des erreurs ou des avertissements pour toutes les violations d'importations de type.
|
||||
|
||||
* Prefer explicit type imports
|
||||
Veillez à ce que cette règle aborde spécifiquement les rares cas particuliers où se produisent des importations de type involontaires. TypeScript lui-même déconseille cette pratique, comme mentionné dans les [notes de version de TypeScript 3.8](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html). Dans la majorité des situations, vous ne devriez pas avoir besoin d'utiliser des importations uniquement de type.
|
||||
|
||||
* **Enforce** the `inline-type-imports` fix style
|
||||
Pour garantir la conformité de votre code avec cette règle, assurez-vous d'exécuter ESLint dans le cadre de votre flux de travail de développement.
|
||||
|
||||
+32
-32
@@ -1,59 +1,59 @@
|
||||
---
|
||||
title: Work with Figma
|
||||
info: Learn how you can collaborate with Twenty's Figma
|
||||
title: Travailler avec Figma
|
||||
info: Apprenez comment vous pouvez collaborer avec le Figma de Twenty
|
||||
---
|
||||
|
||||
Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
|
||||
This guide explains how you can collaborate with Figma.
|
||||
Figma est un outil de conception d'interface collaboratif qui aide à surmonter la barrière de communication entre designers et développeurs.
|
||||
Ce guide explique comment vous pouvez collaborer avec Figma.
|
||||
|
||||
## Access
|
||||
## Accès
|
||||
|
||||
1. **Access the shared link:** You can access the project's Figma file [here](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
||||
2. **Sign in:** If you're not already signed in, Figma will prompt you to do so.
|
||||
Key features are only available to logged-in users, such as the developer mode and the ability to select a dedicated frame.
|
||||
1. **Accédez au lien partagé :** Vous pouvez accéder au fichier Figma du projet [ici](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
||||
2. **Se connecter :** Si vous n'êtes pas déjà connecté, Figma vous invitera à le faire.
|
||||
Les fonctionnalités clés ne sont disponibles que pour les utilisateurs connectés, telles que le mode développeur et la possibilité de sélectionner un cadre dédié.
|
||||
|
||||
<Warning>
|
||||
You will not be able to collaborate effectively without an account.
|
||||
Vous ne pourrez pas collaborer efficacement sans compte.
|
||||
</Warning>
|
||||
|
||||
## Figma structure
|
||||
## Structure de Figma
|
||||
|
||||
On the left sidebar, you can access the different pages of Twenty's Figma. This is how they're organized:
|
||||
Sur la barre latérale gauche, vous pouvez accéder aux différentes pages du Figma de Twenty. Voici comment elles sont organisées :
|
||||
|
||||
* **Components page:** This is the first page. The designer uses it to create and organize the reusable design elements used throughout the design file. For example, buttons, icons, symbols, or any other reusable components. It serves to maintain consistency across the design.
|
||||
* **Main page:** The second page is the main page, which shows the complete user interface of the project. You can press ***Play*** to use the full app prototype.
|
||||
* **Features pages:** The other pages are typically dedicated to features in progress. They contain the design of specific features or modules of the application or website. They are typically still in progress.
|
||||
* **Page des composants :** C'est la première page. Le designer l'utilise pour créer et organiser les éléments de design réutilisables utilisés dans tout le fichier design. Par exemple, boutons, icônes, symboles ou tout autre composant réutilisable. Elle sert à maintenir la cohérence dans le design.
|
||||
* **Page principale :** La deuxième page est la page principale, qui montre l'interface utilisateur complète du projet. Vous pouvez appuyer sur ***Play*** pour utiliser le prototype complet de l'application.
|
||||
* **Pages des fonctionnalités :** Les autres pages sont généralement dédiées aux fonctionnalités en cours de développement. Elles contiennent le design de fonctionnalités ou modules spécifiques de l'application ou du site web. Elles sont généralement encore en cours de développement.
|
||||
|
||||
## Useful Tips
|
||||
## Conseils utiles
|
||||
|
||||
With read-only access, you can't edit the design, but you can access all features that will be useful to convert the designs into code.
|
||||
Avec un accès en lecture seule, vous ne pouvez pas modifier le design, mais vous pouvez accéder à toutes les fonctionnalités utiles pour convertir les designs en code.
|
||||
|
||||
### Use the Dev mode
|
||||
### Utiliser le mode Dev
|
||||
|
||||
Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. You can learn more about Dev Mode [here](https://www.figma.com/dev-mode/).
|
||||
Le Mode Dev de Figma améliore la productivité des développeurs en fournissant une navigation simple dans le design, une gestion efficace des ressources, des outils de communication performants, des intégrations de boîte à outils, des extraits de code rapides et des informations clés sur les calques, comblant ainsi le fossé entre design et développement. Vous pouvez en savoir plus sur le mode Dev [ici](https://www.figma.com/dev-mode/).
|
||||
|
||||
Switch to the "Developer" mode in the right part of the toolbar to see design specs, copy CSS, and access assets.
|
||||
Basculez vers le mode « Développeur » dans la partie droite de la barre d'outils pour voir les spécifications du design, copier du CSS et accéder aux ressources.
|
||||
|
||||
### Use the Prototype
|
||||
### Utilisez le Prototype
|
||||
|
||||
Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view. Prototype mode allows you to interact with the design as if it were the final product. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
|
||||
Cliquez sur n'importe quel élément du canvas et appuyez sur le bouton « Play » en haut à droite de l'interface pour accéder à la vue du prototype. Le mode Prototype vous permet d'interagir avec le design comme s'il s'agissait du produit final. Il montre le flux entre les écrans et comment les éléments de l'interface tels que les boutons, les liens ou les menus se comportent lorsqu'ils sont interactifs.
|
||||
|
||||
1. **Understanding transitions and animations:** In the Prototype mode, you can view any transitions or animations added by a designer between screens or UI elements, providing clear visual instructions to developers on the intended behavior and style.
|
||||
2. **Implementation clarification:** A prototype can also help reduce ambiguities. Developers can interact with it to gain a better understanding of the functionality or appearance of particular elements.
|
||||
1. **Comprendre les transitions et animations :** En mode Prototype, vous pouvez voir toutes les transitions ou animations ajoutées par un designer entre écrans ou éléments UI, fournissant des instructions visuelles claires aux développeurs sur le comportement et le style attendus.
|
||||
2. **Clarification de l'implémentation :** Un prototype peut aussi aider à réduire les ambiguïtés. Les développeurs peuvent interagir avec lui pour mieux comprendre la fonctionnalité ou l'apparence de certains éléments.
|
||||
|
||||
For more comprehensive details and guidance on learning the Figma platform, you can visit the official [Figma Documentation](https://help.figma.com/hc/en-us).
|
||||
Pour des détails et instructions plus complets sur l'apprentissage de la plateforme Figma, vous pouvez visiter la [Documentation officielle de Figma](https://help.figma.com/hc/fr).
|
||||
|
||||
### Measure distances
|
||||
### Mesurer les distances
|
||||
|
||||
Select an element, hold `Option` key (Mac) or `Alt` key (Windows), then hover over another element to see the distance between them.
|
||||
Sélectionnez un élément, maintenez la touche `Option` (Mac) ou `Alt` (Windows), puis survolez un autre élément pour voir la distance entre eux.
|
||||
|
||||
### Figma extension for VSCode (Recommended)
|
||||
### Extension Figma pour VSCode (Recommandée)
|
||||
|
||||
[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
||||
lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor.
|
||||
It's part of our recommended extensions.
|
||||
[Figma pour VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
|
||||
vous permet de naviguer et d'inspecter les fichiers design, de collaborer avec les designers, de suivre les changements et d'accélérer la mise en œuvre - le tout sans quitter votre éditeur de texte.
|
||||
Cela fait partie de nos extensions recommandées.
|
||||
|
||||
## Collaboration
|
||||
|
||||
1. **Using Comments:** You are welcome to use the comment feature by clicking on the bubble icon in the left part of the toolbar.
|
||||
2. **Cursor chat:** A nice feature of Figma is the Cursor chat. Just press `;` on Mac and `/` on Windows to send a message if you see someone else using Figma as the same time as you.
|
||||
1. **Utilisation des commentaires :** N'hésitez pas à utiliser la fonction commentaire en cliquant sur l'icône de bulle dans la partie gauche de la barre d'outils.
|
||||
2. **Conversation par curseur :** Une fonctionnalité intéressante de Figma est la conversation par curseur. Il suffit d'appuyer sur `;` sur Mac et `/` sur Windows pour envoyer un message si vous voyez quelqu'un d'autre utiliser Figma en même temps que vous.
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Local Setup
|
||||
description: The guide for contributors (or curious developers) who want to run Twenty locally.
|
||||
title: Configuration Locale
|
||||
description: Le guide pour les contributeurs (ou les développeurs curieux) qui souhaitent exécuter Twenty localement.
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
## Prérequis
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux and MacOS">
|
||||
Before you can install and use Twenty, make sure you install the following on your computer:
|
||||
<Tab title="Linux et MacOS">
|
||||
Avant de pouvoir installer et utiliser Twenty, assurez-vous d'installer ce qui suit sur votre ordinateur :
|
||||
|
||||
* [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
|
||||
* [Node v24.5.0](https://nodejs.org/en/download)
|
||||
@@ -15,25 +15,25 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
* [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
|
||||
|
||||
<Warning>
|
||||
`npm` won't work, you should use `yarn` instead. Yarn is now shipped with Node.js, so you don't need to install it separately.
|
||||
You only have to run `corepack enable` to enable Yarn if you haven't done it yet.
|
||||
`npm` ne fonctionnera pas, vous devez utiliser `yarn` à la place. Yarn est maintenant intégré avec Node.js, vous n'avez donc pas besoin de l'installer séparément.
|
||||
Vous devez uniquement exécuter `corepack enable` pour activer Yarn si vous ne l'avez pas encore fait.
|
||||
</Warning>
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
1. Install WSL
|
||||
Open PowerShell as Administrator and run:
|
||||
1. Installer WSL
|
||||
Ouvrez PowerShell en tant qu'administrateur et exécutez :
|
||||
|
||||
```powershell
|
||||
wsl --install
|
||||
```
|
||||
|
||||
You should now see a prompt to restart your computer. If not, restart it manually.
|
||||
Vous devriez maintenant voir une invite pour redémarrer votre ordinateur. Si ce n'est pas le cas, redémarrez-le manuellement.
|
||||
|
||||
Upon restart, a powershell window will open and install Ubuntu. This may take up some time.
|
||||
You'll see a prompt to create a username and password for your Ubuntu installation.
|
||||
Au redémarrage, une fenêtre PowerShell s'ouvrira et installera Ubuntu. Cela peut prendre un peu de temps.
|
||||
Une invite pour créer un nom d'utilisateur et un mot de passe pour votre installation Ubuntu s'affichera.
|
||||
|
||||
2. Install and configure git
|
||||
2. Installez et configurez Git
|
||||
|
||||
```bash
|
||||
sudo apt-get install git
|
||||
@@ -43,10 +43,10 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
git config --global user.email "youremail@domain.com"
|
||||
```
|
||||
|
||||
3. Install nvm, node.js and yarn
|
||||
3. Installez nvm, Node.js et Yarn
|
||||
|
||||
<Warning>
|
||||
Use `nvm` to install the correct `node` version. The `.nvmrc` ensures all contributors use the same version.
|
||||
Utilisez `nvm` pour installer la version correcte de `node`. Le fichier `.nvmrc` garantit que tous les contributeurs utilisent la même version.
|
||||
</Warning>
|
||||
|
||||
```bash
|
||||
@@ -55,7 +55,7 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
|
||||
```
|
||||
|
||||
Close and reopen your terminal to use nvm. Then run the following commands.
|
||||
Fermez et rouvrez votre terminal pour utiliser nvm. Ensuite, exécutez les commandes suivantes.
|
||||
|
||||
```bash
|
||||
|
||||
@@ -70,13 +70,13 @@ description: The guide for contributors (or curious developers) who want to run
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Git Clone
|
||||
## Étape 1 : Cloner le dépôt Git
|
||||
|
||||
In your terminal, run the following command.
|
||||
Dans votre terminal, exécutez la commande suivante.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="SSH (Recommended)">
|
||||
If you haven't already set up SSH keys, you can learn how to do so [here](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
<Tab title="SSH (Recommandé)">
|
||||
Si vous n'avez pas encore configuré les clés SSH, vous pouvez apprendre à le faire [ici](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
|
||||
|
||||
```bash
|
||||
git clone git@github.com:twentyhq/twenty.git
|
||||
@@ -90,36 +90,36 @@ In your terminal, run the following command.
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Step 2: Position yourself at the root
|
||||
## Étape 2 : Positionnez-vous à la racine
|
||||
|
||||
```bash
|
||||
cd twenty
|
||||
```
|
||||
|
||||
You should run all commands in the following steps from the root of the project.
|
||||
Vous devez exécuter toutes les commandes des étapes suivantes depuis la racine du projet.
|
||||
|
||||
## Step 3: Set up a PostgreSQL Database
|
||||
## Étape 3 : Configurez une base de données PostgreSQL
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
**Option 1 (preferred):** To provision your database locally:
|
||||
Use the following link to install Postgresql on your Linux machine: [Postgresql Installation](https://www.postgresql.org/download/linux/)
|
||||
**Option 1 (préférée) :** Pour préparer votre base de données localement :
|
||||
Utilisez le lien suivant pour installer PostgreSQL sur votre machine Linux : [Installation de PostgreSQL](https://www.postgresql.org/download/linux/)
|
||||
|
||||
```bash
|
||||
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
|
||||
```
|
||||
|
||||
Note: You might need to add `sudo -u postgres` to the command before `psql` to avoid permission errors.
|
||||
Remarque : Vous devrez peut-être ajouter `sudo -u postgres` à la commande précédente `psql` pour éviter les erreurs de permission.
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**Option 2 :** Si vous avez installé Docker :
|
||||
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
make -C packages/twenty-docker postgres-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Mac OS">
|
||||
**Option 1 (preferred):** To provision your database locally with `brew`:
|
||||
**Option 1 (préférée):** Pour préparer votre base de données localement avec `brew` :
|
||||
|
||||
```bash
|
||||
brew install postgresql@16
|
||||
@@ -128,16 +128,16 @@ You should run all commands in the following steps from the root of the project.
|
||||
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
|
||||
```
|
||||
|
||||
You can verify if the PostgreSQL server is running by executing:
|
||||
Vous pouvez vérifier si le serveur PostgreSQL fonctionne en exécutant :
|
||||
|
||||
```bash
|
||||
brew services list
|
||||
```
|
||||
|
||||
The installer might not create the `postgres` user by default when installing
|
||||
via Homebrew on MacOS. Instead, it creates a PostgreSQL role that matches your macOS
|
||||
username (e.g., "john").
|
||||
To check and create the `postgres` user if necessary, follow these steps:
|
||||
L'installateur peut ne pas créer l'utilisateur `postgres` par défaut lors de l'installation
|
||||
via Homebrew sur macOS. Au lieu de cela, il crée un rôle PostgreSQL correspondant à votre nom d'utilisateur macOS
|
||||
(par exemple, "john").
|
||||
Pour vérifier et créer l'utilisateur `postgres` si nécessaire, suivez ces étapes :
|
||||
|
||||
```bash
|
||||
# Connect to PostgreSQL
|
||||
@@ -146,14 +146,14 @@ You should run all commands in the following steps from the root of the project.
|
||||
psql -U $(whoami) -d postgres
|
||||
```
|
||||
|
||||
Once at the psql prompt (postgres=#), run:
|
||||
Une fois à l'invite psql (postgres=#), exécutez :
|
||||
|
||||
```bash
|
||||
# List existing PostgreSQL roles
|
||||
\du
|
||||
```
|
||||
|
||||
You'll see output similar to:
|
||||
Vous verrez une sortie similaire à :
|
||||
|
||||
```bash
|
||||
Role name | Attributes | Member of
|
||||
@@ -161,98 +161,98 @@ You should run all commands in the following steps from the root of the project.
|
||||
john | Superuser | {}
|
||||
```
|
||||
|
||||
If you do not see a `postgres` role listed, proceed to the next step.
|
||||
Create the `postgres` role manually:
|
||||
Si vous ne voyez pas de rôle `postgres` listé, passez à l'étape suivante.
|
||||
Créez le rôle `postgres` manuellement :
|
||||
|
||||
```bash
|
||||
CREATE ROLE postgres WITH SUPERUSER LOGIN;
|
||||
```
|
||||
|
||||
This creates a superuser role named `postgres` with login access.
|
||||
Cela crée un rôle superutilisateur nommé `postgres` avec un accès de connexion.
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**Option 2 :** Si vous avez installé Docker :
|
||||
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
make -C packages/twenty-docker postgres-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
All the following steps are to be run in the WSL terminal (within your virtual machine)
|
||||
Toutes les étapes suivantes doivent être exécutées dans le terminal WSL (dans votre machine virtuelle)
|
||||
|
||||
**Option 1:** To provision your Postgresql locally:
|
||||
Use the following link to install Postgresql on your Linux virtual machine: [Postgresql Installation](https://www.postgresql.org/download/linux/)
|
||||
**Option 1** : Pour provisionner votre PostgreSQL localement :
|
||||
Utilisez le lien suivant pour installer PostgreSQL sur votre machine virtuelle Linux : [Installation de PostgreSQL](https://www.postgresql.org/download/linux/)
|
||||
|
||||
```bash
|
||||
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
|
||||
```
|
||||
|
||||
Note: You might need to add `sudo -u postgres` to the command before `psql` to avoid permission errors.
|
||||
Remarque : Vous devrez peut-être ajouter `sudo -u postgres` à la commande précédente `psql` pour éviter les erreurs de permission.
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
Running Docker on WSL adds an extra layer of complexity.
|
||||
Only use this option if you are comfortable with the extra steps involved, including turning on [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl).
|
||||
**Option 2 :** Si vous avez installé Docker :
|
||||
Exécuter Docker sur WSL ajoute une couche de complexité supplémentaire.
|
||||
N'utilisez cette option que si vous êtes à l'aise avec les étapes supplémentaires impliquées, y compris l'activation de [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl).
|
||||
|
||||
```bash
|
||||
make postgres-on-docker
|
||||
make -C packages/twenty-docker postgres-on-docker
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
You can now access the database at [localhost:5432](localhost:5432), with user `postgres` and password `postgres` .
|
||||
Vous pouvez maintenant accéder à la base de données à [localhost:5432](localhost:5432), avec l'utilisateur `postgres` et le mot de passe `postgres`.
|
||||
|
||||
## Step 4: Set up a Redis Database (cache)
|
||||
## Étape 4 : Configuration d'une base de données Redis (cache)
|
||||
|
||||
Twenty requires a redis cache to provide the best performance
|
||||
Twenty nécessite un cache Redis pour offrir les meilleures performances
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
**Option 1:** To provision your Redis locally:
|
||||
Use the following link to install Redis on your Linux machine: [Redis Installation](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
**Option 1** : Pour provisionner votre Redis localement :
|
||||
Utilisez le lien suivant pour installer Redis sur votre machine Linux : [Installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**Option 2 :** Si vous avez installé Docker :
|
||||
|
||||
```bash
|
||||
make redis-on-docker
|
||||
make -C packages/twenty-docker redis-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Mac OS">
|
||||
**Option 1 (preferred):** To provision your Redis locally with `brew`:
|
||||
**Option 1 (préférée) :** Pour provisionner votre Redis localement avec `brew` :
|
||||
|
||||
```bash
|
||||
brew install redis
|
||||
```
|
||||
|
||||
Start your redis server:
|
||||
Démarrez votre serveur Redis :
|
||||
`brew services start redis`
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**Option 2 :** Si vous avez installé Docker :
|
||||
|
||||
```bash
|
||||
make redis-on-docker
|
||||
make -C packages/twenty-docker redis-on-docker
|
||||
```
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
**Option 1:** To provision your Redis locally:
|
||||
Use the following link to install Redis on your Linux virtual machine: [Redis Installation](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
**Option 1 :** Pour provisionner votre Redis localement :
|
||||
Utilisez le lien suivant pour installer Redis sur votre machine virtuelle Linux : [Installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
|
||||
|
||||
**Option 2:** If you have docker installed:
|
||||
**Option 2 :** Si vous avez installé Docker :
|
||||
|
||||
```bash
|
||||
make redis-on-docker
|
||||
make -C packages/twenty-docker redis-on-docker
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
If you need a Client GUI, we recommend [redis insight](https://redis.io/insight/) (free version available)
|
||||
Si vous avez besoin d'une interface graphique cliente, nous recommandons [Redis Insight](https://redis.io/insight/) (version gratuite disponible)
|
||||
|
||||
## Step 5: Setup environment variables
|
||||
## Étape 5 : Configurer les variables d'environnement
|
||||
|
||||
Use environment variables or `.env` files to configure your project. More info [here](/l/fr/developers/self-host/capabilities/setup)
|
||||
Utilisez des variables d'environnement ou des fichiers `.env` pour configurer votre projet. Plus d'informations [ici](/l/fr/developers/self-host/capabilities/setup)
|
||||
|
||||
Copy the `.env.example` files in `/front` and `/server`:
|
||||
Copiez les fichiers `.env.example` dans `/front` et `/server` :
|
||||
|
||||
```bash
|
||||
cp ./packages/twenty-front/.env.example ./packages/twenty-front/.env
|
||||
@@ -260,29 +260,29 @@ cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env
|
||||
```
|
||||
|
||||
<Info>
|
||||
**Multi-Workspace Mode:** By default, Twenty runs in single-workspace mode where only one workspace can be created. To enable multi-workspace support (useful for testing subdomain-based features), set `IS_MULTIWORKSPACE_ENABLED=true` in your server `.env` file. See [Multi-Workspace Mode](/l/fr/developers/self-host/capabilities/setup#multi-workspace-mode) for details.
|
||||
**Mode multi-espaces de travail:** Par défaut, Twenty s'exécute en mode mono-espace de travail, où un seul espace de travail peut être créé. Pour activer la prise en charge multi-espaces de travail (utile pour tester des fonctionnalités basées sur des sous-domaines), définissez `IS_MULTIWORKSPACE_ENABLED=true` dans le fichier `.env` de votre serveur. Voir [Mode multi-espaces de travail](/l/fr/developers/self-host/capabilities/setup#multi-workspace-mode) pour plus de détails.
|
||||
</Info>
|
||||
|
||||
## Step 6: Installing dependencies
|
||||
## Étape 6 : Installation des dépendances
|
||||
|
||||
To build Twenty server and seed some data into your database, run the following command:
|
||||
Pour construire le serveur Twenty et injecter des données dans votre base de données, exécutez la commande suivante :
|
||||
|
||||
```bash
|
||||
yarn
|
||||
```
|
||||
|
||||
Note that `npm` or `pnpm` won't work
|
||||
Notez que `npm` ou `pnpm` ne fonctionneront pas
|
||||
|
||||
## Step 7: Running the project
|
||||
## Étape 7 : Exécution du projet
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
Depending on your Linux distribution, Redis server might be started automatically.
|
||||
If not, check the [Redis installation guide](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) for your distro.
|
||||
Selon votre distribution Linux, le serveur Redis peut être démarré automatiquement.
|
||||
Sinon, consultez le guide d'installation de [Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) pour votre distribution.
|
||||
</Tab>
|
||||
|
||||
<Tab title="Mac OS">
|
||||
Redis should already be running. If not, run:
|
||||
Redis devrait déjà être en cours d'exécution. Sinon, exécutez :
|
||||
|
||||
```bash
|
||||
brew services start redis
|
||||
@@ -290,18 +290,18 @@ Note that `npm` or `pnpm` won't work
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
Depending on your Linux distribution, Redis server might be started automatically.
|
||||
If not, check the [Redis installation guide](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) for your distro.
|
||||
Selon votre distribution Linux, le serveur Redis peut être démarré automatiquement.
|
||||
Sinon, vérifiez le [guide d'installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) pour votre distribution.
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
Set up your database with the following command:
|
||||
Configurez votre base de données avec la commande suivante :
|
||||
|
||||
```bash
|
||||
npx nx database:reset twenty-server
|
||||
```
|
||||
|
||||
Start the server, the worker and the frontend services:
|
||||
Démarrez le serveur, le worker et les services frontend :
|
||||
|
||||
```bash
|
||||
npx nx start twenty-server
|
||||
@@ -309,25 +309,25 @@ npx nx worker twenty-server
|
||||
npx nx start twenty-front
|
||||
```
|
||||
|
||||
Alternatively, you can start all services at once:
|
||||
Alternativement, vous pouvez démarrer tous les services en même temps :
|
||||
|
||||
```bash
|
||||
npx nx start
|
||||
```
|
||||
|
||||
## Step 8: Use Twenty
|
||||
## Étape 8 : Utiliser Twenty
|
||||
|
||||
**Frontend**
|
||||
|
||||
Twenty's frontend will be running at [http://localhost:3001](http://localhost:3001).
|
||||
You can log in using the default demo account: `tim@apple.dev` (password: `tim@apple.dev`)
|
||||
Le frontend de Twenty sera en cours d'exécution à [http://localhost:3001](http://localhost:3001).
|
||||
Vous pouvez vous connecter en utilisant le compte démo par défaut : `tim@apple.dev` (mot de passe : `tim@apple.dev`)
|
||||
|
||||
**Backend**
|
||||
|
||||
* Twenty's server will be up and running at [http://localhost:3000](http://localhost:3000)
|
||||
* The GraphQL API can be accessed at [http://localhost:3000/graphql](http://localhost:3000/graphql)
|
||||
* The REST API can be reached at [http://localhost:3000/rest](http://localhost:3000/rest)
|
||||
* Le serveur de Twenty sera en fonctionnement à [http://localhost:3000](http://localhost:3000)
|
||||
* L'API GraphQL est accessible à [http://localhost:3000/graphql](http://localhost:3000/graphql)
|
||||
* L'API REST est joignable à [http://localhost:3000/rest](http://localhost:3000/rest)
|
||||
|
||||
## Troubleshooting
|
||||
## Résolution des problèmes
|
||||
|
||||
If you encounter any problem, check [Troubleshooting](/l/fr/developers/self-host/capabilities/troubleshooting) for solutions.
|
||||
Si vous rencontrez un problème, consultez [Dépannage](/l/fr/developers/self-host/capabilities/troubleshooting) pour des solutions.
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: Contribute
|
||||
description: Contribute to Twenty's open-source development.
|
||||
title: Contribuer
|
||||
description: Contribuez au développement open source de Twenty.
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="AI" />
|
||||
<img src="/images/user-guide/github/github-header.png" alt="IA" />
|
||||
</Frame>
|
||||
|
||||
## Overview
|
||||
## Vue d'ensemble
|
||||
|
||||
Twenty is open-source and welcomes contributions from the community. Whether you're fixing bugs, adding features, or improving documentation, your contributions help make Twenty better for everyone.
|
||||
Twenty est open source et accueille les contributions de la communauté. Que vous corrigiez des bogues, ajoutiez des fonctionnalités ou amélioriez la documentation, vos contributions aident à améliorer Twenty pour tout le monde.
|
||||
|
||||
## Ways to Contribute
|
||||
## Comment contribuer
|
||||
|
||||
* **Report bugs**: Help identify and document issues
|
||||
* **Submit features**: Propose and implement new functionality
|
||||
* **Improve documentation**: Make our docs clearer and more helpful
|
||||
* **Frontend development**: Work on the React-based UI
|
||||
* **Backend development**: Contribute to the NestJS server
|
||||
* **Signaler des bogues**: Aidez à identifier et à documenter les problèmes
|
||||
* **Proposer des fonctionnalités**: Proposez et mettez en œuvre de nouvelles fonctionnalités
|
||||
* **Améliorer la documentation**: Rendez notre documentation plus claire et plus utile
|
||||
* **Développement front-end**: Travaillez sur l'interface utilisateur basée sur React
|
||||
* **Développement back-end**: Contribuez au serveur NestJS
|
||||
|
||||
## Getting Started
|
||||
## Prise en main
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Bug Reports & Requests" icon="bug" href="/l/fr/developers/contribute/capabilities/bug-and-requests">
|
||||
Report issues or request features
|
||||
<Card title="Signalements de bogues et demandes" icon="bug" href="/l/fr/developers/contribute/capabilities/bug-and-requests">
|
||||
Signalez des problèmes ou demandez des fonctionnalités
|
||||
</Card>
|
||||
|
||||
<Card title="Frontend Development" icon="browser" href="/l/fr/developers/contribute/capabilities/frontend-development">
|
||||
Contribute to the UI
|
||||
<Card title="Développement frontend" icon="browser" href="/l/fr/developers/contribute/capabilities/frontend-development">
|
||||
Contribuez à l'interface utilisateur
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,147 +1,147 @@
|
||||
---
|
||||
title: APIs
|
||||
description: Query and modify your CRM data programmatically using REST or GraphQL.
|
||||
title: API
|
||||
description: Interrogez et modifiez vos données CRM par programmation à l'aide de REST ou de GraphQL.
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Twenty was built to be developer-friendly, offering powerful APIs that adapt to your custom data model. We provide four distinct API types to meet different integration needs.
|
||||
Twenty a été conçu pour être convivial pour les développeurs, offrant des API puissantes qui s'adaptent à votre modèle de données personnalisé. Nous fournissons quatre types d'API distincts pour répondre à différents besoins d'intégration.
|
||||
|
||||
## Developer-First Approach
|
||||
## Approche axée sur les développeurs
|
||||
|
||||
Twenty generates APIs specifically for your data model:
|
||||
Twenty génère des API spécifiquement pour votre modèle de données :
|
||||
|
||||
* **No long IDs required**: Use your object and field names directly in endpoints
|
||||
* **Standard and custom objects treated equally**: Your custom objects get the same API treatment as built-in ones
|
||||
* **Dedicated endpoints**: Each object and field gets its own API endpoint
|
||||
* **Custom documentation**: Generated specifically for your workspace's data model
|
||||
* **Pas besoin d'ID longs** : Utilisez directement les noms de vos objets et champs dans les points de terminaison
|
||||
* **Objets standard et personnalisés traités à égalité** : Vos objets personnalisés bénéficient du même traitement API que ceux intégrés
|
||||
* **Points de terminaison dédiés** : Chaque objet et champ a son propre point de terminaison API
|
||||
* **Documentation personnalisée** : Générée spécifiquement pour le modèle de données de votre espace de travail
|
||||
|
||||
<Note>
|
||||
Your personalized API documentation is available under **Settings → API & Webhooks** after creating an API key. Since Twenty generates APIs that match your custom data model, the documentation is unique to your workspace.
|
||||
Votre documentation API personnalisée est disponible sous **Paramètres → API & Webhooks** après la création d'une clé API. Comme Twenty génère des API qui correspondent à votre modèle de données personnalisé, la documentation est propre à votre espace de travail.
|
||||
</Note>
|
||||
|
||||
## The Two API Types
|
||||
## Les deux types d'API
|
||||
|
||||
### Core API
|
||||
### API principale
|
||||
|
||||
Accessed on `/rest/` or `/graphql/`
|
||||
Accessible sur `/rest/` ou `/graphql/`
|
||||
|
||||
Work with your actual **records** (the data):
|
||||
Travaillez avec vos **enregistrements** réels (les données) :
|
||||
|
||||
* Create, read, update, delete People, Companies, Opportunities, etc.
|
||||
* Query and filter data
|
||||
* Manage record relationships
|
||||
* Créer, lire, mettre à jour, supprimer People, Companies, Opportunities, etc.
|
||||
* Interroger et filtrer les données
|
||||
* Gérer les relations entre les enregistrements
|
||||
|
||||
### Metadata API
|
||||
### API de métadonnées
|
||||
|
||||
Accessed on `/rest/metadata/` or `/metadata/`
|
||||
Accessible sur `/rest/metadata/` ou `/metadata/`
|
||||
|
||||
Manage your **workspace and data model**:
|
||||
Gérez votre **espace de travail et votre modèle de données** :
|
||||
|
||||
* Create, modify, or delete objects and fields
|
||||
* Configure workspace settings
|
||||
* Define relationships between objects
|
||||
* Créer, modifier ou supprimer des objets et des champs
|
||||
* Configurer les paramètres de l'espace de travail
|
||||
* Définir les relations entre les objets
|
||||
|
||||
## REST vs GraphQL
|
||||
|
||||
Both Core and Metadata APIs are available in REST and GraphQL formats:
|
||||
Les API Core et Metadata sont disponibles aux formats REST et GraphQL :
|
||||
|
||||
| Format | Available Operations |
|
||||
| ----------- | ---------------------------------------------------------- |
|
||||
| **REST** | CRUD, batch operations, upserts |
|
||||
| **GraphQL** | Same + **batch upserts**, relationship queries in one call |
|
||||
| Format | Opérations disponibles |
|
||||
| ----------- | ----------------------------------------------------------------------- |
|
||||
| **REST** | CRUD, opérations par lot, upserts |
|
||||
| **GraphQL** | Identique + **upserts par lot**, requêtes de relations en un seul appel |
|
||||
|
||||
Choose based on your needs — both formats access the same data.
|
||||
Choisissez selon vos besoins — les deux formats accèdent aux mêmes données.
|
||||
|
||||
## API Endpoints
|
||||
## Points d'accès API
|
||||
|
||||
| Environment | Base URL |
|
||||
| --------------- | ------------------------- |
|
||||
| **Cloud** | `https://api.twenty.com/` |
|
||||
| **Self-Hosted** | `https://{your-domain}/` |
|
||||
| Environnement | URL de base |
|
||||
| ---------------- | ------------------------- |
|
||||
| **Cloud** | `https://api.twenty.com/` |
|
||||
| **Auto-hébergé** | `https://{your-domain}/` |
|
||||
|
||||
## Authentication
|
||||
## Authentification
|
||||
|
||||
Every API request requires an API key in the header:
|
||||
Chaque requête API nécessite une clé API dans l'en-tête :
|
||||
|
||||
```
|
||||
Authorization: Bearer YOUR_API_KEY
|
||||
```
|
||||
|
||||
### Create an API Key
|
||||
### Créer une clé API
|
||||
|
||||
1. Go to **Settings → APIs & Webhooks**
|
||||
2. Click **+ Create key**
|
||||
3. Configure:
|
||||
* **Name**: Descriptive name for the key
|
||||
* **Expiration Date**: When the key expires
|
||||
4. Click **Save**
|
||||
5. **Copy immediately** — the key is only shown once
|
||||
1. Allez dans **Paramètres → API & Webhooks**
|
||||
2. Cliquez sur **+ Créer une clé**
|
||||
3. Configurer:
|
||||
* **Nom** : Nom descriptif pour la clé
|
||||
* **Date d'expiration** : Date à laquelle la clé expire
|
||||
4. Cliquez sur **Enregistrer**
|
||||
5. **Copiez immédiatement** — la clé n'est affichée qu'une seule fois
|
||||
|
||||
<VimeoEmbed videoId="928786722" title="Creating API key" />
|
||||
<VimeoEmbed videoId="928786722" title="Création d'une clé API" />
|
||||
|
||||
<Warning>
|
||||
Your API key grants access to sensitive data. Don't share it with untrusted services. If compromised, disable it immediately and generate a new one.
|
||||
Votre clé API donne accès à des données sensibles. Ne la partagez pas avec des services non fiables. Si elle est compromise, désactivez-la immédiatement et générez-en une nouvelle.
|
||||
</Warning>
|
||||
|
||||
### Assign a Role to an API Key
|
||||
### Attribuer un rôle à une clé API
|
||||
|
||||
For better security, assign a specific role to limit access:
|
||||
Pour une meilleure sécurité, attribuez un rôle spécifique pour limiter l'accès :
|
||||
|
||||
1. Go to **Settings → Roles**
|
||||
2. Click on the role to assign
|
||||
3. Open the **Assignment** tab
|
||||
4. Under **API Keys**, click **+ Assign to API key**
|
||||
5. Select the API key
|
||||
1. Allez dans **Paramètres → Rôles**
|
||||
2. Cliquez sur le rôle à attribuer
|
||||
3. Ouvrez l'onglet **Attribution**
|
||||
4. Sous **Clés API**, cliquez sur **+ Attribuer à une clé API**
|
||||
5. Sélectionnez la clé API
|
||||
|
||||
The key will inherit that role's permissions. See [Permissions](/l/fr/user-guide/permissions-access/capabilities/permissions) for details.
|
||||
La clé héritera des autorisations de ce rôle. Voir [Autorisations](/l/fr/user-guide/permissions-access/capabilities/permissions) pour plus de détails.
|
||||
|
||||
### Manage API Keys
|
||||
### Gérer les clés API
|
||||
|
||||
**Regenerate**: Settings → APIs & Webhooks → Click key → **Regenerate**
|
||||
**Régénérer** : Paramètres → API & Webhooks → Cliquez sur la clé → **Régénérer**
|
||||
|
||||
**Delete**: Settings → APIs & Webhooks → Click key → **Delete**
|
||||
**Supprimer** : Paramètres → API & Webhooks → Cliquez sur la clé → **Supprimer**
|
||||
|
||||
## API Playground
|
||||
## Bac à sable API
|
||||
|
||||
Test your APIs directly in the browser with our built-in playground — available for both **REST** and **GraphQL**.
|
||||
Testez vos API directement dans le navigateur avec notre bac à sable intégré — disponible pour **REST** et **GraphQL**.
|
||||
|
||||
### Access the Playground
|
||||
### Accéder au bac à sable
|
||||
|
||||
1. Go to **Settings → APIs & Webhooks**
|
||||
2. Create an API key (required)
|
||||
3. Click on **REST API** or **GraphQL API** to open the playground
|
||||
1. Allez dans **Paramètres → API & Webhooks**
|
||||
2. Créer une clé API (obligatoire)
|
||||
3. Cliquez sur **REST API** ou **GraphQL API** pour ouvrir le bac à sable
|
||||
|
||||
### What You Get
|
||||
### Ce que vous obtenez
|
||||
|
||||
* **Interactive documentation**: Generated for your specific data model
|
||||
* **Live testing**: Execute real API calls against your workspace
|
||||
* **Schema explorer**: Browse available objects, fields, and relationships
|
||||
* **Request builder**: Construct queries with autocomplete
|
||||
* **Documentation interactive** : Générée pour votre modèle de données spécifique
|
||||
* **Tests en direct** : Exécutez de véritables appels API sur votre espace de travail
|
||||
* **Explorateur de schéma** : Parcourez les objets, champs et relations disponibles
|
||||
* **Générateur de requêtes** : Construisez des requêtes avec l'autocomplétion
|
||||
|
||||
The playground reflects your custom objects and fields, so documentation is always accurate for your workspace.
|
||||
Le bac à sable reflète vos objets et champs personnalisés, de sorte que la documentation est toujours précise pour votre espace de travail.
|
||||
|
||||
## Batch Operations
|
||||
## Opérations par Lot
|
||||
|
||||
Both REST and GraphQL support batch operations:
|
||||
REST et GraphQL prennent en charge les opérations par lot :
|
||||
|
||||
* **Batch size**: Up to 60 records per request
|
||||
* **Operations**: Create, update, delete multiple records
|
||||
* **Taille du lot** : Jusqu'à 60 enregistrements par requête
|
||||
* **Opérations** : Créer, mettre à jour, supprimer plusieurs enregistrements
|
||||
|
||||
**GraphQL-only features:**
|
||||
**Fonctionnalités spécifiques à GraphQL :**
|
||||
|
||||
* **Batch Upsert**: Create or update in one call
|
||||
* Use plural object names (e.g., `CreateCompanies` instead of `CreateCompany`)
|
||||
* **Upsert par lot** : Créer ou mettre à jour en un seul appel
|
||||
* Utilisez des noms d'objets au pluriel (par exemple, `CreateCompanies` au lieu de `CreateCompany`)
|
||||
|
||||
## Rate Limits
|
||||
## Limites de débit
|
||||
|
||||
API requests are throttled to ensure platform stability:
|
||||
Les requêtes API sont limitées pour garantir la stabilité de la plateforme :
|
||||
|
||||
| Limit | Value |
|
||||
| -------------- | -------------------- |
|
||||
| **Requests** | 100 calls per minute |
|
||||
| **Batch size** | 60 records per call |
|
||||
| Limite | Valeur |
|
||||
| ----------------- | ---------------------------- |
|
||||
| **Requêtes** | 100 appels par minute |
|
||||
| **Taille du lot** | 60 enregistrements par appel |
|
||||
|
||||
<Tip>
|
||||
Use batch operations to maximize throughput — process up to 60 records in a single API call instead of making individual requests.
|
||||
Utilisez les opérations par lot pour maximiser le débit — traitez jusqu'à 60 enregistrements dans un seul appel API au lieu d'effectuer des requêtes individuelles.
|
||||
</Tip>
|
||||
|
||||
@@ -1,81 +1,88 @@
|
||||
---
|
||||
title: Twenty Apps
|
||||
description: Build and manage Twenty customizations as code.
|
||||
title: Applications Twenty
|
||||
description: Créez et gérez les personnalisations Twenty sous forme de code.
|
||||
---
|
||||
|
||||
<Warning>
|
||||
Apps are currently in alpha testing. The feature is functional but still evolving.
|
||||
Les applications sont actuellement en phase de test alpha. La fonctionnalité est fonctionnelle mais encore en évolution.
|
||||
</Warning>
|
||||
|
||||
## What Are Apps?
|
||||
## Que sont les applications ?
|
||||
|
||||
Apps let you build and manage Twenty customizations **as code**. Instead of configuring everything through the UI, you define your data model and serverless functions in code — making it faster to build, maintain, and roll out to multiple workspaces.
|
||||
Les applications vous permettent de créer et de gérer des personnalisations Twenty **sous forme de code**. Au lieu de tout configurer via l’interface utilisateur, vous définissez votre modèle de données et des fonctions sans serveur dans le code — ce qui accélère la création, la maintenance et le déploiement sur plusieurs espaces de travail.
|
||||
|
||||
**What you can do today:**
|
||||
**Ce que vous pouvez faire aujourd'hui:**
|
||||
|
||||
* Define custom objects and fields as code (managed data model)
|
||||
* Build serverless functions with custom triggers
|
||||
* Deploy the same app across multiple workspaces
|
||||
* Définir des objets et des champs personnalisés sous forme de code (modèle de données géré)
|
||||
* Créer des fonctions sans serveur avec des déclencheurs personnalisés
|
||||
* Déployer la même application sur plusieurs espaces de travail
|
||||
|
||||
**Coming soon:**
|
||||
**Bientôt disponible :**
|
||||
|
||||
* Custom UI layouts and components
|
||||
* Mises en page et composants d’interface utilisateur personnalisés
|
||||
|
||||
## Prerequisites
|
||||
## Prérequis
|
||||
|
||||
* Node.js 24+ and Yarn 4
|
||||
* A Twenty workspace and an API key (create one at https://app.twenty.com/settings/api-webhooks)
|
||||
* Node.js 24+ et Yarn 4
|
||||
* Un espace de travail Twenty et une clé API (créez-en une sur https://app.twenty.com/settings/api-webhooks)
|
||||
|
||||
## Getting Started
|
||||
## Prise en main
|
||||
|
||||
Create a new app using the official scaffolder, then authenticate and start developing:
|
||||
Créez une nouvelle application avec l’outil d’amorçage officiel, puis authentifiez-vous et commencez à développer :
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Scaffold a new app
|
||||
# Générez une nouvelle application
|
||||
npx create-twenty-app@latest my-twenty-app
|
||||
cd my-twenty-app
|
||||
|
||||
# Authenticate using your API key (you'll be prompted)
|
||||
yarn auth
|
||||
# Si vous n'utilisez pas yarn@4
|
||||
corepack enable
|
||||
yarn install
|
||||
|
||||
# Start dev mode: automatically syncs local changes to your workspace
|
||||
yarn dev
|
||||
# Authentifiez-vous avec votre clé API (une invite s'affichera)
|
||||
yarn auth:login
|
||||
|
||||
# Démarrez le mode développement : synchronise automatiquement les modifications locales avec votre espace de travail
|
||||
yarn app:dev
|
||||
```
|
||||
|
||||
From here you can:
|
||||
À partir d'ici, vous pouvez :
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Add a new entity to your application (guided)
|
||||
yarn create-entity
|
||||
yarn app:create-entity
|
||||
|
||||
# Generate a typed Twenty client and workspace entity types
|
||||
yarn generate
|
||||
yarn app:generate
|
||||
|
||||
# Run a one‑time sync (instead of watch mode)
|
||||
yarn sync
|
||||
yarn app:sync
|
||||
|
||||
# Watch your application's functions logs
|
||||
yarn logs
|
||||
yarn function:logs
|
||||
|
||||
# Execute a function by name
|
||||
yarn function:execute -n my-function -p '{"name": "test"}'
|
||||
|
||||
# Uninstall the application from the current workspace
|
||||
yarn uninstall
|
||||
yarn app:uninstall
|
||||
|
||||
# Display commands' help
|
||||
yarn help
|
||||
yarn app:help},{
|
||||
```
|
||||
|
||||
See also: the CLI reference pages for [create-twenty-app](https://www.npmjs.com/package/create-twenty-app) and [twenty-sdk CLI](https://www.npmjs.com/package/twenty-sdk).
|
||||
Voir aussi : les pages de référence CLI pour [create-twenty-app](https://www.npmjs.com/package/create-twenty-app) et [twenty-sdk CLI](https://www.npmjs.com/package/twenty-sdk).
|
||||
|
||||
## Project structure (scaffolded)
|
||||
## Structure du projet (générée)
|
||||
|
||||
When you run `npx create-twenty-app@latest my-twenty-app`, the scaffolder:
|
||||
Lorsque vous exécutez `npx create-twenty-app@latest my-twenty-app`, l’outil de scaffolding :
|
||||
|
||||
* Copies a minimal base application into `my-twenty-app/`
|
||||
* Adds a local `twenty-sdk` dependency and Yarn 4 configuration
|
||||
* Creates config files and scripts wired to the `twenty` CLI
|
||||
* Generates a default application config and a default function role
|
||||
* Copie une application de base minimale dans `my-twenty-app/`
|
||||
* Ajoute une dépendance locale à `twenty-sdk` et la configuration Yarn 4
|
||||
* Crée des fichiers de configuration et des scripts reliés à la CLI `twenty`
|
||||
* Génère une configuration d’application par défaut et un rôle de fonction par défaut
|
||||
|
||||
A freshly scaffolded app looks like this:
|
||||
Une application nouvellement générée ressemble à ceci :
|
||||
|
||||
```text filename="my-twenty-app/"
|
||||
my-twenty-app/
|
||||
@@ -85,79 +92,144 @@ my-twenty-app/
|
||||
.nvmrc
|
||||
.yarnrc.yml
|
||||
.yarn/
|
||||
releases/
|
||||
yarn-4.9.2.cjs
|
||||
install-state.gz
|
||||
eslint.config.mjs
|
||||
tsconfig.json
|
||||
README.md
|
||||
src/
|
||||
application.config.ts
|
||||
role.config.ts
|
||||
// your entities, actions, and other app files
|
||||
app/
|
||||
application.config.ts # Obligatoire - configuration principale de l'application
|
||||
default-function.role.ts # Rôle par défaut pour les fonctions serverless
|
||||
// vos entités (*.object.ts, *.function.ts, *.role.ts)
|
||||
utils/ # Optionnel - implémentations de gestionnaires et utilitaires
|
||||
```
|
||||
|
||||
At a high level:
|
||||
### Convention plutôt que configuration
|
||||
|
||||
* **package.json**: Declares the app name, version, engines (Node 24+, Yarn 4), and adds `twenty-sdk` plus scripts like `dev`, `sync`, `generate`, `create-entity`, `logs`, `uninstall`, and `auth` that delegate to the local `twenty` CLI.
|
||||
* **.gitignore**: Ignores common artifacts such as `node_modules`, `.yarn`, `generated/` (typed client), `dist/`, `build/`, coverage folders, log files, and `.env*` files.
|
||||
* **yarn.lock**, **.yarnrc.yml**, **.yarn/**: Lock and configure the Yarn 4 toolchain used by the project.
|
||||
* **.nvmrc**: Pins the Node.js version expected by the project.
|
||||
* **eslint.config.mjs** and **tsconfig.json**: Provide linting and TypeScript configuration for your app’s TypeScript sources.
|
||||
* **README.md**: A short README in the app root with basic instructions.
|
||||
* **src/**: The main place where you define your application-as-code:
|
||||
* `application.config.ts`: Global configuration for your app (metadata and runtime wiring). See “Application config” below.
|
||||
* `role.config.ts`: Default function role used by your serverless functions. See “Default function role” below.
|
||||
* Future entities, actions/functions, and any supporting code you add.
|
||||
Les applications adoptent une approche **convention plutôt que configuration** où les entités sont détectées par leur suffixe de fichier. Cela permet une organisation flexible dans le dossier `src/app/` :
|
||||
|
||||
Later commands will add more files and folders:
|
||||
| Suffixe de fichier | Type d’entité |
|
||||
| ------------------ | ------------------------------------- |
|
||||
| `*.object.ts` | Définitions d’objets personnalisés |
|
||||
| `*.function.ts` | Définitions de fonctions sans serveur |
|
||||
| `*.role.ts` | Définitions de rôles |
|
||||
|
||||
* `yarn generate` will create a `generated/` folder (typed Twenty client + workspace types).
|
||||
* `yarn create-entity` will add entity definition files under `src/` for your custom objects.
|
||||
### Structures de dossiers prises en charge
|
||||
|
||||
## Authentication
|
||||
Vous pouvez organiser vos entités selon l’un des schémas suivants :
|
||||
|
||||
The first time you run `yarn auth`, you'll be prompted for:
|
||||
**Traditionnelle (par type) :**
|
||||
|
||||
* API URL (defaults to http://localhost:3000 or your current workspace profile)
|
||||
* API key
|
||||
```text
|
||||
src/app/
|
||||
├── application.config.ts
|
||||
├── objects/
|
||||
│ └── postCard.object.ts
|
||||
├── functions/
|
||||
│ └── createPostCard.function.ts
|
||||
└── roles/
|
||||
└── admin.role.ts
|
||||
```
|
||||
|
||||
Your credentials are stored per-user in `~/.twenty/config.json`. You can maintain multiple profiles and switch using `--workspace <name>`.
|
||||
**Par fonctionnalité :**
|
||||
|
||||
Examples:
|
||||
```text
|
||||
src/app/
|
||||
├── application.config.ts
|
||||
└── post-card/
|
||||
├── postCard.object.ts
|
||||
├── createPostCard.function.ts
|
||||
└── postCardAdmin.role.ts
|
||||
```
|
||||
|
||||
**À plat :**
|
||||
|
||||
```text
|
||||
src/app/
|
||||
├── application.config.ts
|
||||
├── postCard.object.ts
|
||||
├── createPostCard.function.ts
|
||||
└── admin.role.ts
|
||||
```
|
||||
|
||||
Dans les grandes lignes :
|
||||
|
||||
* **package.json** : Déclare le nom de l’application, la version, les moteurs (Node 24+, Yarn 4), et ajoute `twenty-sdk` ainsi que des scripts comme `dev`, `sync`, `generate`, `create-entity`, `logs`, `uninstall` et `auth` qui délèguent à la CLI locale `twenty`.
|
||||
* **.gitignore** : Ignore les artefacts courants tels que `node_modules`, `.yarn`, `generated/` (client typé), `dist/`, `build/`, les dossiers de couverture, les fichiers journaux et les fichiers `.env*`.
|
||||
* **yarn.lock**, **.yarnrc.yml**, **.yarn/** : Verrouillent et configurent la chaîne d’outils Yarn 4 utilisée par le projet.
|
||||
* **.nvmrc** : Fige la version de Node.js attendue par le projet.
|
||||
* **eslint.config.mjs** et **tsconfig.json** : Fournissent la configuration de linting et TypeScript pour les sources TypeScript de votre application.
|
||||
* **README.md** : Un bref README à la racine de l’application avec des instructions de base.
|
||||
* **src/app/** : L’endroit principal où vous définissez votre application sous forme de code :
|
||||
* `application.config.ts` : Configuration globale de votre application (métadonnées et liaisons d’exécution). Voir « Configuration de l’application » ci-dessous.
|
||||
* `*.role.ts` : Définitions de rôles utilisées par vos fonctions sans serveur. Voir « Rôle de fonction par défaut » ci-dessous.
|
||||
* `*.object.ts` : Définitions d’objets personnalisés.
|
||||
* `*.function.ts` : Définitions de fonctions sans serveur.
|
||||
* **src/utils/** : Dossier facultatif pour les implémentations de gestionnaires et utilitaires.
|
||||
|
||||
Des commandes ultérieures ajouteront d’autres fichiers et dossiers :
|
||||
|
||||
* `yarn app:generate` créera un dossier `generated/` (client Twenty typé + types de l’espace de travail).
|
||||
* `yarn app:create-entity` ajoutera des fichiers de définition d’entité sous `src/app/` pour vos objets, fonctions ou rôles personnalisés.
|
||||
l
|
||||
|
||||
## Authentification
|
||||
|
||||
La première fois que vous exécutez `yarn auth:login`, il vous sera demandé :
|
||||
|
||||
* URL de l’API (par défaut http://localhost:3000 ou votre profil d’espace de travail actuel)
|
||||
* Clé API
|
||||
|
||||
Vos identifiants sont stockés par utilisateur dans `~/.twenty/config.json`. Vous pouvez gérer plusieurs profils et basculer entre eux.
|
||||
|
||||
### Gestion des espaces de travail
|
||||
|
||||
```bash filename="Terminal"
|
||||
# Login interactively (recommended)
|
||||
yarn auth
|
||||
yarn auth:login
|
||||
|
||||
# Use a specific workspace profile
|
||||
yarn auth --workspace my-custom-workspace
|
||||
# Login to a specific workspace profile
|
||||
yarn auth:login --workspace my-custom-workspace
|
||||
|
||||
# List all configured workspaces
|
||||
yarn auth:list
|
||||
|
||||
# Switch the default workspace (interactive)
|
||||
yarn auth:switch
|
||||
|
||||
# Switch to a specific workspace
|
||||
yarn auth:switch production
|
||||
|
||||
# Check current authentication status
|
||||
yarn auth:status
|
||||
```
|
||||
|
||||
## Use the SDK resources (types & config)
|
||||
Une fois que vous avez changé d'espace de travail avec `auth:switch`, toutes les commandes suivantes utiliseront cet espace de travail par défaut. Vous pouvez toujours le surcharger temporairement avec `--workspace <name>`.
|
||||
|
||||
The twenty-sdk provides typed building blocks you use inside your app. Below are the key pieces you'll touch most often.
|
||||
## Utiliser les ressources du SDK (types et configuration)
|
||||
|
||||
### Defining objects
|
||||
Le paquet twenty-sdk fournit des blocs de construction typés et des fonctions utilitaires que vous utilisez dans votre application. Voici les éléments clés que vous manipulerez le plus souvent.
|
||||
|
||||
Custom objects are regular TypeScript classes annotated with decorators from `twenty-sdk`. They live under `src/objects/` in your app and describe both schema and behavior for records in your workspace.
|
||||
### Fonctions utilitaires
|
||||
|
||||
Here is an example `postCard` object from the Hello World app:
|
||||
Le SDK fournit quatre fonctions utilitaires avec validation intégrée pour définir les entités de votre application :
|
||||
|
||||
| Fonction | Objectif |
|
||||
| ------------------ | ---------------------------------------------------------- |
|
||||
| `defineApp()` | Configurer les métadonnées de l’application |
|
||||
| `defineObject()` | Définir des objets personnalisés avec des champs |
|
||||
| `defineFunction()` | Définir des fonctions sans serveur avec des gestionnaires |
|
||||
| `defineRole()` | Configurer les autorisations de rôle et l’accès aux objets |
|
||||
|
||||
Ces fonctions valident votre configuration à l’exécution et offrent une meilleure autocomplétion IDE et une sécurité de typage accrue.
|
||||
|
||||
### Définir des objets
|
||||
|
||||
Les objets personnalisés décrivent à la fois le schéma et le comportement des enregistrements dans votre espace de travail. Utilisez `defineObject()` pour définir des objets avec validation intégrée :
|
||||
|
||||
```typescript
|
||||
import { type Note } from '../../generated';
|
||||
|
||||
import {
|
||||
type AddressField,
|
||||
Field,
|
||||
FieldType,
|
||||
type FullNameField,
|
||||
Object,
|
||||
OnDeleteAction,
|
||||
Relation,
|
||||
RelationType,
|
||||
STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
|
||||
} from 'twenty-sdk';
|
||||
// src/app/postCard.object.ts
|
||||
import { defineObject, FieldType } from 'twenty-sdk';
|
||||
|
||||
enum PostCardStatus {
|
||||
DRAFT = 'DRAFT',
|
||||
@@ -166,176 +238,186 @@ enum PostCardStatus {
|
||||
RETURNED = 'RETURNED',
|
||||
}
|
||||
|
||||
@Object({
|
||||
export default defineObject({
|
||||
universalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
|
||||
nameSingular: 'postCard',
|
||||
namePlural: 'postCards',
|
||||
labelSingular: 'Post card',
|
||||
labelPlural: 'Post cards',
|
||||
description: ' A post card object',
|
||||
labelSingular: 'Post Card',
|
||||
labelPlural: 'Post Cards',
|
||||
description: 'A post card object',
|
||||
icon: 'IconMail',
|
||||
})
|
||||
export class PostCard {
|
||||
@Field({
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
})
|
||||
content: string;
|
||||
|
||||
@Field({
|
||||
universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
|
||||
type: FieldType.FULL_NAME,
|
||||
label: 'Recipient name',
|
||||
icon: 'IconUser',
|
||||
})
|
||||
recipientName: FullNameField;
|
||||
|
||||
@Field({
|
||||
universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
|
||||
type: FieldType.ADDRESS,
|
||||
label: 'Recipient address',
|
||||
icon: 'IconHome',
|
||||
})
|
||||
recipientAddress: AddressField;
|
||||
|
||||
@Field({
|
||||
universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
|
||||
type: FieldType.SELECT,
|
||||
label: 'Status',
|
||||
icon: 'IconSend',
|
||||
defaultValue: `'${PostCardStatus.DRAFT}'`,
|
||||
options: [
|
||||
{ value: PostCardStatus.DRAFT, label: 'Draft', position: 0, color: 'gray' },
|
||||
{ value: PostCardStatus.SENT, label: 'Sent', position: 1, color: 'orange' },
|
||||
{ value: PostCardStatus.DELIVERED, label: 'Delivered', position: 2, color: 'green' },
|
||||
{ value: PostCardStatus.RETURNED, label: 'Returned', position: 3, color: 'orange' },
|
||||
],
|
||||
})
|
||||
status: PostCardStatus;
|
||||
|
||||
@Relation({
|
||||
universalIdentifier: 'c9e2b4f4-b9ad-4427-9b42-9971b785edfe',
|
||||
type: RelationType.ONE_TO_MANY,
|
||||
label: 'Notes',
|
||||
icon: 'IconComment',
|
||||
inverseSideTargetUniversalIdentifier: STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.note,
|
||||
onDelete: OnDeleteAction.CASCADE,
|
||||
})
|
||||
notes: Note[];
|
||||
|
||||
@Field({
|
||||
universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
|
||||
type: FieldType.DATE_TIME,
|
||||
label: 'Delivered at',
|
||||
icon: 'IconCheck',
|
||||
isNullable: true,
|
||||
defaultValue: null,
|
||||
})
|
||||
deliveredAt?: Date;
|
||||
}
|
||||
fields: [
|
||||
{
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
name: 'content',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
},
|
||||
{
|
||||
universalIdentifier: 'c6aa31f3-da76-4ac6-889f-475e226009ac',
|
||||
name: 'recipientName',
|
||||
type: FieldType.FULL_NAME,
|
||||
label: 'Recipient name',
|
||||
icon: 'IconUser',
|
||||
},
|
||||
{
|
||||
universalIdentifier: '95045777-a0ad-49ec-98f9-22f9fc0c8266',
|
||||
name: 'recipientAddress',
|
||||
type: FieldType.ADDRESS,
|
||||
label: 'Recipient address',
|
||||
icon: 'IconHome',
|
||||
},
|
||||
{
|
||||
universalIdentifier: '87b675b8-dd8c-4448-b4ca-20e5a2234a1e',
|
||||
name: 'status',
|
||||
type: FieldType.SELECT,
|
||||
label: 'Status',
|
||||
icon: 'IconSend',
|
||||
defaultValue: `'${PostCardStatus.DRAFT}'`,
|
||||
options: [
|
||||
{ value: PostCardStatus.DRAFT, label: 'Draft', position: 0, color: 'gray' },
|
||||
{ value: PostCardStatus.SENT, label: 'Sent', position: 1, color: 'orange' },
|
||||
{ value: PostCardStatus.DELIVERED, label: 'Delivered', position: 2, color: 'green' },
|
||||
{ value: PostCardStatus.RETURNED, label: 'Returned', position: 3, color: 'orange' },
|
||||
],
|
||||
},
|
||||
{
|
||||
universalIdentifier: 'e06abe72-5b44-4e7f-93be-afc185a3c433',
|
||||
name: 'deliveredAt',
|
||||
type: FieldType.DATE_TIME,
|
||||
label: 'Delivered at',
|
||||
icon: 'IconCheck',
|
||||
isNullable: true,
|
||||
defaultValue: null,
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
Key points:
|
||||
Points clés :
|
||||
|
||||
* The `@Object` decorator defines the object identity and labels used across the workspace; its `universalIdentifier` must be unique and stable across deployments.
|
||||
* Each `@Field` decorator defines a field on the object with a type, label, and its own stable `universalIdentifier`.
|
||||
* `@Relation` wires this object to other objects (standard or custom) and controls cascade behavior with `onDelete`.
|
||||
* You can scaffold new objects using `yarn create-entity`, which guides you through naming, fields, and relationships, then generates object files similar to the `postCard` example.
|
||||
* Utilisez `defineObject()` pour une validation intégrée et une meilleure prise en charge par l’IDE.
|
||||
* Le `universalIdentifier` doit être unique et stable entre les déploiements.
|
||||
* Chaque champ nécessite un `name`, un `type`, un `label` et son propre `universalIdentifier` stable.
|
||||
* Le tableau `fields` est facultatif — vous pouvez définir des objets sans champs personnalisés.
|
||||
* Vous pouvez générer de nouveaux objets avec `yarn app:create-entity`, qui vous guide à travers le nommage, les champs et les relations.
|
||||
|
||||
### Application config (application.config.ts)
|
||||
<Note>
|
||||
**Les champs de base sont créés automatiquement.** Lorsque vous définissez un objet personnalisé, Twenty ajoute automatiquement des champs standard tels que `name`, `createdAt`, `updatedAt`, `createdBy`, `position` et `deletedAt`. Vous n'avez pas besoin de les définir dans votre tableau `fields` — ajoutez uniquement vos champs personnalisés.
|
||||
</Note>
|
||||
|
||||
Every app has a single `application.config.ts` file that describes:
|
||||
<Accordion title="Alternative : syntaxe basée sur des décorateurs">
|
||||
Vous pouvez également définir des objets à l’aide de décorateurs TypeScript. Cette approche utilise une syntaxe basée sur les classes avec les décorateurs `@Object`, `@Field` et `@Relation` :
|
||||
|
||||
* **Who the app is**: identifiers, display name, and description.
|
||||
* **How its functions run**: which role they use for permissions.
|
||||
* **(Optional) variables**: key–value pairs exposed to your functions as environment variables.
|
||||
```typescript
|
||||
import {
|
||||
type AddressField,
|
||||
Field,
|
||||
FieldType,
|
||||
type FullNameField,
|
||||
Object,
|
||||
OnDeleteAction,
|
||||
Relation,
|
||||
RelationType,
|
||||
STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS,
|
||||
} from 'twenty-sdk';
|
||||
import { type Note } from '../../generated';
|
||||
|
||||
When you scaffold a new app, you start with a minimal config:
|
||||
@Object({
|
||||
universalIdentifier: '54b589ca-eeed-4950-a176-358418b85c05',
|
||||
nameSingular: 'postCard',
|
||||
namePlural: 'postCards',
|
||||
labelSingular: 'Post card',
|
||||
labelPlural: 'Post cards',
|
||||
description: 'A post card object',
|
||||
icon: 'IconMail',
|
||||
})
|
||||
export class PostCard {
|
||||
@Field({
|
||||
universalIdentifier: '58a0a314-d7ea-4865-9850-7fb84e72f30b',
|
||||
type: FieldType.TEXT,
|
||||
label: 'Content',
|
||||
description: "Postcard's content",
|
||||
icon: 'IconAbc',
|
||||
})
|
||||
content: string;
|
||||
|
||||
@Relation({
|
||||
universalIdentifier: 'c9e2b4f4-b9ad-4427-9b42-9971b785edfe',
|
||||
type: RelationType.ONE_TO_MANY,
|
||||
label: 'Notes',
|
||||
icon: 'IconComment',
|
||||
inverseSideTargetUniversalIdentifier: STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS.note,
|
||||
onDelete: OnDeleteAction.CASCADE,
|
||||
})
|
||||
notes: Note[];
|
||||
}
|
||||
```
|
||||
|
||||
Remarque : l’approche avec décorateurs requiert `experimentalDecorators` dans votre configuration TypeScript.
|
||||
</Accordion>
|
||||
|
||||
### Configuration de l’application (application.config.ts)
|
||||
|
||||
Chaque application dispose d’un seul fichier `application.config.ts` qui décrit :
|
||||
|
||||
* **Identité de l’application** : identifiants, nom d’affichage et description.
|
||||
* **Exécution des fonctions** : le rôle utilisé pour les autorisations.
|
||||
* **Variables (facultatif)** : paires clé–valeur exposées à vos fonctions en tant que variables d’environnement.
|
||||
|
||||
Utilisez `defineApp()` pour définir la configuration de votre application :
|
||||
|
||||
```typescript
|
||||
import { type ApplicationConfig } from 'twenty-sdk';
|
||||
// src/app/application.config.ts
|
||||
import { defineApp } from 'twenty-sdk';
|
||||
import { DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER } from './default-function.role';
|
||||
|
||||
const config: ApplicationConfig = {
|
||||
universalIdentifier: '<generated-app-uuid>',
|
||||
export default defineApp({
|
||||
universalIdentifier: '4ec0391d-18d5-411c-b2f3-266ddc1c3ef7',
|
||||
displayName: 'My Twenty App',
|
||||
description: 'My first Twenty app',
|
||||
functionRoleUniversalIdentifier: '<generated-role-uuid>',
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
||||
|
||||
You can gradually extend this file as your app grows. For example, you can add an icon and application-scoped variables:
|
||||
|
||||
```typescript
|
||||
import { type ApplicationConfig } from 'twenty-sdk';
|
||||
|
||||
const config: ApplicationConfig = {
|
||||
universalIdentifier: '<your-app-uuid>',
|
||||
displayName: 'My App',
|
||||
description: 'What your app does',
|
||||
icon: 'IconWorld', // Choose an icon by name
|
||||
icon: 'IconWorld',
|
||||
applicationVariables: {
|
||||
DEFAULT_RECIPIENT_NAME: {
|
||||
universalIdentifier: '<uuid>',
|
||||
description: 'Default recipient used by functions',
|
||||
universalIdentifier: '19e94e59-d4fe-4251-8981-b96d0a9f74de',
|
||||
description: 'Default recipient name for postcards',
|
||||
value: 'Jane Doe',
|
||||
isSecret: false,
|
||||
},
|
||||
},
|
||||
functionRoleUniversalIdentifier: '<your-role-uuid>',
|
||||
};
|
||||
|
||||
export default config;
|
||||
functionRoleUniversalIdentifier: DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER,
|
||||
});
|
||||
```
|
||||
|
||||
Notes:
|
||||
Notes :
|
||||
|
||||
* `universalIdentifier` fields are deterministic IDs you own; generate them once and keep them stable across syncs.
|
||||
* `applicationVariables` become environment variables for your functions (for example, `DEFAULT_RECIPIENT_NAME` is available as `process.env.DEFAULT_RECIPIENT_NAME`).
|
||||
* `functionRoleUniversalIdentifier` must match the role you define in `role.config.ts` (see below).
|
||||
* Les champs `universalIdentifier` sont des identifiants déterministes que vous possédez ; générez-les une fois et conservez-les stables entre les synchronisations.
|
||||
* `applicationVariables` deviennent des variables d’environnement pour vos fonctions (par exemple, `DEFAULT_RECIPIENT_NAME` est disponible sous `process.env.DEFAULT_RECIPIENT_NAME`).
|
||||
* `functionRoleUniversalIdentifier` doit correspondre au rôle que vous définissez dans votre fichier `*.role.ts` (voir ci-dessous).
|
||||
|
||||
#### Roles and permissions
|
||||
#### Rôles et autorisations
|
||||
|
||||
Applications can define roles that encapsulate permissions on your workspace’s objects and actions. The field `functionRoleUniversalIdentifier` in `application.config.ts` designates the default role used by your app’s serverless functions.
|
||||
Les applications peuvent définir des rôles qui encapsulent des autorisations sur les objets et actions de votre espace de travail. Le champ `functionRoleUniversalIdentifier` dans `application.config.ts` désigne le rôle par défaut utilisé par les fonctions sans serveur de votre application.
|
||||
|
||||
* The runtime API key injected as `TWENTY_API_KEY` is derived from this default function role.
|
||||
* The typed client will be restricted to the permissions granted to that role.
|
||||
* Follow least‑privilege: create a dedicated role with only the permissions your functions need, then reference its universal identifier.
|
||||
* La clé API d’exécution injectée sous `TWENTY_API_KEY` est dérivée de ce rôle de fonction par défaut.
|
||||
* Le client typé sera limité aux autorisations accordées à ce rôle.
|
||||
* Appliquez le principe du moindre privilège : créez un rôle dédié avec uniquement les autorisations nécessaires à vos fonctions, puis référencez son identifiant universel.
|
||||
|
||||
##### Default function role (role.config.ts)
|
||||
##### Rôle de fonction par défaut (\*.role.ts)
|
||||
|
||||
When you scaffold a new app, the CLI also creates `src/role.config.ts`. This file exports the default role your serverless functions will use at runtime:
|
||||
Lorsque vous générez une nouvelle application, la CLI crée également un fichier de rôle par défaut. Utilisez `defineRole()` pour définir des rôles avec validation intégrée :
|
||||
|
||||
```typescript
|
||||
import { PermissionFlag, type RoleConfig } from 'twenty-sdk';
|
||||
// src/app/default-function.role.ts
|
||||
import { defineRole, PermissionFlag } from 'twenty-sdk';
|
||||
|
||||
export const functionRole: RoleConfig = {
|
||||
universalIdentifier: '<generated-role-uuid>',
|
||||
label: 'My Twenty App default function role',
|
||||
description: 'My Twenty App default function role',
|
||||
canReadAllObjectRecords: true,
|
||||
canUpdateAllObjectRecords: true,
|
||||
canSoftDeleteAllObjectRecords: true,
|
||||
canDestroyAllObjectRecords: false,
|
||||
};
|
||||
```
|
||||
export const DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER =
|
||||
'b648f87b-1d26-4961-b974-0908fd991061';
|
||||
|
||||
The `universalIdentifier` of this role is automatically wired into `application.config.ts` as `functionRoleUniversalIdentifier`. In other words:
|
||||
|
||||
* **role.config.ts** defines what the default function role can do.
|
||||
* **application.config.ts** points to that role so your functions inherit its permissions.
|
||||
|
||||
As you move beyond the initial scaffold, you should tighten this role and make it explicit about what it can access. A more production-ready role might look closer to:
|
||||
|
||||
```typescript
|
||||
import { PermissionFlag, type RoleConfig } from 'twenty-sdk';
|
||||
|
||||
export const functionRole: RoleConfig = {
|
||||
universalIdentifier: '<your-role-uuid>',
|
||||
export default defineRole({
|
||||
universalIdentifier: DEFAULT_FUNCTION_ROLE_UNIVERSAL_IDENTIFIER,
|
||||
label: 'Default function role',
|
||||
description: 'Default role for function Twenty client',
|
||||
canReadAllObjectRecords: false,
|
||||
@@ -363,41 +445,41 @@ export const functionRole: RoleConfig = {
|
||||
canUpdateFieldValue: false,
|
||||
},
|
||||
],
|
||||
permissionFlags: ['APPLICATIONS'],
|
||||
};
|
||||
permissionFlags: [PermissionFlag.APPLICATIONS],
|
||||
});
|
||||
```
|
||||
|
||||
Notes:
|
||||
Le `universalIdentifier` de ce rôle est ensuite référencé dans `application.config.ts` en tant que `functionRoleUniversalIdentifier`. En d’autres termes :
|
||||
|
||||
* Start from the scaffolded role, then progressively restrict it following least‑privilege.
|
||||
* Replace the `objectPermissions` and `fieldPermissions` with the objects/fields your functions need.
|
||||
* `permissionFlags` control access to platform-level capabilities. Keep them minimal; add only what you need.
|
||||
* See a working example in the Hello World app: [`packages/twenty-apps/hello-world/src/roles/function-role.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/hello-world/src/roles/function-role.ts).
|
||||
* **\*.role.ts** définit ce que le rôle de fonction par défaut peut faire.
|
||||
* **application.config.ts** pointe vers ce rôle afin que vos fonctions héritent de ses autorisations.
|
||||
|
||||
### Serverless function config and entrypoint
|
||||
Notes :
|
||||
|
||||
Each function exports a main handler and a config describing its triggers. You can mix multiple trigger types.
|
||||
* Partez du rôle généré, puis restreignez-le progressivement en suivant le principe du moindre privilège.
|
||||
* Remplacez `objectPermissions` et `fieldPermissions` par les objets/champs dont vos fonctions ont besoin.
|
||||
* `permissionFlags` contrôlent l’accès aux capacités au niveau de la plateforme. Gardez-les au minimum ; n’ajoutez que ce dont vous avez besoin.
|
||||
* Voir un exemple fonctionnel dans l’application Hello World : [`packages/twenty-apps/hello-world/src/roles/function-role.ts`](https://github.com/twentyhq/twenty/blob/main/packages/twenty-apps/hello-world/src/roles/function-role.ts).
|
||||
|
||||
### Configuration et point d’entrée des fonctions sans serveur
|
||||
|
||||
Chaque fichier de fonction utilise `defineFunction()` pour exporter une configuration avec un gestionnaire et des déclencheurs facultatifs. Utilisez le suffixe de fichier `*.function.ts` pour la détection automatique.
|
||||
|
||||
```typescript
|
||||
// src/actions/create-new-post-card.ts
|
||||
import type {
|
||||
FunctionConfig,
|
||||
DatabaseEventPayload,
|
||||
ObjectRecordCreateEvent,
|
||||
CronPayload,
|
||||
} from 'twenty-sdk';
|
||||
import Twenty, { type Person } from '../generated';
|
||||
// src/app/createPostCard.function.ts
|
||||
import { defineFunction } from 'twenty-sdk';
|
||||
import type { DatabaseEventPayload, ObjectRecordCreateEvent, CronPayload, RoutePayload } from 'twenty-sdk';
|
||||
import Twenty, { type Person } from '../../generated';
|
||||
|
||||
// main handler can accept parameters from route, cron, or database events
|
||||
export const main = async (
|
||||
const handler = async (
|
||||
params:
|
||||
| { name?: string }
|
||||
| RoutePayload
|
||||
| DatabaseEventPayload<ObjectRecordCreateEvent<Person>>
|
||||
| CronPayload,
|
||||
) => {
|
||||
const client = new Twenty(); // generated typed client
|
||||
const name = 'name' in params
|
||||
? params.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
|
||||
const name = 'name' in params.queryStringParameters
|
||||
? params.queryStringParameters.name ?? process.env.DEFAULT_RECIPIENT_NAME ?? 'Hello world'
|
||||
: 'Hello world';
|
||||
|
||||
const result = await client.mutation({
|
||||
@@ -410,14 +492,15 @@ export const main = async (
|
||||
return result;
|
||||
};
|
||||
|
||||
export const config: FunctionConfig = {
|
||||
universalIdentifier: '<function-uuid>',
|
||||
export default defineFunction({
|
||||
universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
|
||||
name: 'create-new-post-card',
|
||||
timeoutSeconds: 2,
|
||||
handler,
|
||||
triggers: [
|
||||
// Public HTTP route trigger '/s/post-card/create'
|
||||
{
|
||||
universalIdentifier: '<route-trigger-uuid>',
|
||||
universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
|
||||
type: 'route',
|
||||
path: '/post-card/create',
|
||||
httpMethod: 'GET',
|
||||
@@ -425,39 +508,137 @@ export const config: FunctionConfig = {
|
||||
},
|
||||
// Cron trigger (CRON pattern)
|
||||
{
|
||||
universalIdentifier: '<cron-trigger-uuid>',
|
||||
universalIdentifier: 'dd802808-0695-49e1-98c9-d5c9e2704ce2',
|
||||
type: 'cron',
|
||||
pattern: '0 0 1 1 *',
|
||||
},
|
||||
// Database event trigger
|
||||
{
|
||||
universalIdentifier: '<db-trigger-uuid>',
|
||||
universalIdentifier: '203f1df3-4a82-4d06-a001-b8cf22a31156',
|
||||
type: 'databaseEvent',
|
||||
eventName: 'person.created',
|
||||
eventName: 'person.updated',
|
||||
updatedFields: ['name'],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
Types de déclencheurs courants :
|
||||
|
||||
* **route** : Expose votre fonction sur un chemin et une méthode HTTP **sous l’endpoint `/s/`** :
|
||||
|
||||
> p. ex. `path: '/post-card/create',` -> appel sur `<APP_URL>/s/post-card/create`
|
||||
|
||||
* **cron** : Exécute votre fonction selon une planification à l’aide d’une expression CRON.
|
||||
* **databaseEvent**: S'exécute lors des événements du cycle de vie des objets de l'espace de travail. Lorsque l'opération de l'événement est `updated`, des champs spécifiques à surveiller peuvent être spécifiés dans le tableau `updatedFields`. S'il est laissé indéfini ou vide, toute mise à jour déclenchera la fonction.
|
||||
|
||||
> p. ex. `person.updated`
|
||||
|
||||
Notes :
|
||||
|
||||
* Le tableau `triggers` est facultatif. Les fonctions sans déclencheurs peuvent servir de fonctions utilitaires appelées par d’autres fonctions.
|
||||
* Vous pouvez combiner plusieurs types de déclencheurs dans une seule fonction.
|
||||
|
||||
### Charge utile du déclencheur de route
|
||||
|
||||
<Warning>
|
||||
**Changement incompatible (v1.16, janvier 2026):** Le format de la charge utile du déclencheur de route a changé. Avant la v1.16, les paramètres de requête, les paramètres de chemin et le corps de la requête étaient envoyés directement en tant que charge utile. À partir de la v1.16, ils sont imbriqués dans un objet `RoutePayload` structuré.
|
||||
|
||||
**Avant la v1.16 :**
|
||||
|
||||
```typescript
|
||||
const handler = async (params) => {
|
||||
const { param1, param2 } = params; // Direct access
|
||||
};
|
||||
```
|
||||
|
||||
**Après la v1.16 :**
|
||||
|
||||
```typescript
|
||||
const handler = async (event: RoutePayload) => {
|
||||
const { param1, param2 } = event.body; // Access via .body
|
||||
const { queryParam } = event.queryStringParameters;
|
||||
const { id } = event.pathParameters;
|
||||
};
|
||||
```
|
||||
|
||||
**Pour migrer les fonctions existantes :** Mettez à jour votre gestionnaire pour déstructurer à partir de `event.body`, `event.queryStringParameters` ou `event.pathParameters` plutôt que directement à partir de l'objet params.
|
||||
</Warning>
|
||||
|
||||
Lorsqu'un déclencheur de route appelle votre fonction, elle reçoit un objet `RoutePayload` qui suit le format AWS HTTP API v2. Importez le type depuis `twenty-sdk` :
|
||||
|
||||
```typescript
|
||||
import { defineFunction, type RoutePayload } from 'twenty-sdk';
|
||||
|
||||
const handler = async (event: RoutePayload) => {
|
||||
// Access request data
|
||||
const { headers, queryStringParameters, pathParameters, body } = event;
|
||||
|
||||
// HTTP method and path are available in requestContext
|
||||
const { method, path } = event.requestContext.http;
|
||||
|
||||
return { message: 'Success' };
|
||||
};
|
||||
```
|
||||
|
||||
Common trigger types:
|
||||
Le type `RoutePayload` a la structure suivante :
|
||||
|
||||
* route: Exposes your function on an HTTP path and method **under the `/s/` endpoint**:
|
||||
| Nom de la propriété | Type | Description |
|
||||
| ---------------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| `headers` | `Record<string, string \| undefined>` | En-têtes HTTP (uniquement ceux répertoriés dans `forwardedRequestHeaders`) |
|
||||
| `queryStringParameters` | `Record<string, string \| undefined>` | Paramètres de la chaîne de requête (plusieurs valeurs séparées par des virgules) |
|
||||
| `pathParameters` | `Record<string, string \| undefined>` | Paramètres de chemin extraits du modèle de route (p. ex., `/users/:id` → `{ id: '123' }`) |
|
||||
| `corps du message` | `object \| null` | Corps de la requête analysé (JSON) |
|
||||
| `isBase64Encoded` | `booléen` | Indique si le corps est encodé en base64 |
|
||||
| `requestContext.http.method` | `string` | Méthode HTTP (GET, POST, PUT, PATCH, DELETE) |
|
||||
| `requestContext.http.path` | `string` | Chemin de la requête brut |
|
||||
|
||||
> e.g. `path: '/post-card/create',` -> call on `<APP_URL>/s/post-card/create`
|
||||
### Transfert des en-têtes HTTP
|
||||
|
||||
* cron: Runs your function on a schedule using a CRON expression.
|
||||
* databaseEvent: Runs on workspace object lifecycle events
|
||||
Par défaut, les en-têtes HTTP des requêtes entrantes ne sont pas transmis à votre fonction sans serveur pour des raisons de sécurité. Pour accéder à des en-têtes spécifiques, listez-les explicitement dans le tableau `forwardedRequestHeaders` :
|
||||
|
||||
> e.g. `person.created`
|
||||
```typescript
|
||||
export default defineFunction({
|
||||
universalIdentifier: 'e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf',
|
||||
name: 'webhook-handler',
|
||||
handler,
|
||||
triggers: [
|
||||
{
|
||||
universalIdentifier: 'c9f84c8d-b26d-40d1-95dd-4f834ae5a2c6',
|
||||
type: 'route',
|
||||
path: '/webhook',
|
||||
httpMethod: 'POST',
|
||||
isAuthRequired: false,
|
||||
forwardedRequestHeaders: ['x-webhook-signature', 'content-type'],
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
You can create new functions in two ways:
|
||||
Dans votre gestionnaire, vous pouvez ensuite accéder à ces en-têtes :
|
||||
|
||||
* **Scaffolded**: Run `yarn create-entity --path <custom-path>` and choose the option to add a new function. This generates a starter file under `<custom-path>` with a `main` handler and a `config` block similar to the example above.
|
||||
* **Manual**: Create a new file and export `main` and `config` yourself, following the same pattern.
|
||||
```typescript
|
||||
const handler = async (event: RoutePayload) => {
|
||||
const signature = event.headers['x-webhook-signature'];
|
||||
const contentType = event.headers['content-type'];
|
||||
|
||||
### Generated typed client
|
||||
// Validate webhook signature...
|
||||
return { received: true };
|
||||
};
|
||||
```
|
||||
|
||||
Run yarn generate to create a local typed client in generated/ based on your workspace schema. Use it in your functions:
|
||||
<Note>
|
||||
Les noms d'en-têtes sont normalisés en minuscules. Accédez-y en utilisant des clés en minuscules (par exemple, `event.headers['content-type']`).
|
||||
</Note>
|
||||
|
||||
Vous pouvez créer de nouvelles fonctions de deux façons :
|
||||
|
||||
* **Générée** : Exécutez `yarn app:create-entity` et choisissez l’option pour ajouter une nouvelle fonction. Cela génère un fichier de démarrage avec un gestionnaire et une configuration.
|
||||
* **Manuelle** : Créez un nouveau fichier `*.function.ts` et utilisez `defineFunction()`, en suivant le même modèle.
|
||||
|
||||
### Client typé généré
|
||||
|
||||
Exécutez yarn app:generate pour créer un client typé local dans generated/ basé sur le schéma de votre espace de travail. Utilisez-le dans vos fonctions :
|
||||
|
||||
```typescript
|
||||
import Twenty from './generated';
|
||||
@@ -466,34 +647,34 @@ const client = new Twenty();
|
||||
const { me } = await client.query({ me: { id: true, displayName: true } });
|
||||
```
|
||||
|
||||
The client is re-generated by `yarn generate`. Re-run after changing your objects and `yarn sync` or when onboarding to a new workspace.
|
||||
Le client est régénéré par `yarn app:generate`. Relancez la commande après avoir modifié vos objets et exécuté `yarn app:sync`, ou lors de l’intégration à un nouvel espace de travail.
|
||||
|
||||
#### Runtime credentials in serverless functions
|
||||
#### Identifiants d’exécution dans les fonctions sans serveur
|
||||
|
||||
When your function runs on Twenty, the platform injects credentials as environment variables before your code executes:
|
||||
Lorsque votre fonction s’exécute sur Twenty, la plateforme injecte des identifiants sous forme de variables d’environnement avant l’exécution de votre code :
|
||||
|
||||
* `TWENTY_API_URL`: Base URL of the Twenty API your app targets.
|
||||
* `TWENTY_API_KEY`: Short‑lived key scoped to your application’s default function role.
|
||||
* `TWENTY_API_URL` : URL de base de l’API Twenty ciblée par votre application.
|
||||
* `TWENTY_API_KEY` : Clé de courte durée limitée au rôle de fonction par défaut de votre application.
|
||||
|
||||
Notes:
|
||||
|
||||
* You do not need to pass URL or API key to the generated client. It reads `TWENTY_API_URL` and `TWENTY_API_KEY` from process.env at runtime.
|
||||
* The API key’s permissions are determined by the role referenced in your `application.config.ts` via `functionRoleUniversalIdentifier`. This is the default role used by serverless functions of your application.
|
||||
* Applications can define roles to follow least‑privilege. Grant only the permissions your functions need, then point `functionRoleUniversalIdentifier` to that role’s universal identifier.
|
||||
* Vous n’avez pas besoin de passer l’URL ou la clé API au client généré. Il lit `TWENTY_API_URL` et `TWENTY_API_KEY` depuis process.env à l’exécution.
|
||||
* Les autorisations de la clé API sont déterminées par le rôle référencé dans votre `application.config.ts` via `functionRoleUniversalIdentifier`. Il s’agit du rôle par défaut utilisé par les fonctions sans serveur de votre application.
|
||||
* Les applications peuvent définir des rôles pour appliquer le principe du moindre privilège. N’accordez que les autorisations dont vos fonctions ont besoin, puis faites pointer `functionRoleUniversalIdentifier` vers l’identifiant universel de ce rôle.
|
||||
|
||||
### Hello World example
|
||||
### Exemple Hello World
|
||||
|
||||
Explore a minimal, end-to-end example that demonstrates objects, functions, and multiple triggers [here](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world):
|
||||
Découvrez un exemple minimal de bout en bout qui démontre des objets, des fonctions et plusieurs déclencheurs [ici](https://github.com/twentyhq/twenty/tree/main/packages/twenty-apps/hello-world) :
|
||||
|
||||
## Manual setup (without the scaffolder)
|
||||
## Configuration manuelle (sans l’outil de scaffolding)
|
||||
|
||||
While we recommend using `create-twenty-app` for the best getting-started experience, you can also set up a project manually. Do not install the CLI globally. Instead, add `twenty-sdk` as a local dependency and wire scripts in your package.json:
|
||||
Même si nous recommandons d’utiliser `create-twenty-app` pour une expérience de démarrage optimale, vous pouvez également configurer un projet manuellement. N’installez pas la CLI globalement. Ajoutez plutôt `twenty-sdk` comme dépendance locale et reliez des scripts dans votre package.json :
|
||||
|
||||
```bash filename="Terminal"
|
||||
yarn add -D twenty-sdk
|
||||
```
|
||||
|
||||
Then add scripts like these:
|
||||
Ajoutez ensuite des scripts comme ceux-ci :
|
||||
|
||||
```json filename="package.json"
|
||||
{
|
||||
@@ -510,13 +691,13 @@ Then add scripts like these:
|
||||
}
|
||||
```
|
||||
|
||||
Now you can run the same commands via Yarn, e.g. `yarn dev`, `yarn sync`, etc.
|
||||
Vous pouvez désormais exécuter les mêmes commandes via Yarn, par exemple `yarn app:dev`, `yarn app:sync`, etc.
|
||||
|
||||
## Troubleshooting
|
||||
## Résolution des problèmes
|
||||
|
||||
* Authentication errors: run `yarn auth` and ensure your API key has the required permissions.
|
||||
* Cannot connect to server: verify the API URL and that the Twenty server is reachable.
|
||||
* Types or client missing/outdated: run `yarn generate` and then `yarn dev`.
|
||||
* Dev mode not syncing: ensure `yarn dev` is running and that changes are not ignored by your environment.
|
||||
* Erreurs d’authentification : exécutez `yarn auth:login` et assurez-vous que votre clé API dispose des autorisations requises.
|
||||
* Impossible de se connecter au serveur : vérifiez l’URL de l’API et que le serveur Twenty est accessible.
|
||||
* Types ou client manquants/obsolètes : exécutez `yarn app:generate` puis `yarn app:dev`.
|
||||
* Le mode dev ne se synchronise pas : assurez-vous que `yarn app:dev` est en cours d’exécution et que les modifications ne sont pas ignorées par votre environnement.
|
||||
|
||||
Discord Help Channel: https://discord.com/channels/1130383047699738754/1130386664812982322
|
||||
Canal d’aide Discord : https://discord.com/channels/1130383047699738754/1130386664812982322
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
---
|
||||
title: Webhooks
|
||||
description: Receive real-time notifications when events occur in your CRM.
|
||||
description: Recevez des notifications en temps réel lorsque des événements se produisent dans votre CRM.
|
||||
---
|
||||
|
||||
import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
|
||||
|
||||
Webhooks push data to your systems in real-time when events occur in Twenty — no polling required. Use them to keep external systems in sync, trigger automations, or send alerts.
|
||||
Les webhooks envoient des données à vos systèmes en temps réel lorsque des événements se produisent dans Twenty — aucune interrogation n'est nécessaire. Utilisez-les pour maintenir les systèmes externes synchronisés, déclencher des automatisations ou envoyer des alertes.
|
||||
|
||||
## Create a Webhook
|
||||
## Créer un Webhook
|
||||
|
||||
1. Go to **Settings → APIs & Webhooks → Webhooks**
|
||||
2. Click **+ Create webhook**
|
||||
3. Enter your webhook URL (must be publicly accessible)
|
||||
4. Click **Save**
|
||||
1. Allez dans **Paramètres → API & Webhooks → Webhooks**
|
||||
2. Cliquez sur **+ Créer un webhook**
|
||||
3. Saisissez votre URL de webhook (doit être publiquement accessible)
|
||||
4. Cliquez sur **Enregistrer**
|
||||
|
||||
The webhook activates immediately and starts sending notifications.
|
||||
Le webhook s'active immédiatement et commence à envoyer des notifications.
|
||||
|
||||
<VimeoEmbed videoId="928786708" title="Creating a webhook" />
|
||||
<VimeoEmbed videoId="928786708" title="Création d'un webhook" />
|
||||
|
||||
### Manage Webhooks
|
||||
### Gérer les Webhooks
|
||||
|
||||
**Edit**: Click the webhook → Update URL → **Save**
|
||||
**Modifier**: Cliquez sur le webhook → Mettre à jour l'URL → **Enregistrer**
|
||||
|
||||
**Delete**: Click the webhook → **Delete** → Confirm
|
||||
**Supprimer**: Cliquez sur le webhook → **Supprimer** → Confirmer
|
||||
|
||||
## Events
|
||||
## Événements
|
||||
|
||||
Twenty sends webhooks for these event types:
|
||||
Twenty envoie des webhooks pour ces types d'événements :
|
||||
|
||||
| Event | Example |
|
||||
| ------------------ | ---------------------------------------------------------- |
|
||||
| **Record Created** | `person.created`, `company.created`, `note.created` |
|
||||
| **Record Updated** | `person.updated`, `company.updated`, `opportunity.updated` |
|
||||
| **Record Deleted** | `person.deleted`, `company.deleted` |
|
||||
| Événement | Exemple |
|
||||
| ----------------------------- | ---------------------------------------------------------- |
|
||||
| **Enregistrement créé** | `person.created`, `company.created`, `note.created` |
|
||||
| **Enregistrement mis à jour** | `person.updated`, `company.updated`, `opportunity.updated` |
|
||||
| **Enregistrement supprimé** | `person.deleted`, `company.deleted` |
|
||||
|
||||
All event types are sent to your webhook URL. Event filtering may be added in future releases.
|
||||
Tous les types d'événements sont envoyés à votre URL de webhook. Le filtrage des événements pourrait être ajouté dans de prochaines versions.
|
||||
|
||||
## Payload Format
|
||||
## Format de la charge utile
|
||||
|
||||
Each webhook sends an HTTP POST with a JSON body:
|
||||
Chaque webhook envoie une requête HTTP POST avec un corps JSON :
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -55,35 +55,35 @@ Each webhook sends an HTTP POST with a JSON body:
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Description |
|
||||
| ----------- | ------------------------------------------------ |
|
||||
| `event` | What happened (e.g., `person.created`) |
|
||||
| `data` | The full record that was created/updated/deleted |
|
||||
| `timestamp` | When the event occurred (UTC) |
|
||||
| Champ | Description |
|
||||
| ------------ | ----------------------------------------------------------- |
|
||||
| `événement` | Ce qui s'est passé (par exemple, `person.created`) |
|
||||
| `données` | L'enregistrement complet qui a été créé/mis à jour/supprimé |
|
||||
| `horodatage` | Quand l'événement s'est produit (UTC) |
|
||||
|
||||
<Note>
|
||||
Respond with a **2xx HTTP status** (200-299) to acknowledge receipt. Non-2xx responses are logged as delivery failures.
|
||||
Répondez avec un **statut HTTP 2xx** (200-299) pour accuser réception. Les réponses non 2xx sont consignées comme des échecs de livraison.
|
||||
</Note>
|
||||
|
||||
## Webhook Validation
|
||||
## Validation des Webhooks
|
||||
|
||||
Twenty signs each webhook request for security. Validate signatures to ensure requests are authentic.
|
||||
Twenty signe chaque requête de webhook pour des raisons de sécurité. Validez les signatures pour garantir l'authenticité des requêtes.
|
||||
|
||||
### Headers
|
||||
### En-têtes
|
||||
|
||||
| Header | Description |
|
||||
| ---------------------------- | --------------------- |
|
||||
| `X-Twenty-Webhook-Signature` | HMAC SHA256 signature |
|
||||
| `X-Twenty-Webhook-Timestamp` | Request timestamp |
|
||||
| En-tête | Description |
|
||||
| ---------------------------- | ------------------------ |
|
||||
| `X-Twenty-Webhook-Signature` | Signature HMAC SHA256 |
|
||||
| `X-Twenty-Webhook-Timestamp` | Horodatage de la requête |
|
||||
|
||||
### Validation Steps
|
||||
### Étapes de validation
|
||||
|
||||
1. Get the timestamp from `X-Twenty-Webhook-Timestamp`
|
||||
2. Create the string: `{timestamp}:{JSON payload}`
|
||||
3. Compute HMAC SHA256 using your webhook secret
|
||||
4. Compare with `X-Twenty-Webhook-Signature`
|
||||
1. Récupérez l'horodatage depuis `X-Twenty-Webhook-Timestamp`
|
||||
2. Créez la chaîne : `{timestamp}:{JSON payload}`
|
||||
3. Calculez le HMAC SHA256 en utilisant votre secret de webhook
|
||||
4. Comparez avec `X-Twenty-Webhook-Signature`
|
||||
|
||||
### Example (Node.js)
|
||||
### Exemple (Node.js)
|
||||
|
||||
```javascript
|
||||
const crypto = require("crypto");
|
||||
@@ -103,10 +103,10 @@ const isValid = expectedSignature === req.headers["x-twenty-webhook-signature"];
|
||||
|
||||
## Webhooks vs Workflows
|
||||
|
||||
| Method | Direction | Use Case |
|
||||
| ---------------------------- | --------- | ---------------------------------------------------------- |
|
||||
| **Webhooks** | OUT | Automatically notify external systems of any record change |
|
||||
| **Workflow + HTTP Request** | OUT | Send data out with custom logic (filters, transformations) |
|
||||
| **Workflow Webhook Trigger** | IN | Receive data into Twenty from external systems |
|
||||
| Méthode | Direction | Cas d'utilisation |
|
||||
| -------------------------------------- | --------- | ------------------------------------------------------------------------------------- |
|
||||
| **Webhooks** | SORTIE | Notifier automatiquement les systèmes externes de toute modification d'enregistrement |
|
||||
| **Workflow + requête HTTP** | SORTIE | Envoyer des données avec une logique personnalisée (filtres, transformations) |
|
||||
| **Déclencheur de webhook de workflow** | ENTRÉE | Recevoir des données dans Twenty depuis des systèmes externes |
|
||||
|
||||
For receiving external data, see [Set Up a Webhook Trigger](/l/fr/user-guide/workflows/how-tos/connect-to-other-tools/set-up-a-webhook-trigger).
|
||||
Pour recevoir des données externes, voir [Configurer un déclencheur de webhook](/l/fr/user-guide/workflows/how-tos/connect-to-other-tools/set-up-a-webhook-trigger).
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
---
|
||||
title: Extend
|
||||
description: Extend Twenty's functionality with APIs, webhooks, and custom apps.
|
||||
title: Étendre
|
||||
description: Étendez les fonctionnalités de Twenty avec des API, des webhooks et des applications personnalisées.
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/integrations/plug.png" alt="AI" />
|
||||
<img src="/images/user-guide/integrations/plug.png" alt="IA" />
|
||||
</Frame>
|
||||
|
||||
## Overview
|
||||
## Vue d'ensemble
|
||||
|
||||
Twenty is designed to be extensible. Use our APIs, webhooks, and app framework to integrate with your existing tools and build custom functionality.
|
||||
Twenty est conçu pour être extensible. Utilisez nos API, nos webhooks et notre framework d'applications pour vous intégrer à vos outils existants et créer des fonctionnalités personnalisées.
|
||||
|
||||
## What You Can Do
|
||||
## Ce que vous pouvez faire
|
||||
|
||||
* **APIs**: Query and modify your CRM data programmatically using REST or GraphQL
|
||||
* **Webhooks**: Receive real-time notifications when events occur in Twenty
|
||||
* **Apps**: Build custom applications that extend Twenty's capabilities - Coming soon!
|
||||
* **API** : Interrogez et modifiez vos données CRM par programmation à l'aide de REST ou de GraphQL
|
||||
* **Webhooks** : Recevez des notifications en temps réel lorsque des événements se produisent dans Twenty
|
||||
* **Applications** : Créez des applications personnalisées qui étendent les capacités de Twenty - Bientôt disponible !
|
||||
|
||||
## Getting Started
|
||||
## Prise en main
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="APIs" icon="code" href="/l/fr/developers/extend/capabilities/apis">
|
||||
Connect to Twenty programmatically
|
||||
<Card title="API" icon="code" href="/l/fr/developers/extend/capabilities/apis">
|
||||
Connectez-vous à Twenty par programmation
|
||||
</Card>
|
||||
|
||||
<Card title="Webhooks" icon="bell" href="/l/fr/developers/extend/capabilities/webhooks">
|
||||
Get notified of events in real-time
|
||||
Recevez des notifications d'événements en temps réel
|
||||
</Card>
|
||||
|
||||
<Card title="Apps" icon="puzzle-piece" href="/l/fr/developers/extend/capabilities/apps">
|
||||
Build customizations as code (Alpha)
|
||||
<Card title="Applications" icon="puzzle-piece" href="/l/fr/developers/extend/capabilities/apps">
|
||||
Créez des personnalisations sous forme de code (Alpha)
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
---
|
||||
title: Getting Started
|
||||
description: Welcome to Twenty Developer Documentation, your resources for extending, self-hosting, and contributing to Twenty.
|
||||
title: Prise en main
|
||||
description: Bienvenue dans la documentation pour développeurs de Twenty, vos ressources pour étendre, auto-héberger et contribuer à Twenty.
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
<CardGroup cols={3}>
|
||||
<Card href="/l/fr/developers/extend/extend" img="/images/user-guide/integrations/plug.png">
|
||||
<CardTitle>Extend</CardTitle>
|
||||
Build integrations with APIs, webhooks, and custom apps.
|
||||
<CardTitle>Étendre</CardTitle>
|
||||
Créez des intégrations avec des API, des webhooks et des applications personnalisées.
|
||||
</Card>
|
||||
|
||||
<Card href="/l/fr/developers/self-host/self-host" img="/images/user-guide/what-is-twenty/20.png">
|
||||
<CardTitle>Self-Host</CardTitle>
|
||||
Deploy and manage Twenty on your own infrastructure.
|
||||
<CardTitle>Auto-héberger</CardTitle>
|
||||
Déployez et gérez Twenty sur votre propre infrastructure.
|
||||
</Card>
|
||||
|
||||
<Card href="/l/fr/developers/contribute/contribute" img="/images/user-guide/github/github-header.png">
|
||||
<CardTitle>Contribute</CardTitle>
|
||||
Join our open-source community and contribute to Twenty.
|
||||
<CardTitle>Contribuer</CardTitle>
|
||||
Rejoignez notre communauté open source et contribuez à Twenty.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
---
|
||||
title: Other methods
|
||||
title: Autres méthodes
|
||||
---
|
||||
|
||||
<Warning>
|
||||
This document is maintained by the community. It might contain issues.
|
||||
Ce document est maintenu par la communauté. Il pourrait contenir des problèmes.
|
||||
</Warning>
|
||||
|
||||
## Kubernetes via Terraform and Manifests
|
||||
## Kubernetes via Terraform et Manifests
|
||||
|
||||
Community-led documentation for Kubernetes deployment is available [here](https://github.com/twentyhq/twenty/tree/main/packages/twenty-docker/k8s)
|
||||
La documentation communautaire pour le déploiement de Kubernetes est disponible [ici](https://github.com/twentyhq/twenty/tree/main/packages/twenty-docker/k8s)
|
||||
|
||||
### Coolify
|
||||
|
||||
Deploy Twenty on servers using Coolify. (official image on Coolify will be available soon)
|
||||
Déployer Twenty sur les serveurs avec Coolify. (l'image officielle sur Coolify sera bientôt disponible)
|
||||
|
||||
[Coolify documentation](https://coolify.io/docs/get-started/introduction)
|
||||
[Documentation Coolify](https://coolify.io/docs/get-started/introduction)
|
||||
|
||||
### EasyPanel
|
||||
|
||||
Deploy Twenty on EasyPanel with the community maintained template below.
|
||||
Déployez Twenty sur EasyPanel avec le modèle maintenu par la communauté ci-dessous.
|
||||
|
||||
[Deploy on EasyPanel](https://easypanel.io/docs/templates/twenty)
|
||||
[Déployer sur EasyPanel](https://easypanel.io/docs/templates/twenty)
|
||||
|
||||
### Elest.io
|
||||
|
||||
Deploy Twenty on servers with Elest.io using link below.
|
||||
Déployez Twenty sur les serveurs avec Elest.io en utilisant le lien ci-dessous.
|
||||
|
||||
[Deploy on Elest.io](https://elest.io/open-source/twenty)
|
||||
[Déployer sur Elest.io](https://elest.io/open-source/twenty)
|
||||
|
||||
### Twenty on Railway
|
||||
### Twenty sur Railway
|
||||
|
||||
Deploy Twenty on Railway with the community maintained template below.
|
||||
Déployez Twenty sur Railway avec le modèle maintenu par la communauté ci-dessous.
|
||||
|
||||
[](https://railway.com/deploy/nAL3hA)
|
||||
[](https://railway.com/deploy/nAL3hA)
|
||||
|
||||
### Twenty on Sealos
|
||||
### Twenty sur Sealos
|
||||
|
||||
Deploy Twenty on Sealos with the community maintained template below.
|
||||
Déployez Twenty sur Sealos avec le modèle maintenu par la communauté ci-dessous.
|
||||
|
||||
[](https://sealos.io/products/app-store/twenty)
|
||||
[](https://sealos.io/products/app-store/twenty)
|
||||
|
||||
## Others
|
||||
## Autres
|
||||
|
||||
Please feel free to Open a PR to add more Cloud Provider options.
|
||||
N'hésitez pas à ouvrir une PR pour ajouter d'autres options de fournisseur cloud.
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
---
|
||||
title: 1-Click w/ Docker Compose
|
||||
title: 1-Clic avec Docker Compose
|
||||
---
|
||||
|
||||
<Warning>
|
||||
Docker containers are for production hosting or self-hosting, for the contribution please check the [Local Setup](/l/fr/developers/contribute/capabilities/local-setup).
|
||||
Les conteneurs Docker sont destinés à l'hébergement en production ou à l'auto-hébergement, pour la contribution veuillez consulter le [Configuration Locale](/l/fr/developers/contribute/capabilities/local-setup).
|
||||
</Warning>
|
||||
|
||||
## Overview
|
||||
## Vue d'ensemble
|
||||
|
||||
This guide provides step-by-step instructions to install and configure the Twenty application using Docker Compose. The aim is to make the process straightforward and prevent common pitfalls that could break your setup.
|
||||
Ce guide fournit des instructions pas-à-pas pour installer et configurer l'application Twenty à l'aide de Docker Compose. L'objectif est de simplifier le processus et d'éviter les erreurs courantes qui pourraient compromettre votre configuration.
|
||||
|
||||
**Important:** Only modify settings explicitly mentioned in this guide. Altering other configurations may lead to issues.
|
||||
**Important :** Modifiez uniquement les paramètres explicitement mentionnés dans ce guide. Modifier d'autres configurations peut entraîner des problèmes.
|
||||
|
||||
See docs [Setup Environment Variables](/l/fr/developers/self-host/capabilities/setup) for advanced configuration. All environment variables must be declared in the docker-compose.yml file at the server and / or worker level depending on the variable.
|
||||
Consultez les documents [Configurer les Variables d’Environnement](/l/fr/developers/self-host/capabilities/setup) pour la configuration avancée. Toutes les variables d'environnement doivent être déclarées dans le fichier docker-compose.yml au niveau du serveur et/ou du travailleur, selon la variable.
|
||||
|
||||
## System Requirements
|
||||
## Exigences du Système
|
||||
|
||||
* RAM: Ensure your environment has at least 2GB of RAM. Insufficient memory can cause processes to crash.
|
||||
* Docker & Docker Compose: Make sure both are installed and up-to-date.
|
||||
* RAM : Assurez-vous que votre environnement dispose d'au moins 2 Go de RAM. Une mémoire insuffisante peut provoquer des plantages des processus.
|
||||
* Docker & Docker Compose : Assurez-vous que les deux sont installés et à jour.
|
||||
|
||||
## Option 1: One-line script
|
||||
## Option 1 : Script en une seule ligne
|
||||
|
||||
Install the latest stable version of Twenty with a single command:
|
||||
Installez la dernière version stable de Twenty avec une seule commande :
|
||||
|
||||
```bash
|
||||
bash <(curl -sL https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/scripts/install.sh)
|
||||
```
|
||||
|
||||
To install a specific version or branch:
|
||||
Pour installer une version ou une branche spécifique :
|
||||
|
||||
```bash
|
||||
VERSION=vx.y.z BRANCH=branch-name bash <(curl -sL https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/scripts/install.sh)
|
||||
```
|
||||
|
||||
* Replace x.y.z with the desired version number.
|
||||
* Replace branch-name with the name of the branch you want to install.
|
||||
* Remplacez x.y.z par le numéro de version désiré.
|
||||
* Remplacez nom-branche par le nom de la branche que vous souhaitez installer.
|
||||
|
||||
## Option 2: Manual steps
|
||||
## Option 2 : Étapes manuelles
|
||||
|
||||
Follow these steps for a manual setup.
|
||||
Suivez ces étapes pour une installation manuelle.
|
||||
|
||||
### Step 1: Set Up the Environment File
|
||||
### Étape 1 : Configurez le Fichier Environnement
|
||||
|
||||
1. **Create the .env File**
|
||||
1. **Créez le Fichier .env**
|
||||
|
||||
Copy the example environment file to a new .env file in your working directory:
|
||||
Copiez le fichier d'exemple d'environnement vers un nouveau fichier .env dans votre répertoire de travail :
|
||||
|
||||
```bash
|
||||
curl -o .env https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-docker/.env.example
|
||||
```
|
||||
|
||||
2. **Generate Secret Tokens**
|
||||
2. **Générez des Jetons Secrets**
|
||||
|
||||
Run the following command to generate a unique random string:
|
||||
Exécutez la commande suivante pour générer une chaîne aléatoire unique :
|
||||
|
||||
```bash
|
||||
openssl rand -base64 32
|
||||
```
|
||||
|
||||
**Important:** Keep this value secret / do not share it.
|
||||
**Important :** Gardez cette valeur secrète / ne la partagez pas.
|
||||
|
||||
3. **Update the `.env`**
|
||||
3. **Mettez à jour le `.env`**
|
||||
|
||||
Replace the placeholder value in your .env file with the generated token:
|
||||
Remplacez la valeur de l'espace réservé dans votre fichier .env par le jeton généré :
|
||||
|
||||
```ini
|
||||
APP_SECRET=first_random_string
|
||||
```
|
||||
|
||||
4. **Set the Postgres Password**
|
||||
4. **Définissez le Mot de Passe de Postgres**
|
||||
|
||||
Update the `PG_DATABASE_PASSWORD` value in the .env file with a strong password without special characters.
|
||||
Mettez à jour la valeur `PG_DATABASE_PASSWORD` dans le fichier .env avec un mot de passe fort sans caractères spéciaux.
|
||||
|
||||
```ini
|
||||
PG_DATABASE_PASSWORD=my_strong_password
|
||||
```
|
||||
|
||||
### Step 2: Obtain the Docker Compose File
|
||||
### Étape 2 : Obtenez le Fichier Docker Compose
|
||||
|
||||
Download the `docker-compose.yml` file to your working directory:
|
||||
Téléchargez le fichier `docker-compose.yml` dans votre répertoire de travail :
|
||||
|
||||
```bash
|
||||
curl -o docker-compose.yml https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-docker/docker-compose.yml
|
||||
```
|
||||
|
||||
### Step 3: Launch the Application
|
||||
### Étape 3 : Lancer l'Application
|
||||
|
||||
Start the Docker containers:
|
||||
Démarrez les conteneurs Docker :
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### Step 4: Access the Application
|
||||
### Étape 4 : Accéder à l'Application
|
||||
|
||||
If you host twentyCRM on your own computer, open your browser and navigate to [http://localhost:3000](http://localhost:3000).
|
||||
Si vous hébergez twentyCRM sur votre ordinateur, ouvrez votre navigateur et allez à [http://localhost:3000](http://localhost:3000).
|
||||
|
||||
If you host it on a server, check that the server is running and that everything is ok with
|
||||
Si vous l'hébergez sur un serveur, vérifiez que le serveur fonctionne et que tout est en ordre avec
|
||||
|
||||
```bash
|
||||
curl http://localhost:3000
|
||||
@@ -104,150 +104,150 @@ curl http://localhost:3000
|
||||
|
||||
## Configuration
|
||||
|
||||
### Expose Twenty to External Access
|
||||
### Exposer Twenty à un Accès Externe
|
||||
|
||||
By default, Twenty runs on `localhost` at port `3000`. To access it via an external domain or IP address, you need to configure the `SERVER_URL` in your `.env` file.
|
||||
Par défaut, Twenty fonctionne sur `localhost` au port `3000`. Pour y accéder via un domaine externe ou une adresse IP, vous devez configurer le `SERVER_URL` dans votre fichier `.env`.
|
||||
|
||||
#### Understanding `SERVER_URL`
|
||||
#### Comprendre `SERVER_URL`
|
||||
|
||||
* **Protocol:** Use `http` or `https` depending on your setup.
|
||||
* Use `http` if you haven't set up SSL.
|
||||
* Use `https` if you have SSL configured.
|
||||
* **Domain/IP:** This is the domain name or IP address where your application is accessible.
|
||||
* **Port:** Include the port number if you're not using the default ports (`80` for `http`, `443` for `https`).
|
||||
* **Protocole :** Utilisez `http` ou `https` selon votre configuration.
|
||||
* Utilisez `http` si vous n'avez pas configuré SSL.
|
||||
* Utilisez `https` si vous avez configuré SSL.
|
||||
* **Domaine/IP :** Il s'agit du nom de domaine ou de l'adresse IP où votre application est accessible.
|
||||
* **Port :** Incluez le numéro de port si vous n'utilisez pas les ports par défaut (`80` pour `http`, `443` pour `https`).
|
||||
|
||||
### SSL Requirements
|
||||
### Exigences SSL
|
||||
|
||||
SSL (HTTPS) is required for certain browser features to work properly. While these features might work during local development (as browsers treat localhost differently), a proper SSL setup is needed when hosting Twenty on a regular domain.
|
||||
Le SSL (HTTPS) est requis pour que certaines fonctionnalités des navigateurs fonctionnent correctement. Bien que ces fonctionnalités puissent fonctionner lors du développement local (car les navigateurs traitent localhost différemment), une configuration SSL appropriée est nécessaire lors de l'hébergement de Twenty sur un domaine régulier.
|
||||
|
||||
For example, the clipboard API might require a secure context - some features like copy buttons throughout the application might not work without HTTPS enabled.
|
||||
Par exemple, l'API du presse-papiers pourrait nécessiter un contexte sécurisé - certaines fonctionnalités comme les boutons de copie dans toute l'application pourraient ne pas fonctionner sans HTTPS activé.
|
||||
|
||||
We strongly recommend setting up Twenty behind a reverse proxy with SSL termination for optimal security and functionality.
|
||||
Nous vous recommandons vivement de mettre en place Twenty derrière un proxy inverse avec terminaison SSL pour une sécurité et une fonctionnalité optimales.
|
||||
|
||||
#### Configuring `SERVER_URL`
|
||||
#### Configurer `SERVER_URL`
|
||||
|
||||
1. **Determine Your Access URL**
|
||||
* **Without Reverse Proxy (Direct Access):**
|
||||
1. **Déterminez Votre URL d'Accès**
|
||||
* **Sans Proxy Inverse (Accès Direct):**
|
||||
|
||||
If you're accessing the application directly without a reverse proxy:
|
||||
Si vous accédez directement à l'application sans un proxy inverse :
|
||||
|
||||
```ini
|
||||
SERVER_URL=http://your-domain-or-ip:3000
|
||||
```
|
||||
|
||||
* **With Reverse Proxy (Standard Ports):**
|
||||
* **Avec Proxy Inverse (Ports Standards):**
|
||||
|
||||
If you're using a reverse proxy like Nginx or Traefik and have SSL configured:
|
||||
Si vous utilisez un proxy inverse comme Nginx ou Traefik et que vous avez SSL configuré :
|
||||
|
||||
```ini
|
||||
SERVER_URL=https://your-domain-or-ip
|
||||
```
|
||||
|
||||
* **With Reverse Proxy (Custom Ports):**
|
||||
* **Avec Proxy Inverse (Ports Personnalisés):**
|
||||
|
||||
If you're using non-standard ports:
|
||||
Si vous utilisez des ports non standards :
|
||||
|
||||
```ini
|
||||
SERVER_URL=https://your-domain-or-ip:custom-port
|
||||
```
|
||||
|
||||
2. **Update the `.env` File**
|
||||
2. **Mettez à jour le Fichier `.env`**
|
||||
|
||||
Open your `.env` file and update the `SERVER_URL`:
|
||||
Ouvrez votre fichier `.env` et mettez à jour le `SERVER_URL`:
|
||||
|
||||
```ini
|
||||
SERVER_URL=http(s)://your-domain-or-ip:your-port
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
**Exemples :**
|
||||
|
||||
* Direct access without SSL:
|
||||
* Accès direct sans SSL :
|
||||
```ini
|
||||
SERVER_URL=http://123.45.67.89:3000
|
||||
```
|
||||
* Access via domain with SSL:
|
||||
* Accès via domaine avec SSL :
|
||||
```ini
|
||||
SERVER_URL=https://mytwentyapp.com
|
||||
```
|
||||
|
||||
3. **Restart the Application**
|
||||
3. **Redémarrez l'Application**
|
||||
|
||||
For changes to take effect, restart the Docker containers:
|
||||
Pour que les changements prennent effet, redémarrez les conteneurs Docker :
|
||||
|
||||
```bash
|
||||
docker compose down
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
#### Considerations
|
||||
#### Considérations
|
||||
|
||||
* **Reverse Proxy Configuration:**
|
||||
* **Configuration du Proxy Inverse :**
|
||||
|
||||
Ensure your reverse proxy forwards requests to the correct internal port (`3000` by default). Configure SSL termination and any necessary headers.
|
||||
Assurez-vous que votre proxy inverse redirige les requêtes vers le port interne correct (`3000` par défaut). Configurez la terminaison SSL et tous les en-têtes nécessaires.
|
||||
|
||||
* **Firewall Settings:**
|
||||
* **Paramètres de Pare-feu :**
|
||||
|
||||
Open necessary ports in your firewall to allow external access.
|
||||
Ouvrez les ports nécessaires dans votre pare-feu pour permettre l'accès externe.
|
||||
|
||||
* **Consistency:**
|
||||
* **Cohérence :**
|
||||
|
||||
The `SERVER_URL` must match how users access your application in their browsers.
|
||||
Le `SERVER_URL` doit correspondre à la façon dont les utilisateurs accèdent à votre application dans leurs navigateurs.
|
||||
|
||||
#### Persistence
|
||||
#### Persistance
|
||||
|
||||
* **Data Volumes:**
|
||||
* **Volumes de Données :**
|
||||
|
||||
The Docker Compose configuration uses volumes to persist data for the database and server storage.
|
||||
La configuration de Docker Compose utilise des volumes pour persister les données pour la base de données et le stockage du serveur.
|
||||
|
||||
* **Stateless Environments:**
|
||||
* **Environnements sans État :**
|
||||
|
||||
If deploying to a stateless environment (e.g., certain cloud services), configure external storage to persist data.
|
||||
Si vous déployez dans un environnement sans état (par exemple, certains services cloud), configurez un stockage externe pour persister les données.
|
||||
|
||||
## Backup and Restore
|
||||
## Sauvegarde et restauration
|
||||
|
||||
Regular backups protect your CRM data from loss.
|
||||
Des sauvegardes régulières protègent les données de votre CRM contre la perte.
|
||||
|
||||
### Create a Database Backup
|
||||
### Créer une sauvegarde de la base de données
|
||||
|
||||
```bash
|
||||
docker exec twenty-postgres pg_dump -U postgres twenty > backup_$(date +%Y%m%d).sql
|
||||
```
|
||||
|
||||
### Automate Daily Backups
|
||||
### Automatiser les sauvegardes quotidiennes
|
||||
|
||||
Add to your crontab (`crontab -e`):
|
||||
Ajoutez à votre crontab (`crontab -e`) :
|
||||
|
||||
```bash
|
||||
0 2 * * * docker exec twenty-postgres pg_dump -U postgres twenty > /backups/twenty_$(date +\%Y\%m\%d).sql
|
||||
```
|
||||
|
||||
### Restore from Backup
|
||||
### Restaurer à partir d'une sauvegarde
|
||||
|
||||
1. Stop the application:
|
||||
1. Arrêtez l'application :
|
||||
|
||||
```bash
|
||||
docker compose stop twenty-server twenty-front
|
||||
```
|
||||
|
||||
2. Restore the database:
|
||||
2. Restaurez la base de données :
|
||||
|
||||
```bash
|
||||
docker exec -i twenty-postgres psql -U postgres twenty < backup_20240115.sql
|
||||
```
|
||||
|
||||
3. Restart services:
|
||||
3. Redémarrez les services :
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### Backup Best Practices
|
||||
### Bonnes pratiques de sauvegarde
|
||||
|
||||
* **Test restores regularly** — verify backups actually work
|
||||
* **Store backups off-site** — use cloud storage (S3, GCS, etc.)
|
||||
* **Encrypt sensitive data** — protect backups with encryption
|
||||
* **Retain multiple copies** — keep daily, weekly, and monthly backups
|
||||
* **Testez les restaurations régulièrement** — vérifiez que les sauvegardes fonctionnent réellement
|
||||
* **Stockez les sauvegardes hors site** — utilisez un stockage cloud (S3, GCS, etc.)
|
||||
* **Chiffrez les données sensibles** — protégez les sauvegardes à l'aide du chiffrement
|
||||
* **Conservez plusieurs copies** — gardez des sauvegardes quotidiennes, hebdomadaires et mensuelles
|
||||
|
||||
## Troubleshooting
|
||||
## Résolution des problèmes
|
||||
|
||||
If you encounter any problem, check [Troubleshooting](/l/fr/developers/self-host/capabilities/troubleshooting) for solutions.
|
||||
Si vous rencontrez un problème, consultez [Dépannage](/l/fr/developers/self-host/capabilities/troubleshooting) pour des solutions.
|
||||
|
||||
@@ -1,146 +1,146 @@
|
||||
---
|
||||
title: Setup
|
||||
title: Installation
|
||||
---
|
||||
|
||||
# Configuration Management
|
||||
# Gestion de la configuration
|
||||
|
||||
<Warning>
|
||||
**First time installing?** Follow the [Docker Compose installation guide](/l/fr/developers/self-host/capabilities/docker-compose) to get Twenty running, then return here for configuration.
|
||||
**Première installation ?** Suivez le [Guide d’installation de Docker Compose](/l/fr/developers/self-host/capabilities/docker-compose) pour faire fonctionner Twenty, puis revenez ici pour la configuration.
|
||||
</Warning>
|
||||
|
||||
Twenty offers **two configuration modes** to suit different deployment needs:
|
||||
Twenty offre **deux modes de configuration** pour répondre à différents besoins de déploiement :
|
||||
|
||||
**Admin panel access:** Only users with admin privileges (`canAccessFullAdminPanel: true`) can access the configuration interface.
|
||||
**Accès au panneau d'administration :** Seuls les utilisateurs avec des privilèges d'administrateur (`canAccessFullAdminPanel: true`) peuvent accéder à l'interface de configuration.
|
||||
|
||||
## 1. Admin Panel Configuration (Default)
|
||||
## 1. Configuration du panneau d'administration (par défaut)
|
||||
|
||||
```bash
|
||||
IS_CONFIG_VARIABLES_IN_DB_ENABLED=true # default
|
||||
```
|
||||
|
||||
**Most configuration happens through the UI** after installation:
|
||||
**La plupart des configurations se fait via l'interface utilisateur** après l'installation :
|
||||
|
||||
1. Access your Twenty instance (usually `http://localhost:3000`)
|
||||
2. Go to **Settings / Admin Panel / Configuration Variables**
|
||||
3. Configure integrations, email, storage, and more
|
||||
4. Changes take effect immediately (within 15 seconds for multi-container deployments)
|
||||
1. Accédez à votre instance Twenty (généralement `http://localhost:3000`)
|
||||
2. Allez dans **Paramètres / Panneau d’administration / Variables de configuration**
|
||||
3. Configurez les intégrations, les e-mails, le stockage et plus encore
|
||||
4. Les modifications prennent effet immédiatement (dans les 15 secondes pour les déploiements multi-conteneurs)
|
||||
|
||||
<Warning>
|
||||
**Multi-Container Deployments:** When using database configuration (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`), both server and worker containers read from the same database. Admin panel changes affect both automatically, eliminating the need to duplicate environment variables between containers (except for infrastructure variables).
|
||||
**Déploiements multi-conteneurs :** En utilisant la configuration de la base de données (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`), les conteneurs serveur et travailleur lisent à partir de la même base de données. Les modifications du panneau d'administration affectent les deux automatiquement, éliminant le besoin de dupliquer les variables d'environnement entre les conteneurs (sauf pour les variables d'infrastructure).
|
||||
</Warning>
|
||||
|
||||
**What you can configure through the admin panel:**
|
||||
**Ce que vous pouvez configurer via le panneau d'administration :**
|
||||
|
||||
* **Authentication** - Google/Microsoft OAuth, password settings
|
||||
* **Email** - SMTP settings, templates, verification
|
||||
* **Storage** - S3 configuration, local storage paths
|
||||
* **Integrations** - Gmail, Google Calendar, Microsoft services
|
||||
* **Workflow & Rate Limiting** - Execution limits, API throttling
|
||||
* **And much more...**
|
||||
* **Authentification** - Google/Microsoft OAuth, paramètres de mot de passe
|
||||
* **E-mail** - Paramètres SMTP, modèles, vérification
|
||||
* **Stockage** - Configuration S3, chemins de stockage local
|
||||
* **Intégrations** - Gmail, Google Agenda, services Microsoft
|
||||
* **Workflow & Limitation de débit** - Limites d'exécution, limitation de l'API
|
||||
* **Et bien plus encore...**
|
||||
|
||||
|
||||
|
||||
|
||||
<Warning>
|
||||
Each variable is documented with descriptions in your admin panel at **Settings → Admin Panel → Configuration Variables**.
|
||||
Some infrastructure settings like database connections (`PG_DATABASE_URL`), server URLs (`SERVER_URL`), and app secrets (`APP_SECRET`) can only be configured via `.env` file.
|
||||
Chaque variable est documentée avec des descriptions dans votre panneau d'administration sous **Paramètres → Panneau d'administration → Variables de configuration**.
|
||||
Certains paramètres d'infrastructure comme les connexions de base de données (`PG_DATABASE_URL`), les URL du serveur (`SERVER_URL`), et les secrets d'application (`APP_SECRET`) ne peuvent être configurés que via le fichier `.env`.
|
||||
|
||||
[Complete technical reference →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts)
|
||||
[Référence technique complète →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts)
|
||||
</Warning>
|
||||
|
||||
## 2. Environment-Only Configuration
|
||||
## 2. Configuration réservée à l'environnement
|
||||
|
||||
```bash
|
||||
IS_CONFIG_VARIABLES_IN_DB_ENABLED=false
|
||||
```
|
||||
|
||||
**All configuration managed through `.env` files:**
|
||||
**Toute la configuration est gérée via les fichiers `.env` :**
|
||||
|
||||
1. Set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` in your `.env` file
|
||||
2. Add all configuration variables to your `.env` file
|
||||
3. Restart containers for changes to take effect
|
||||
4. Admin panel will show current values but cannot modify them
|
||||
1. Définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` dans votre fichier `.env`
|
||||
2. Ajoutez toutes les variables de configuration à votre fichier `.env`
|
||||
3. Redémarrez les conteneurs pour que les modifications prennent effet
|
||||
4. Le panneau d'administration affichera les valeurs actuelles mais ne pourra pas les modifier
|
||||
|
||||
## Multi-Workspace Mode
|
||||
## Mode multi-espaces de travail
|
||||
|
||||
By default, Twenty runs in **single-workspace mode** — ideal for most self-hosted deployments where you need one CRM instance for your organization.
|
||||
Par défaut, Twenty fonctionne en **mode à espace de travail unique** — idéal pour la plupart des déploiements auto-hébergés où vous avez besoin d'une seule instance CRM pour votre organisation.
|
||||
|
||||
### Single-Workspace Mode (Default)
|
||||
### Mode à espace de travail unique (par défaut)
|
||||
|
||||
```bash
|
||||
IS_MULTIWORKSPACE_ENABLED=false # default
|
||||
```
|
||||
|
||||
* One workspace per Twenty instance
|
||||
* First user automatically becomes admin with full privileges (`canImpersonate` and `canAccessFullAdminPanel`)
|
||||
* New signups are disabled after the first workspace is created
|
||||
* Simple URL structure: `https://your-domain.com`
|
||||
* Un espace de travail par instance Twenty
|
||||
* Le premier utilisateur devient automatiquement administrateur avec tous les privilèges (`canImpersonate` et `canAccessFullAdminPanel`)
|
||||
* Les nouvelles inscriptions sont désactivées après la création du premier espace de travail
|
||||
* Structure d'URL simple : `https://your-domain.com`
|
||||
|
||||
### Enabling Multi-Workspace Mode
|
||||
### Activation du mode multi-espaces de travail
|
||||
|
||||
```bash
|
||||
IS_MULTIWORKSPACE_ENABLED=true
|
||||
DEFAULT_SUBDOMAIN=app # default value
|
||||
```
|
||||
|
||||
Enable multi-workspace mode for SaaS-like deployments where multiple independent teams need their own workspaces on the same Twenty instance.
|
||||
Activez le mode multi-espaces de travail pour des déploiements de type SaaS où plusieurs équipes indépendantes ont besoin de leurs propres espaces de travail sur la même instance Twenty.
|
||||
|
||||
**Key differences from single-workspace mode:**
|
||||
**Principales différences par rapport au mode à espace de travail unique :**
|
||||
|
||||
* Multiple workspaces can be created on the same instance
|
||||
* Each workspace gets its own subdomain (e.g., `sales.your-domain.com`, `marketing.your-domain.com`)
|
||||
* Users sign up and log in at `{DEFAULT_SUBDOMAIN}.your-domain.com` (e.g., `app.your-domain.com`)
|
||||
* No automatic admin privileges — first user in each workspace is a regular user
|
||||
* Workspace-specific settings like subdomain and custom domain become available in workspace settings
|
||||
* Plusieurs espaces de travail peuvent être créés sur la même instance
|
||||
* Chaque espace de travail possède son propre sous-domaine (par exemple, `sales.your-domain.com`, `marketing.your-domain.com`)
|
||||
* Les utilisateurs s'inscrivent et se connectent sur `{DEFAULT_SUBDOMAIN}.your-domain.com` (par exemple, `app.your-domain.com`)
|
||||
* Aucun privilège d'administrateur automatique — le premier utilisateur de chaque espace de travail est un utilisateur standard
|
||||
* Des paramètres spécifiques à l'espace de travail, comme le sous-domaine et le domaine personnalisé, deviennent disponibles dans les paramètres de l'espace de travail
|
||||
|
||||
<Warning>
|
||||
**Environment-only setting:** `IS_MULTIWORKSPACE_ENABLED` can only be configured via `.env` file and requires a restart. It cannot be changed through the admin panel.
|
||||
**Paramètre réservé à l'environnement :** `IS_MULTIWORKSPACE_ENABLED` ne peut être configuré que via le fichier `.env` et nécessite un redémarrage. Il ne peut pas être modifié via le panneau d'administration.
|
||||
</Warning>
|
||||
|
||||
### DNS Configuration for Multi-Workspace
|
||||
### Configuration DNS pour le mode multi-espaces de travail
|
||||
|
||||
When using multi-workspace mode, configure your DNS with a wildcard record to allow dynamic subdomain creation:
|
||||
Lorsque vous utilisez le mode multi-espaces de travail, configurez votre DNS avec un enregistrement générique (wildcard) pour permettre la création dynamique de sous-domaines :
|
||||
|
||||
```
|
||||
*.your-domain.com -> your-server-ip
|
||||
```
|
||||
|
||||
This enables automatic subdomain routing for new workspaces without manual DNS configuration.
|
||||
Cela active le routage automatique des sous-domaines pour les nouveaux espaces de travail, sans configuration DNS manuelle.
|
||||
|
||||
### Restricting Workspace Creation
|
||||
### Restreindre la création d'espaces de travail
|
||||
|
||||
In multi-workspace mode, you may want to limit who can create new workspaces:
|
||||
En mode multi-espaces de travail, vous pouvez souhaiter limiter qui peut créer de nouveaux espaces de travail :
|
||||
|
||||
```bash
|
||||
IS_WORKSPACE_CREATION_LIMITED_TO_SERVER_ADMINS=true
|
||||
```
|
||||
|
||||
When enabled, only users with `canAccessFullAdminPanel` can create additional workspaces. Users can still create their first workspace during initial signup.
|
||||
Lorsqu'il est activé, seuls les utilisateurs disposant de `canAccessFullAdminPanel` peuvent créer des espaces de travail supplémentaires. Les utilisateurs peuvent toujours créer leur premier espace de travail lors de l'inscription initiale.
|
||||
|
||||
## Gmail & Google Calendar Integration
|
||||
## Intégration Gmail & Google Agenda
|
||||
|
||||
### Create Google Cloud Project
|
||||
### Créer un projet Google Cloud
|
||||
|
||||
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. Create a new project or select existing one
|
||||
3. Enable these APIs:
|
||||
1. Allez dans [Google Cloud Console](https://console.cloud.google.com/)
|
||||
2. Créez un nouveau projet ou sélectionnez-en un existant
|
||||
3. Activez ces API :
|
||||
|
||||
* [Gmail API](https://console.cloud.google.com/apis/library/gmail.googleapis.com)
|
||||
* [Google Calendar API](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com)
|
||||
* [People API](https://console.cloud.google.com/apis/library/people.googleapis.com)
|
||||
* [API Gmail](https://console.cloud.google.com/apis/library/gmail.googleapis.com)
|
||||
* [API Google Agenda](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com)
|
||||
* [API People](https://console.cloud.google.com/apis/library/people.googleapis.com)
|
||||
|
||||
### Configure OAuth
|
||||
### Configurez OAuth
|
||||
|
||||
1. Go to [Credentials](https://console.cloud.google.com/apis/credentials)
|
||||
2. Create OAuth 2.0 Client ID
|
||||
3. Add these redirect URIs:
|
||||
* `https://{your-domain}/auth/google/redirect` (for SSO)
|
||||
* `https://{your-domain}/auth/google-apis/get-access-token` (for integrations)
|
||||
1. Allez dans [Identifiants](https://console.cloud.google.com/apis/credentials)
|
||||
2. Créez un identifiant client OAuth 2.0
|
||||
3. Ajoutez ces URI de redirection :
|
||||
* `https://{your-domain}/auth/google/redirect` (pour le SSO)
|
||||
* `https://{your-domain}/auth/google-apis/get-access-token` (pour les intégrations)
|
||||
|
||||
### Configure in Twenty
|
||||
### Configurez dans Twenty
|
||||
|
||||
1. Go to **Settings → Admin Panel → Configuration Variables**
|
||||
2. Find the **Google Auth** section
|
||||
3. Set these variables:
|
||||
1. Allez dans **Paramètres → Panneau d’administration → Variables de configuration**
|
||||
2. Retrouvez la section **Google Auth**
|
||||
3. Définissez ces variables :
|
||||
* `MESSAGING_PROVIDER_GMAIL_ENABLED=true`
|
||||
* `CALENDAR_PROVIDER_GOOGLE_ENABLED=true`
|
||||
* `AUTH_GOOGLE_CLIENT_ID={client-id}`
|
||||
@@ -149,59 +149,59 @@ When enabled, only users with `canAccessFullAdminPanel` can create additional wo
|
||||
* `AUTH_GOOGLE_APIS_CALLBACK_URL=https://{your-domain}/auth/google-apis/get-access-token`
|
||||
|
||||
<Warning>
|
||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||
**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place.
|
||||
</Warning>
|
||||
|
||||
**Required scopes** (automatically configured):
|
||||
[See relevant source code](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-google-apis-oauth-scopes.ts#L4-L10)
|
||||
**Scopes requis** (configurés automatiquement) :
|
||||
[Voir le code source pertinent](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-google-apis-oauth-scopes.ts#L4-L10)
|
||||
|
||||
* `https://www.googleapis.com/auth/calendar.events`
|
||||
* `https://www.googleapis.com/auth/gmail.readonly`
|
||||
* `https://www.googleapis.com/auth/profile.emails.read`
|
||||
|
||||
### If your app is in test mode
|
||||
### Si votre application est en mode test
|
||||
|
||||
If your app is in test mode, you will need to add test users to your project.
|
||||
Si votre application est en mode test, vous devez ajouter des utilisateurs test à votre projet.
|
||||
|
||||
Under [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent), add your test users to the "Test users" section.
|
||||
Sous [Écran de consentement OAuth](https://console.cloud.google.com/apis/credentials/consent), ajoutez vos utilisateurs test à la section "Utilisateurs test".
|
||||
|
||||
## Microsoft 365 Integration
|
||||
## Intégration Microsoft 365
|
||||
|
||||
<Warning>
|
||||
Users must have a [Microsoft 365 Licence](https://admin.microsoft.com/Adminportal/Home) to be able to use the Calendar and Messaging API. They will not be able to sync their account on Twenty without one.
|
||||
Les utilisateurs doivent avoir une [licence Microsoft 365](https://admin.microsoft.com/Adminportal/Home) pour pouvoir utiliser les API Calendrier et Messagerie. Ils ne pourront pas synchroniser leur compte sur Twenty sans cela.
|
||||
</Warning>
|
||||
|
||||
### Create a project in Microsoft Azure
|
||||
### Créez un projet dans Microsoft Azure
|
||||
|
||||
You will need to create a project in [Microsoft Azure](https://portal.azure.com/#view/Microsoft_AAD_IAM/AppGalleryBladeV2) and get the credentials.
|
||||
Vous devrez créer un projet dans [Microsoft Azure](https://portal.azure.com/#view/Microsoft_AAD_IAM/AppGalleryBladeV2) et obtenir les identifiants.
|
||||
|
||||
### Enable APIs
|
||||
### Activez les API
|
||||
|
||||
On Microsoft Azure Console enable the following APIs in "Permissions":
|
||||
Sur la console Microsoft Azure, activez les API suivantes dans "Autorisations" :
|
||||
|
||||
* Microsoft Graph: Mail.ReadWrite
|
||||
* Microsoft Graph: Mail.Send
|
||||
* Microsoft Graph: Calendars.Read
|
||||
* Microsoft Graph: User.Read
|
||||
* Microsoft Graph: openid
|
||||
* Microsoft Graph: email
|
||||
* Microsoft Graph: profile
|
||||
* Microsoft Graph: offline_access
|
||||
* Microsoft Graph : Mail.ReadWrite
|
||||
* Microsoft Graph : Mail.Send
|
||||
* Microsoft Graph : Calendars.Read
|
||||
* Microsoft Graph : User.Read
|
||||
* Microsoft Graph : openid
|
||||
* Microsoft Graph : email
|
||||
* Microsoft Graph : profile
|
||||
* Microsoft Graph : offline_access
|
||||
|
||||
Note: "Mail.ReadWrite" and "Mail.Send" are only mandatory if you want to send emails using our workflow actions. You can use "Mail.Read" instead if you only want to receive emails.
|
||||
Remarque : "Mail.ReadWrite" et "Mail.Send" ne sont obligatoires que si vous souhaitez envoyer des e-mails en utilisant nos actions de flux de travail. Vous pouvez utiliser "Mail.Read" à la place si vous souhaitez uniquement recevoir des e-mails.
|
||||
|
||||
### Authorized redirect URIs
|
||||
### URI de redirection autorisées
|
||||
|
||||
You need to add the following redirect URIs to your project:
|
||||
Vous devez ajouter les URI de redirection suivantes à votre projet :
|
||||
|
||||
* `https://{your-domain}/auth/microsoft/redirect` if you want to use Microsoft SSO
|
||||
* `https://{your-domain}/auth/microsoft/redirect` si vous souhaitez utiliser Microsoft SSO
|
||||
* `https://{your-domain}/auth/microsoft-apis/get-access-token`
|
||||
|
||||
### Configure in Twenty
|
||||
### Configurez dans Twenty
|
||||
|
||||
1. Go to **Settings → Admin Panel → Configuration Variables**
|
||||
2. Find the **Microsoft Auth** section
|
||||
3. Set these variables:
|
||||
1. Allez dans **Paramètres → Panneau d’administration → Variables de configuration**
|
||||
2. Retrouvez la section **Microsoft Auth**
|
||||
3. Définissez ces variables :
|
||||
* `MESSAGING_PROVIDER_MICROSOFT_ENABLED=true`
|
||||
* `CALENDAR_PROVIDER_MICROSOFT_ENABLED=true`
|
||||
* `AUTH_MICROSOFT_ENABLED=true`
|
||||
@@ -211,32 +211,32 @@ You need to add the following redirect URIs to your project:
|
||||
* `AUTH_MICROSOFT_APIS_CALLBACK_URL=https://{your-domain}/auth/microsoft-apis/get-access-token`
|
||||
|
||||
<Warning>
|
||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||
**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place.
|
||||
</Warning>
|
||||
|
||||
### Configure scopes
|
||||
### Configurer les scopes
|
||||
|
||||
[See relevant source code](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-microsoft-apis-oauth-scopes.ts#L2-L9)
|
||||
[Voir le code source pertinent](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-microsoft-apis-oauth-scopes.ts#L2-L9)
|
||||
|
||||
* 'openid'
|
||||
* 'email'
|
||||
* 'profile'
|
||||
* 'profil'
|
||||
* 'offline_access'
|
||||
* 'Mail.ReadWrite'
|
||||
* 'Mail.Send'
|
||||
* 'Calendars.Read'
|
||||
|
||||
### If your app is in test mode
|
||||
### Si votre application est en mode test
|
||||
|
||||
If your app is in test mode, you will need to add test users to your project.
|
||||
Si votre application est en mode test, vous devez ajouter des utilisateurs test à votre projet.
|
||||
|
||||
Add your test users to the "Users and groups" section.
|
||||
Ajoutez vos utilisateurs test à la section "Utilisateurs et groupes".
|
||||
|
||||
## Background Jobs for Calendar & Messaging
|
||||
## Tâches en arrière-plan pour Calendrier & Messagerie
|
||||
|
||||
After configuring Gmail, Google Calendar, or Microsoft 365 integrations, you need to start the background jobs that sync data.
|
||||
Après avoir configuré les intégrations Gmail, Google Agenda ou Microsoft 365, vous devez démarrer les tâches en arrière-plan qui synchronisent les données.
|
||||
|
||||
Register the following recurring jobs in your worker container:
|
||||
Enregistrez les emplois récurrents suivants dans votre conteneur de travailleur :
|
||||
|
||||
```bash
|
||||
# from your worker container
|
||||
@@ -249,15 +249,15 @@ yarn command:prod cron:calendar:ongoing-stale
|
||||
yarn command:prod cron:workflow:automated-cron-trigger
|
||||
```
|
||||
|
||||
## Email Configuration
|
||||
## Configuration des Emails
|
||||
|
||||
1. Go to **Settings → Admin Panel → Configuration Variables**
|
||||
2. Find the **Email** section
|
||||
3. Configure your SMTP settings:
|
||||
1. Allez dans **Paramètres → Panneau d’administration → Variables de configuration**
|
||||
2. Retrouvez la section **Email**
|
||||
3. Configurez vos paramètres SMTP :
|
||||
|
||||
<ArticleTabs label1="Gmail" label2="Office365" label3="Smtp4dev">
|
||||
<ArticleTab>
|
||||
You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
|
||||
Vous devrez créer un [mot de passe d'application](https://support.google.com/accounts/answer/185833).
|
||||
|
||||
* EMAIL_DRIVER=smtp
|
||||
* EMAIL_SMTP_HOST=smtp.gmail.com
|
||||
@@ -267,7 +267,7 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
|
||||
Gardez à l'esprit que si vous avez activé la validation en deux étapes (2FA), vous devrez mettre en place un [mot de passe d'application](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
|
||||
|
||||
* EMAIL_DRIVER=smtp
|
||||
* EMAIL_SMTP_HOST=smtp.office365.com
|
||||
@@ -277,11 +277,11 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
**smtp4dev** is a fake SMTP email server for development and testing.
|
||||
**smtp4dev** est un serveur SMTP factice pour le développement et les tests.
|
||||
|
||||
* Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
|
||||
* Access the smtp4dev ui here: [http://localhost:8090](http://localhost:8090)
|
||||
* Set the following variables:
|
||||
* Exécutez l'image smtp4dev : `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
|
||||
* Accédez à l'interface utilisateur smtp4dev ici : [http://localhost:8090](http://localhost:8090)
|
||||
* Définissez les variables suivantes :
|
||||
* EMAIL_DRIVER=smtp
|
||||
* EMAIL_SMTP_HOST=localhost
|
||||
* EMAIL_SMTP_PORT=2525
|
||||
@@ -289,5 +289,49 @@ yarn command:prod cron:workflow:automated-cron-trigger
|
||||
</ArticleTabs>
|
||||
|
||||
<Warning>
|
||||
**Environment-only mode:** If you set `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, add these variables to your `.env` file instead.
|
||||
**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place.
|
||||
</Warning>
|
||||
|
||||
## Fonctions sans serveur
|
||||
|
||||
Twenty prend en charge les fonctions sans serveur pour les flux de travail et la logique personnalisée. L'environnement d'exécution est configuré via la variable d'environnement `SERVERLESS_TYPE`.
|
||||
|
||||
<Warning>
|
||||
**Avis de sécurité :** Le pilote local de fonctions sans serveur (`SERVERLESS_TYPE=LOCAL`) exécute le code directement sur l'hôte dans un processus Node.js sans sandboxing. Il ne doit être utilisé que pour du code approuvé en développement. Pour les déploiements de production traitant du code non approuvé, nous recommandons fortement d'utiliser `SERVERLESS_TYPE=LAMBDA` ou `SERVERLESS_TYPE=DISABLED`.
|
||||
</Warning>
|
||||
|
||||
### Pilotes disponibles
|
||||
|
||||
| Pilote | Variable d'environnement | Cas d'utilisation | Niveau de sécurité |
|
||||
| --------- | -------------------------- | -------------------------------------------------- | ------------------------------------ |
|
||||
| Désactivé | `SERVERLESS_TYPE=DISABLED` | Désactiver complètement les fonctions sans serveur | N/A |
|
||||
| Local | `SERVERLESS_TYPE=LOCAL` | Environnements de développement et approuvés | Faible (aucun sandboxing) |
|
||||
| Lambda | `SERVERLESS_TYPE=LAMBDA` | Production avec du code non approuvé | Élevé (isolement au niveau matériel) |
|
||||
|
||||
### Configuration recommandée
|
||||
|
||||
**Pour le développement:**
|
||||
|
||||
```bash
|
||||
SERVERLESS_TYPE=LOCAL # default
|
||||
```
|
||||
|
||||
**Pour la production (AWS):**
|
||||
|
||||
```bash
|
||||
SERVERLESS_TYPE=LAMBDA
|
||||
SERVERLESS_LAMBDA_REGION=us-east-1
|
||||
SERVERLESS_LAMBDA_ROLE=arn:aws:iam::123456789:role/your-lambda-role
|
||||
SERVERLESS_LAMBDA_ACCESS_KEY_ID=your-access-key
|
||||
SERVERLESS_LAMBDA_SECRET_ACCESS_KEY=your-secret-key
|
||||
```
|
||||
|
||||
**Pour désactiver les fonctions sans serveur:**
|
||||
|
||||
```bash
|
||||
SERVERLESS_TYPE=DISABLED
|
||||
```
|
||||
|
||||
<Note>
|
||||
Lorsque vous utilisez `SERVERLESS_TYPE=DISABLED`, toute tentative d'exécuter une fonction sans serveur renverra une erreur. Cela est utile si vous souhaitez exécuter Twenty sans les capacités de fonctions sans serveur.
|
||||
</Note>
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
---
|
||||
title: Troubleshooting
|
||||
title: Résolution des problèmes
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
## Résolution des problèmes
|
||||
|
||||
If you encounter any problem while setting up environment for development, upgrading your instance or self-hosting,
|
||||
here are some solutions for common problems.
|
||||
Si vous rencontrez un problème lors de la configuration de l'environnement pour le développement, la mise à niveau de votre instance ou l'auto-hébergement, voici quelques solutions pour les problèmes courants.
|
||||
|
||||
### Self-hosting
|
||||
### Auto-hébergement
|
||||
|
||||
#### First install results in `password authentication failed for user "postgres"`
|
||||
#### La première installation entraîne l'erreur `l'authentification du mot de passe a échoué pour l'utilisateur "postgres"`
|
||||
|
||||
🚨 **IMPORTANT: This solution is ONLY for fresh installations** 🚨
|
||||
If you have an existing Twenty instance with production data, **DO NOT** follow these steps as they will permanently delete your database!
|
||||
🚨 **IMPORTANT : Cette solution est UNIQUEMENT pour les nouvelles installations** 🚨
|
||||
Si vous avez une instance Twenty existante avec des données de production, **NE SUIVEZ PAS** ces étapes, car elles supprimeront définitivement votre base de données !
|
||||
|
||||
While installing Twenty for the first time, you might want to change the default database password.
|
||||
The password you set during the first installation becomes permanently stored in the database volume. If you later try to change this password in your configuration without removing the old volume, you'll get authentication errors because the database is still using the original password.
|
||||
Lors de l'installation de Twenty pour la première fois, vous pouvez vouloir changer le mot de passe par défaut de la base de données.
|
||||
Le mot de passe que vous définissez lors de la première installation est stocké de façon permanente dans le volume de la base de données. Si vous essayez ensuite de changer ce mot de passe dans votre configuration sans supprimer l'ancien volume, vous obtiendrez des erreurs d'authentification car la base de données utilise toujours le mot de passe original.
|
||||
|
||||
⚠️ WARNING: Following steps will PERMANENTLY DELETE all database data! ⚠️
|
||||
Only proceed if this is a fresh installation with no important data.
|
||||
⚠️ AVERTISSEMENT : Les étapes suivantes SUPPRIMERONT DÉFINITIVEMENT toutes les données de la base de données ! ⚠️
|
||||
N'avancez que s'il s'agit d'une nouvelle installation sans données importantes.
|
||||
|
||||
In order to update the `PG_DATABASE_PASSWORD` you need to:
|
||||
Pour mettre à jour le `PG_DATABASE_PASSWORD`, vous devez :
|
||||
|
||||
```sh
|
||||
# Update the PG_DATABASE_PASSWORD in .env
|
||||
@@ -28,33 +27,33 @@ docker compose down --volumes
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
#### CR line breaks found [Windows]
|
||||
#### Retours à la ligne CR trouvés [Windows]
|
||||
|
||||
This is due to the line break characters of Windows and the git configuration. Try running:
|
||||
Cela est dû aux caractères de saut de ligne de Windows et à la configuration de git. Essayez de lancer :
|
||||
|
||||
```
|
||||
git config --global core.autocrlf false
|
||||
```
|
||||
|
||||
Then delete the repository and clone it again.
|
||||
Ensuite, supprimez le dépôt et clonez-le de nouveau.
|
||||
|
||||
#### Missing metadata schema
|
||||
#### Schéma de métadonnées manquant
|
||||
|
||||
During Twenty installation, you need to provision your postgres database with the right schemas, extensions, and users.
|
||||
If you're successful in running this provisioning, you should have `default` and `metadata` schemas in your database.
|
||||
If you don't, make sure you don't have more than one postgres instance running on your computer.
|
||||
Pendant l'installation de Twenty, vous devez approvisionner votre base de données postgres avec les bons schémas, extensions et utilisateurs.
|
||||
Si vous réussissez cet approvisionnement, vous devriez avoir des schémas `default` et `metadata` dans votre base de données.
|
||||
Sinon, assurez-vous de ne pas avoir plus d'une instance postgres fonctionnant sur votre ordinateur.
|
||||
|
||||
#### Cannot find module 'twenty-emails' or its corresponding type declarations.
|
||||
#### Impossible de trouver le module 'twenty-emails' ou les déclarations de type correspondantes.
|
||||
|
||||
You have to build the package `twenty-emails` before running the initialization of the database with `npx nx run twenty-emails:build`
|
||||
Vous devez construire le package `twenty-emails` avant de lancer l'initialisation de la base de données avec `npx nx run twenty-emails:build`
|
||||
|
||||
#### Missing twenty-x package
|
||||
#### Package twenty-x manquant
|
||||
|
||||
Make sure to run yarn in the root directory and then run `npx nx server:dev twenty-server`. If this still doesn't work try building the missing package manually.
|
||||
Assurez-vous d'exécuter yarn dans le répertoire racine, puis d'exécuter `npx nx server:dev twenty-server`. Si cela ne fonctionne toujours pas, essayez de construire le package manquant manuellement.
|
||||
|
||||
#### Lint on Save not working
|
||||
#### Lint à l'enregistrement ne fonctionne pas
|
||||
|
||||
This should work out of the box with the eslint extension installed. If this doesn't work try adding this to your vscode setting (on the dev container scope):
|
||||
Cela devrait fonctionner directement avec l'extension eslint installée. Si cela ne fonctionne pas, essayez d'ajouter ceci aux paramètres de votre vscode (dans le champ du conteneur de développement) :
|
||||
|
||||
```
|
||||
"editor.codeActionsOnSave": {
|
||||
@@ -64,85 +63,85 @@ This should work out of the box with the eslint extension installed. If this doe
|
||||
}
|
||||
```
|
||||
|
||||
#### While running `npx nx start` or `npx nx start twenty-front`, Out of memory error is thrown
|
||||
#### Pendant l'exécution de `npx nx start` ou `npx nx start twenty-front`, une erreur de mémoire est renvoyée
|
||||
|
||||
In `packages/twenty-front/.env` uncomment `VITE_DISABLE_TYPESCRIPT_CHECKER=true` to disable background checks thus reducing amount of needed RAM.
|
||||
Dans `packages/twenty-front/.env`, décommentez `VITE_DISABLE_TYPESCRIPT_CHECKER=true` et `VITE_DISABLE_ESLINT_CHECKER=true` pour désactiver les vérifications en arrière-plan, réduisant ainsi la quantité de RAM nécessaire.
|
||||
|
||||
**If it does not work:**
|
||||
Run only the services you need, instead of `npx nx start`. For instance, if you work on the server, run only `npx nx worker twenty-server`
|
||||
**Si cela ne fonctionne pas :**
|
||||
Lancez uniquement les services dont vous avez besoin, au lieu de `npx nx start`. Par exemple, si vous travaillez sur le serveur, lancez seulement `npx nx worker twenty-server`
|
||||
|
||||
**If it does not work:**
|
||||
If you tried to run only `npx nx run twenty-server:start` on WSL and it's failing with the below memory error:
|
||||
**Si cela ne fonctionne pas :**
|
||||
Si vous avez essayé de lancer uniquement `npx nx run twenty-server:start` sur WSL et que cela échoue avec l'erreur de mémoire ci-dessous :
|
||||
|
||||
`FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory`
|
||||
`ERREUR FATALE : Les compactages inefficaces près de la limite du tas Allocation échouée - tas JavaScript sans mémoire`
|
||||
|
||||
Workaround is to execute below command in terminal or add it in .bashrc profile to get setup automatically:
|
||||
Une solution de contournement consiste à exécuter la commande ci-dessous dans le terminal ou à l'ajouter au profil .bashrc pour la configurer automatiquement :
|
||||
|
||||
`export NODE_OPTIONS="--max-old-space-size=8192"`
|
||||
|
||||
The --max-old-space-size=8192 flag sets an upper limit of 8GB for the Node.js heap; usage scales with application demand.
|
||||
Reference: https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
|
||||
L'option --max-old-space-size=8192 fixe une limite supérieure de 8 Go pour le tas Node.js ; l'utilisation s'adapte à la demande de l'application.
|
||||
Référence : https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048
|
||||
|
||||
**If it does not work:**
|
||||
Investigate which processes are taking you most of your machine RAM. At Twenty, we noticed that some VScode extensions were taking a lot of RAM so we temporarily disable them.
|
||||
**Si cela ne fonctionne pas :**
|
||||
Examinez quels processus consomment le plus de RAM sur votre machine. Chez Twenty, nous avons remarqué que certaines extensions de VScode consommaient beaucoup de RAM, nous les désactivons donc temporairement.
|
||||
|
||||
**If it does not work:**
|
||||
Restart your machine helps to clean up ghost processes.
|
||||
**Si cela ne fonctionne pas :**
|
||||
Le redémarrage de votre machine aide à nettoyer les processus fantômes.
|
||||
|
||||
#### While running `npx nx start` there are weird [0] and [1] in logs
|
||||
#### Pendant l'exécution de `npx nx start`, il y a des [0] et [1] étranges dans les journaux
|
||||
|
||||
That's expected as command `npx nx start` is running more commands under the hood
|
||||
C'est attendu car la commande `npx nx start` exécute plus de commandes en arrière-plan
|
||||
|
||||
#### No emails are sent
|
||||
#### Aucun e-mail n'est envoyé
|
||||
|
||||
Most of the time, it's because the `worker` is not running in the background. Try to run
|
||||
La plupart du temps, c'est parce que le `worker` ne fonctionne pas en arrière-plan. Essayez de lancer
|
||||
|
||||
```
|
||||
npx nx worker twenty-server
|
||||
```
|
||||
|
||||
#### Cannot connect my Microsoft 365 account
|
||||
#### Impossible de connecter mon compte Microsoft 365
|
||||
|
||||
Most of the time, it's because your admin has not enabled the Microsoft 365 Licence for your account. Check [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home).
|
||||
La plupart du temps, c'est parce que votre administrateur n'a pas activé la licence Microsoft 365 pour votre compte. Vérifiez [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home).
|
||||
|
||||
If you have an error code `AADSTS50020`, it probably means that you are using a personal Microsoft account. This is not supported yet. More info [here](https://learn.microsoft.com/fr-fr/troubleshoot/entra/entra-id/app-integration/error-code-aadsts50020-user-account-identity-provider-does-not-exist)
|
||||
Si vous avez un code d'erreur `AADSTS50020`, cela signifie probablement que vous utilisez un compte personnel Microsoft. Cela n'est pas encore pris en charge. Plus d'informations [ici](https://learn.microsoft.com/fr-fr/troubleshoot/entra/entra-id/app-integration/error-code-aadsts50020-user-account-identity-provider-does-not-exist)
|
||||
|
||||
#### While running `yarn` warnings appear in console
|
||||
#### Des avertissements apparaissent dans la console pendant l'exécution de `yarn`
|
||||
|
||||
Warnings are informing about pulling additional dependencies which aren't explicitly stated in `package.json`, so as long as no breaking error appears, everything should work as expected.
|
||||
Les avertissements informent du tirage de dépendances supplémentaires qui ne sont pas explicitement spécifiées dans `package.json`, donc tant qu'aucune erreur bloquante n'apparaît, tout devrait fonctionner comme prévu.
|
||||
|
||||
#### When user accesses login page, error about unauthorized user trying to access workspace appears in logs
|
||||
#### Lorsque l'utilisateur accède à la page de connexion, une erreur concernant des utilisateurs non autorisés essayant d'accéder à l'espace de travail apparaît dans les journaux
|
||||
|
||||
That's expected as user is unauthorized when logged out since its identity is not verified.
|
||||
C'est attendu car l'utilisateur est non autorisé lorsqu'il est déconnecté puisque son identité n'est pas vérifiée.
|
||||
|
||||
#### How to check if your worker is running?
|
||||
#### Comment vérifier si votre worker fonctionne ?
|
||||
|
||||
* Go to [webhook-test.com](https://webhook-test.com/) and copy **Your Unique Webhook URL**.
|
||||
* Allez sur [webhook-test.com](https://webhook-test.com/) et copiez **Votre URL Webhook Unique**.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test.jpg" alt="Webhook test" />
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test.jpg" alt="Test de Webhook" />
|
||||
</div>
|
||||
|
||||
* Open your Twenty app, navigate to `/settings`, and enable the **Advanced** toggle at the bottom left of the screen.
|
||||
* Create a new webhook.
|
||||
* Paste **Your Unique Webhook URL** in the **Endpoint Url** field in Twenty. Set the **Filters** to `Companies` and `Created`.
|
||||
* Ouvrez votre application Twenty, naviguez jusqu'à `/settings`, et activez le bouton **Avancé** en bas à gauche de l'écran.
|
||||
* Créez un nouveau webhook.
|
||||
* Collez **Votre URL Webhook Unique** dans le champ **URL de l'Endpoint** de Twenty. Réglez les **Filtres** sur `Sociétés` et `Créé`.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-settings.jpg" alt="Webhook settings" />
|
||||
<img src="/images/docs/developers/self-hosting/webhook-settings.jpg" alt="Paramètres du Webhook" />
|
||||
</div>
|
||||
|
||||
* Go to `/objects/companies` and create a new company record.
|
||||
* Return to [webhook-test.com](https://webhook-test.com/) and check if a new **POST request** has been received.
|
||||
* Accédez à `/objects/companies` et créez un nouvel enregistrement de société.
|
||||
* Retournez sur [webhook-test.com](https://webhook-test.com/) et vérifiez si une nouvelle **requête POST** a été reçue.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test-result.jpg" alt="Webhook test result" />
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test-result.jpg" alt="Résultat du test du Webhook" />
|
||||
</div>
|
||||
|
||||
* If a **POST request** is received, your worker is running successfully. Otherwise, you need to troubleshoot your worker.
|
||||
* Si une **requête POST** est reçue, votre worker fonctionne avec succès. Sinon, vous devez résoudre les problèmes de votre worker.
|
||||
|
||||
#### Front-end fails to start and returns error TS5042: Option 'project' cannot be mixed with source files on a command line
|
||||
#### Le front-end échoue à démarrer et renvoie l'erreur TS5042 : L'option 'project' ne peut pas être mélangée avec les fichiers sources en ligne de commande
|
||||
|
||||
Comment out checker plugin in `packages/twenty-ui/vite-config.ts` like in example below
|
||||
Commentez le plugin de vérification dans `packages/twenty-ui/vite-config.ts` comme dans l'exemple ci-dessous
|
||||
|
||||
```
|
||||
plugins: [
|
||||
@@ -166,62 +165,62 @@ plugins: [
|
||||
],
|
||||
```
|
||||
|
||||
#### Admin panel not accessible
|
||||
#### Panneau d'administration inaccessible
|
||||
|
||||
Run `UPDATE core."user" SET "canAccessFullAdminPanel" = TRUE WHERE email = 'you@yourdomain.com';` in database container to get access to admin panel.
|
||||
Exécutez `UPDATE core."user" SET "canAccessFullAdminPanel" = TRUE WHERE email = 'vous@votredomaine.com';` dans le conteneur de base de données pour obtenir l'accès au panneau d'administration.
|
||||
|
||||
### 1-click Docker compose
|
||||
### Docker compose en un clic
|
||||
|
||||
#### Unable to Log In
|
||||
#### Impossible de se connecter
|
||||
|
||||
If you can't log in after setup:
|
||||
Si vous ne pouvez pas vous connecter après la configuration :
|
||||
|
||||
1. Run the following commands:
|
||||
1. Exécutez les commandes suivantes :
|
||||
```bash
|
||||
docker exec -it twenty-server-1 yarn
|
||||
docker exec -it twenty-server-1 npx nx database:reset --configuration=no-seed
|
||||
```
|
||||
2. Restart the Docker containers:
|
||||
2. Redémarrez les conteneurs Docker :
|
||||
```bash
|
||||
docker compose down
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
Note the database:reset command will completely erase your database and recreate it from scratch.
|
||||
Notez que la commande database:reset effacera complètement votre base de données et la recréera à partir de zéro.
|
||||
|
||||
#### Connection Issues Behind a Reverse Proxy
|
||||
#### Problèmes de connexion derrière un proxy inverse
|
||||
|
||||
If you're running Twenty behind a reverse proxy and experiencing connection issues:
|
||||
Si vous exécutez Twenty derrière un proxy inverse et rencontrez des problèmes de connexion :
|
||||
|
||||
1. **Verify SERVER_URL:**
|
||||
1. **Vérifiez SERVER_URL :**
|
||||
|
||||
Ensure `SERVER_URL` in your `.env` file matches your external access URL, including `https` if SSL is enabled.
|
||||
Assurez-vous que `SERVER_URL` dans votre fichier `.env` correspond à l'URL d'accès externe, incluant `https` si SSL est activé.
|
||||
|
||||
2. **Check Reverse Proxy Settings:**
|
||||
2. **Vérifiez les paramètres du proxy inverse :**
|
||||
|
||||
* Confirm that your reverse proxy is correctly forwarding requests to the Twenty server.
|
||||
* Ensure headers like `X-Forwarded-For` and `X-Forwarded-Proto` are properly set.
|
||||
* Confirmez que votre proxy inverse transfère correctement les requêtes au serveur Twenty.
|
||||
* Assurez-vous que les en-têtes comme `X-Forwarded-For` et `X-Forwarded-Proto` sont correctement configurés.
|
||||
|
||||
3. **Restart Services:**
|
||||
3. **Redémarrez les services :**
|
||||
|
||||
After making changes, restart both the reverse proxy and Twenty containers.
|
||||
Après avoir apporté des modifications, redémarrez à la fois le proxy inverse et les conteneurs Twenty.
|
||||
|
||||
#### Error when uploading an image - permission denied
|
||||
#### Erreur lors du téléchargement d'une image - permission refusée
|
||||
|
||||
Switching the data folder ownership on the host from root to another user and group resolves this problem.
|
||||
Changer la propriété du dossier de données sur l'hôte de root à un autre utilisateur et groupe résout ce problème.
|
||||
|
||||
## Getting Help
|
||||
## Obtenir de l'aide
|
||||
|
||||
If you encounter issues not covered in this guide:
|
||||
Si vous rencontrez des problèmes non couverts par ce guide :
|
||||
|
||||
* Check Logs:
|
||||
* Vérifiez les journaux :
|
||||
|
||||
View container logs for error messages:
|
||||
Consultez les journaux de conteneur pour les messages d'erreur :
|
||||
|
||||
```bash
|
||||
docker compose logs
|
||||
```
|
||||
|
||||
* Community Support:
|
||||
* Support communautaire :
|
||||
|
||||
Reach out to the [Twenty community](https://github.com/twentyhq/twenty/issues) or [support channels](https://discord.gg/cx5n4Jzs57) for assistance.
|
||||
Contactez la [communauté Twenty](https://github.com/twentyhq/twenty/issues) ou les [canaux de support](https://discord.gg/cx5n4Jzs57) pour obtenir de l'aide.
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
---
|
||||
title: Upgrade guide
|
||||
title: Guide de mise à niveau
|
||||
---
|
||||
|
||||
## General guidelines
|
||||
## Consignes générales
|
||||
|
||||
**Always make sure to back up your database before starting the upgrade process** by running `docker exec -it {db_container_name_or_id} pg_dumpall -U {postgres_user} > databases_backup.sql`.
|
||||
**Assurez-vous toujours de sauvegarder votre base de données avant de commencer le processus de mise à niveau** en exécutant `docker exec -it {db_container_name_or_id} pg_dumpall -U {postgres_user} > databases_backup.sql`.
|
||||
|
||||
To restore backup, run `cat databases_backup.sql | docker exec -i {db_container_name_or_id} psql -U {postgres_user}`.
|
||||
Pour restaurer la sauvegarde, exécutez `cat databases_backup.sql | docker exec -i {db_container_name_or_id} psql -U {postgres_user}`.
|
||||
|
||||
If you used Docker Compose, follow these steps:
|
||||
Si vous avez utilisé Docker Compose, suivez ces étapes :
|
||||
|
||||
1. In a terminal, on the host where Twenty is running, turn off Twenty: `docker compose down`
|
||||
1. Dans un terminal, sur l'hôte où Twenty est en cours d'exécution, éteignez Twenty: `docker compose down`
|
||||
|
||||
2. Upgrade the version by changing the `TAG` value in the .env file near your docker-compose. ( We recommend consuming `major.minor` version such as `v0.53` )
|
||||
2. Mettez à niveau la version en changeant la valeur `TAG` dans le fichier .env près de votre docker-compose. (Nous recommandons de consommer la version `major.minor` telle que `v0.53`)
|
||||
|
||||
3. Bring Twenty back online with `docker compose up -d`
|
||||
3. Remettez Twenty en ligne avec `docker compose up -d`
|
||||
|
||||
If you want to upgrade your instance by few versions, e.g. from v0.33.0 to v0.35.0, you have to upgrade your instance sequentially, in this example from v0.33.0 to v0.34.0, then from v0.34.0 to v0.35.0.
|
||||
Si vous souhaitez mettre à niveau votre instance de quelques versions, par exemple de la v0.33.0 à la v0.35.0, vous devez mettre à niveau votre instance de manière séquentielle, dans cet exemple de la v0.33.0 à la v0.34.0, puis de la v0.34.0 à la v0.35.0.
|
||||
|
||||
**Make sure that after each upgraded version you have non-corrupted backup.**
|
||||
**Assurez-vous qu'après chaque version mise à niveau, votre sauvegarde ne soit pas corrompue.**
|
||||
|
||||
## Version-specific upgrade steps
|
||||
## Étapes de mise à niveau spécifiques à la version
|
||||
|
||||
## v1.0
|
||||
|
||||
Hello Twenty v1.0! 🎉
|
||||
Bonjour Twenty v1.0 ! 🎉
|
||||
|
||||
## v0.60
|
||||
|
||||
### Performance Enhancements
|
||||
### Améliorations des performances
|
||||
|
||||
All interactions with the metadata API have been optimized for better performance, particularly for object metadata manipulation and workspace creation operations.
|
||||
Toutes les interactions avec l'API des métadonnées ont été optimisées pour de meilleures performances, en particulier pour la manipulation des métadonnées d'objets et les opérations de création d'espaces de travail.
|
||||
|
||||
We've refactored our caching strategy to prioritize cache hits over database queries when possible, significantly improving the performance of metadata API operations.
|
||||
Nous avons remanié notre stratégie de mise en cache pour privilégier les accès cache plutôt que les requêtes de base de données lorsque c'est possible, améliorant ainsi significativement les performances des opérations de l'API des métadonnées.
|
||||
|
||||
If you encounter any runtime issues after upgrading, you may need to flush your cache to ensure it's synchronized with the latest changes. Run this command in your twenty-server container:
|
||||
Si vous rencontrez des problèmes d'exécution après la mise à niveau, vous devrez peut-être vider votre cache pour vous assurer qu'il est synchronisé avec les dernières modifications. Exécutez cette commande dans votre conteneur twenty-server :
|
||||
|
||||
```bash
|
||||
yarn command:prod cache:flush
|
||||
@@ -42,113 +42,113 @@ yarn command:prod cache:flush
|
||||
|
||||
### v0.55
|
||||
|
||||
Upgrade your Twenty instance to use v0.55 image
|
||||
Mettez à niveau votre instance Twenty pour utiliser l'image v0.55
|
||||
|
||||
You don't need to run any command anymore, the new image will automatically care about running all required migrations.
|
||||
Vous n'avez plus besoin de lancer de commande, la nouvelle image se chargera automatiquement de l'exécution de toutes les migrations requises.
|
||||
|
||||
### `User does not have permission` error
|
||||
### Erreur `L'utilisateur n'a pas d'autorisation`
|
||||
|
||||
If you encounter authorization errors on most requests after upgrading, you may need to flush your cache to recompute the latest permissions.
|
||||
Si vous rencontrez des erreurs d'autorisation sur la plupart des requêtes après la mise à niveau, vous devrez peut-être vider votre cache pour recalculer les dernières autorisations.
|
||||
|
||||
In your `twenty-server` container, run:
|
||||
Dans votre conteneur `twenty-server`, exécutez :
|
||||
|
||||
```bash
|
||||
yarn command:prod cache:flush
|
||||
```
|
||||
|
||||
This issue is specific to this Twenty version and should not be required for future upgrades.
|
||||
Ce problème est spécifique à cette version de Twenty et ne devrait pas être nécessaire pour les futures mises à niveau.
|
||||
|
||||
### v0.54
|
||||
|
||||
Since version `0.53`, no manual actions needed.
|
||||
Depuis la version `0.53`, aucune action manuelle n'est nécessaire.
|
||||
|
||||
#### Metadata schema deprecation
|
||||
#### Abandon du schéma de métadonnées
|
||||
|
||||
We've merged the `metadata` schema into the `core` one to simplify data retrieval from `TypeORM`.
|
||||
We have merged the `migrate` command step within the `upgrade` command. We do not recommend running `migrate` manually within any of your server/worker containers.
|
||||
Nous avons fusionné le schéma `metadata` dans celui de `core` pour simplifier la récupération de données de `TypeORM`.
|
||||
Nous avons intégré l'étape de commande `migrate` dans la commande `upgrade`. Nous ne recommandons pas l'exécution manuelle de `migrate` dans l'un de vos conteneurs serveur/travailleur.
|
||||
|
||||
### Since v0.53
|
||||
### Depuis la v0.53
|
||||
|
||||
Starting from `0.53`, upgrade is programmatically done within the `DockerFile`, this means from now on, you shouldn't have to run any command manually anymore.
|
||||
À partir de `0.53`, la mise à niveau est effectuée de manière programmatique au sein du `DockerFile`, cela signifie que vous ne devez plus exécuter de commande manuellement.
|
||||
|
||||
Make sure to keep upgrading your instance sequentially, without skipping any major version (e.g. `0.43.3` to `0.44.0` is allowed, but `0.43.1` to `0.45.0` isn't), else could lead to workspace version desynchronization that could result in runtime error and missing functionality.
|
||||
Assurez-vous de continuer à mettre à jour votre instance de manière séquentielle, sans sauter de version majeure (par exemple, de `0.43.3` à `0.44.0` est autorisé, mais de `0.43.1` à `0.45.0` ne l'est pas), sinon cela pourrait entraîner une désynchronisation de la version de l'espace de travail pouvant entraîner une erreur d'exécution et des fonctionnalités manquantes.
|
||||
|
||||
To check if a workspace has been correctly migrated you can review its version in database in `core.workspace` table.
|
||||
Pour vérifier si un espace de travail a été correctement migré, vous pouvez consulter sa version dans la base de données dans la table `core.workspace`.
|
||||
|
||||
It should always be in the range of your current Twenty's instance `major.minor` version, you can view your instance version in the admin panel (at `/settings/admin-panel`, accessible if your user has `canAccessFullAdminPanel` property set to true in the database) or by running `echo $APP_VERSION` in your `twenty-server` container.
|
||||
Il doit toujours être dans la plage de la version `major.minor` de votre instance Twenty actuelle, vous pouvez consulter la version de votre instance dans le panneau d'administration (à l'adresse `/settings/admin-panel`, accessible si votre utilisateur a la propriété `canAccessFullAdminPanel` définie comme vraie dans la base de données) ou en exécutant `echo $APP_VERSION` dans votre conteneur `twenty-server`.
|
||||
|
||||
To fix a desynchronized workspace version, you will have to upgrade from the corresponding twenty's version following related upgrade guide sequentially and so on until it reaches desired version.
|
||||
Pour corriger une version d'espace de travail désynchronisée, vous devrez effectuer une mise à niveau à partir de la version correspondante de Twenty en suivant le guide de mise à niveau correspondant séquentiellement, et ainsi de suite jusqu'à atteindre la version souhaitée.
|
||||
|
||||
#### `auditLog` removal
|
||||
#### Suppression de `auditLog`
|
||||
|
||||
We've removed the auditLog standard object, which means your backup size might be significantly reduced after this migration.
|
||||
Nous avons supprimé l'objet standard auditLog, ce qui signifie que la taille de votre sauvegarde pourrait être considérablement réduite après cette migration.
|
||||
|
||||
### v0.51 to v0.52
|
||||
### v0.51 à v0.52
|
||||
|
||||
Upgrade your Twenty instance to use v0.52 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.52
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
#### I have a workspace blocked in version between `0.52.0` and `0.52.6`
|
||||
#### J'ai un espace de travail bloqué dans la version entre `0.52.0` et `0.52.6`
|
||||
|
||||
Unfortunately `0.52.0` and `0.52.6` have been completely removed from dockerHub.
|
||||
You will have to manually update your workspace version to `0.51.0` in database and upgrade using twenty version `0.52.11` following its just above upgrade guide.
|
||||
Malheureusement, `0.52.0` et `0.52.6` ont été entièrement supprimés de dockerHub.
|
||||
Vous devrez mettre à jour manuellement la version de votre espace de travail à `0.51.0` dans la base de données et mettre à niveau en utilisant la version twenty `0.52.11` en suivant son guide de mise à niveau juste au-dessus.
|
||||
|
||||
### v0.50 to v0.51
|
||||
### v0.50 à v0.51
|
||||
|
||||
Upgrade your Twenty instance to use v0.51 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.51
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
### v0.44.0 to v0.50.0
|
||||
### v0.44.0 à v0.50.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.50.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.50.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
#### Docker-compose.yml mutation
|
||||
#### Mutation docker-compose.yml
|
||||
|
||||
This version includes a `docker-compose.yml` mutation to give `worker` service access to the `server-local-data` volume.
|
||||
Please update your local `docker-compose.yml` with [v0.50.0 docker-compose.yml](https://github.com/twentyhq/twenty/blob/v0.50.0/packages/twenty-docker/docker-compose.yml)
|
||||
Cette version inclut une mutation `docker-compose.yml` pour donner au service `worker` accès au volume `server-local-data`.
|
||||
Veuillez mettre à jour votre `docker-compose.yml` local avec [docker-compose.yml v0.50.0](https://github.com/twentyhq/twenty/blob/v0.50.0/packages/twenty-docker/docker-compose.yml)
|
||||
|
||||
### v0.43.0 to v0.44.0
|
||||
### v0.43.0 à v0.44.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.44.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.44.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
### v0.42.0 to v0.43.0
|
||||
### v0.42.0 à v0.43.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.43.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.43.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade
|
||||
```
|
||||
|
||||
In this version, we have also switched to postgres:16 image in docker-compose.yml.
|
||||
Dans cette version, nous avons également changé pour l'image postgres:16 dans `docker-compose.yml`.
|
||||
|
||||
#### (Option 1) Database migration
|
||||
#### (Option 1) Migration de base de données
|
||||
|
||||
Keeping the existing postgres-spilo image is fine, but you will have to freeze the version in your docker-compose.yml to be 0.43.0.
|
||||
Conserver l'image postgres-spilo existante est correct, mais vous devrez geler la version dans votre docker-compose.yml à 0.43.0.
|
||||
|
||||
#### (Option 2) Database migration
|
||||
#### (Option 2) Migration de base de données
|
||||
|
||||
If you want to migrate your database to the new postgres:16 image, please follow these steps:
|
||||
Si vous souhaitez migrer votre base de données vers la nouvelle image postgres:16, suivez ces étapes :
|
||||
|
||||
1. Dump your database from the old postgres-spilo container
|
||||
1. Exportez votre base de données depuis l'ancien conteneur postgres-spilo
|
||||
|
||||
```
|
||||
docker exec -it twenty-db-1 sh
|
||||
@@ -157,11 +157,11 @@ exit
|
||||
docker cp twenty-db-1:/home/postgres/databases_backup.sql .
|
||||
```
|
||||
|
||||
Make sure your dump file is not empty.
|
||||
Assurez-vous que votre fichier de sauvegarde n'est pas vide.
|
||||
|
||||
2. Upgrade your docker-compose.yml to use postgres:16 image as in the [docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml) file.
|
||||
2. Mettez à jour votre docker-compose.yml pour utiliser l'image postgres:16 comme dans le fichier [docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml).
|
||||
|
||||
3. Restore the database to the new postgres:16 container
|
||||
3. Restaurez la base de données vers le nouveau conteneur postgres:16
|
||||
|
||||
```
|
||||
docker cp databases_backup.sql twenty-db-1:/databases_backup.sql
|
||||
@@ -170,86 +170,86 @@ psql -U {YOUR_POSTGRES_USER} -d {YOUR_POSTGRES_DB} -f databases_backup.sql
|
||||
exit
|
||||
```
|
||||
|
||||
### v0.41.0 to v0.42.0
|
||||
### v0.41.0 à v0.42.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.42.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.42.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.42
|
||||
```
|
||||
|
||||
**Environment Variables**
|
||||
**Variables d'environnement**
|
||||
|
||||
* Removed: `FRONT_PORT`, `FRONT_PROTOCOL`, `FRONT_DOMAIN`, `PORT`
|
||||
* Added: `FRONTEND_URL`, `NODE_PORT`, `MAX_NUMBER_OF_WORKSPACES_DELETED_PER_EXECUTION`, `MESSAGING_PROVIDER_MICROSOFT_ENABLED`, `CALENDAR_PROVIDER_MICROSOFT_ENABLED`, `IS_MICROSOFT_SYNC_ENABLED`
|
||||
* Supprimé : `FRONT_PORT`, `FRONT_PROTOCOL`, `FRONT_DOMAIN`, `PORT`
|
||||
* Ajouté : `FRONTEND_URL`, `NODE_PORT`, `MAX_NUMBER_OF_WORKSPACES_DELETED_PER_EXECUTION`, `MESSAGING_PROVIDER_MICROSOFT_ENABLED`, `CALENDAR_PROVIDER_MICROSOFT_ENABLED`, `IS_MICROSOFT_SYNC_ENABLED`
|
||||
|
||||
### v0.40.0 to v0.41.0
|
||||
### v0.40.0 à v0.41.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.41.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.41.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.41
|
||||
```
|
||||
|
||||
**Environment Variables**
|
||||
**Variables d'environnement**
|
||||
|
||||
* Removed: `AUTH_MICROSOFT_TENANT_ID`
|
||||
* Supprimé : `AUTH_MICROSOFT_TENANT_ID`
|
||||
|
||||
### v0.35.0 to v0.40.0
|
||||
### v0.35.0 à v0.40.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.40.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.40.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.40
|
||||
```
|
||||
|
||||
**Environment Variables**
|
||||
**Variables d'environnement**
|
||||
|
||||
* Added: `IS_EMAIL_VERIFICATION_REQUIRED`, `EMAIL_VERIFICATION_TOKEN_EXPIRES_IN`, `WORKFLOW_EXEC_THROTTLE_LIMIT`, `WORKFLOW_EXEC_THROTTLE_TTL`
|
||||
* Ajouté : `IS_EMAIL_VERIFICATION_REQUIRED`, `EMAIL_VERIFICATION_TOKEN_EXPIRES_IN`, `WORKFLOW_EXEC_THROTTLE_LIMIT`, `WORKFLOW_EXEC_THROTTLE_TTL`
|
||||
|
||||
### v0.34.0 to v0.35.0
|
||||
### v0.34.0 à v0.35.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.35.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.35.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.35
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.35` takes care of the data migration of all workspaces.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.35` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
**Environment Variables**
|
||||
**Variables d'environnement**
|
||||
|
||||
* We replaced `ENABLE_DB_MIGRATIONS` with `DISABLE_DB_MIGRATIONS` (default value is now `false`, you probably don't have to set anything)
|
||||
* Nous avons remplacé `ENABLE_DB_MIGRATIONS` par `DISABLE_DB_MIGRATIONS` (la valeur par défaut est désormais `false`, vous n'avez probablement rien à paramétrer)
|
||||
|
||||
### v0.33.0 to v0.34.0
|
||||
### v0.33.0 à v0.34.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.34.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.34.0
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.34
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.34` takes care of the data migration of all workspaces.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.34` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
**Environment Variables**
|
||||
**Variables d'environnement**
|
||||
|
||||
* Removed: `FRONT_BASE_URL`
|
||||
* Added: `FRONT_DOMAIN`, `FRONT_PROTOCOL`, `FRONT_PORT`
|
||||
* Supprimé : `FRONT_BASE_URL`
|
||||
* Ajouté : `FRONT_DOMAIN`, `FRONT_PROTOCOL`, `FRONT_PORT`
|
||||
|
||||
We have updated the way we handle the frontend URL.
|
||||
You can now set the frontend URL using the `FRONT_DOMAIN`, `FRONT_PROTOCOL` and `FRONT_PORT` variables.
|
||||
If FRONT_DOMAIN is not set, the frontend URL will fall back to `SERVER_URL`.
|
||||
Nous avons mis à jour notre méthode de gestion des URL frontend.
|
||||
Vous pouvez maintenant définir l'URL frontend en utilisant les variables `FRONT_DOMAIN`, `FRONT_PROTOCOL` et `FRONT_PORT`.
|
||||
Si FRONT_DOMAIN n'est pas défini, l'URL frontend reviendra à `SERVER_URL`.
|
||||
|
||||
### v0.32.0 to v0.33.0
|
||||
### v0.32.0 à v0.33.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.33.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.33.0
|
||||
|
||||
```
|
||||
yarn command:prod cache:flush
|
||||
@@ -257,68 +257,68 @@ yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.33
|
||||
```
|
||||
|
||||
The `yarn command:prod cache:flush` command will flush the Redis cache.
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.33` takes care of the data migration of all workspaces.
|
||||
La commande `yarn command:prod cache:flush` videra le cache Redis.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.33` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
Starting from this version, twenty-postgres image for DB became deprecated and twenty-postgres-spilo is used instead.
|
||||
If you want to keep using twenty-postgres image, simply replace `twentycrm/twenty-postgres:${TAG}` with `twentycrm/twenty-postgres` in docker-compose.yml.
|
||||
À partir de cette version, l'image twenty-postgres pour la DB est devenue obsolète et twenty-postgres-spilo est utilisé à la place.
|
||||
Si vous souhaitez continuer à utiliser l'image twenty-postgres, remplacez simplement `twentycrm/twenty-postgres:${TAG}` par `twentycrm/twenty-postgres` dans docker-compose.yml.
|
||||
|
||||
### v0.31.0 to v0.32.0
|
||||
### v0.31.0 à v0.32.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.32.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.32.0
|
||||
|
||||
**Schema and data migration**
|
||||
**Migration de schéma et de données**
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.32
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.32` takes care of the data migration of all workspaces.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.32` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
**Environment Variables**
|
||||
**Variables d'environnement**
|
||||
|
||||
We have updated the way we handle the Redis connection.
|
||||
Nous avons mis à jour notre méthode de gestion de la connexion Redis.
|
||||
|
||||
* Removed: `REDIS_HOST`, `REDIS_PORT`, `REDIS_USERNAME`, `REDIS_PASSWORD`
|
||||
* Added: `REDIS_URL`
|
||||
* Supprimé : `REDIS_HOST`, `REDIS_PORT`, `REDIS_USERNAME`, `REDIS_PASSWORD`
|
||||
* Ajouté : `REDIS_URL`
|
||||
|
||||
Update your `.env` file to use the new `REDIS_URL` variable instead of the individual Redis connection parameters.
|
||||
Mettez à jour votre fichier `.env` pour utiliser la nouvelle variable `REDIS_URL` au lieu des paramètres de connexion Redis individuels.
|
||||
|
||||
We have also simplified the way we handle the JWT tokens.
|
||||
Nous avons également simplifié notre méthode de gestion des tokens JWT.
|
||||
|
||||
* Removed: `ACCESS_TOKEN_SECRET`, `LOGIN_TOKEN_SECRET`, `REFRESH_TOKEN_SECRET`, `FILE_TOKEN_SECRET`
|
||||
* Added: `APP_SECRET`
|
||||
* Supprimé : `ACCESS_TOKEN_SECRET`, `LOGIN_TOKEN_SECRET`, `REFRESH_TOKEN_SECRET`, `FILE_TOKEN_SECRET`
|
||||
* Ajouté : `APP_SECRET`
|
||||
|
||||
Update your `.env` file to use the new `APP_SECRET` variable instead of the individual tokens secrets (you can use the same secret as before or generate a new random string)
|
||||
Mettez à jour votre fichier `.env` pour utiliser la nouvelle variable `APP_SECRET` à la place des secrets de tokens individuels (vous pouvez utiliser le même secret qu'avant ou générer une nouvelle chaîne aléatoire).
|
||||
|
||||
**Connected Account**
|
||||
**Compte connecté**
|
||||
|
||||
If you are using connected account to synchronize your Google emails and calendars, you will need to activate the [People API](https://developers.google.com/people) on your Google Admin console.
|
||||
Si vous utilisez un compte connecté pour synchroniser vos emails et calendriers Google, vous devrez activer l'API des personnes sur votre console d'administration Google.
|
||||
|
||||
### v0.30.0 to v0.31.0
|
||||
### v0.30.0 à v0.31.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.31.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.31.0
|
||||
|
||||
**Schema and data migration**:
|
||||
**Migration de schéma et de données :**
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.31
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.31` takes care of the data migration of all workspaces.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.31` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
### v0.24.0 to v0.30.0
|
||||
### v0.24.0 à v0.30.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.30.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.30.0
|
||||
|
||||
**Breaking change**:
|
||||
To enhance performances, Twenty now requires redis cache to be configured. We have updated our [docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml) to reflect this.
|
||||
Make sure to update your configuration and to update your environment variables accordingly:
|
||||
**Changement significatif**:
|
||||
Pour améliorer les performances, Twenty nécessite désormais la configuration de cache redis. Nous avons mis à jour notre [docker-compose.yml](https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-docker/docker-compose.yml) pour refléter cela.
|
||||
Assurez-vous de mettre à jour votre configuration et vos variables d'environnement en conséquence :
|
||||
|
||||
```
|
||||
REDIS_HOST={your-redis-host}
|
||||
@@ -326,49 +326,49 @@ REDIS_PORT={your-redis-port}
|
||||
CACHE_STORAGE_TYPE=redis
|
||||
```
|
||||
|
||||
**Schema and data migration**:
|
||||
**Migration de schéma et de données :**
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.30
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.30` takes care of the data migration of all workspaces.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.30` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
### v0.23.0 to v0.24.0
|
||||
### v0.23.0 à v0.24.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.24.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.24.0
|
||||
|
||||
Run the following commands:
|
||||
Exécutez les commandes suivantes :
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.24
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the database structure (core and metadata schemas)
|
||||
The `yarn command:prod upgrade-0.24` takes care of the data migration of all workspaces.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la structure de la base de données (schémas core et metadata)
|
||||
La commande `yarn command:prod upgrade-0.24` s'occupe de la migration des données de tous les espaces de travail.
|
||||
|
||||
### v0.22.0 to v0.23.0
|
||||
### v0.22.0 à v0.23.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.23.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.23.0
|
||||
|
||||
Run the following commands:
|
||||
Exécutez les commandes suivantes :
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
yarn command:prod upgrade-0.23
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the Database.
|
||||
The `yarn command:prod upgrade-0.23` takes care of the data migration, including transferring activities to tasks/notes.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la base de données.
|
||||
La commande `yarn command:prod upgrade-0.23` s'occupe de la migration des données, y compris le transfert des activités vers les tâches/notes.
|
||||
|
||||
### v0.21.0 to v0.22.0
|
||||
### v0.21.0 à v0.22.0
|
||||
|
||||
Upgrade your Twenty instance to use v0.22.0 image
|
||||
Mettez à jour votre instance Twenty pour utiliser l'image v0.22.0
|
||||
|
||||
Run the following commands:
|
||||
Exécutez les commandes suivantes :
|
||||
|
||||
```
|
||||
yarn database:migrate:prod
|
||||
@@ -376,6 +376,6 @@ yarn command:prod workspace:sync-metadata -f
|
||||
yarn command:prod upgrade-0.22
|
||||
```
|
||||
|
||||
The `yarn database:migrate:prod` command will apply the migrations to the Database.
|
||||
The `yarn command:prod workspace:sync-metadata -f` command will sync the definition of standard objects to the metadata tables and apply to required migrations to existing workspaces.
|
||||
The `yarn command:prod upgrade-0.22` command will apply specific data transformations to adapt to the new object defaultRequestInstrumentationOptions.
|
||||
La commande `yarn database:migrate:prod` appliquera les migrations à la base de données.
|
||||
La commande `yarn command:prod workspace:sync-metadata -f` synchronisera la définition des objets standard avec les tables de métadonnées et appliquera les migrations nécessaires aux espaces de travail existants.
|
||||
La commande `yarn command:prod upgrade-0.22` appliquera des transformations de données spécifiques pour s’adapter aux nouvelles `defaultRequestInstrumentationOptions` d’objet.
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
---
|
||||
title: Self-Host
|
||||
description: Deploy and manage Twenty on your own infrastructure.
|
||||
title: Auto-hébergement
|
||||
description: Déployez et gérez Twenty sur votre propre infrastructure.
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="AI" />
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="IA" />
|
||||
</Frame>
|
||||
|
||||
## Overview
|
||||
## Vue d'ensemble
|
||||
|
||||
Twenty can be self-hosted on your own infrastructure, giving you full control over your data and deployment.
|
||||
Twenty peut être auto-hébergé sur votre propre infrastructure, vous offrant un contrôle total sur vos données et votre déploiement.
|
||||
|
||||
## Why Self-Host?
|
||||
## Pourquoi l'auto-hébergement ?
|
||||
|
||||
* **Data ownership**: Keep all CRM data on your own servers
|
||||
* **Compliance**: Meet regulatory requirements for data residency
|
||||
* **Customization**: Full access to modify and extend the platform
|
||||
* **Propriété des données** : Conservez toutes les données CRM sur vos propres serveurs
|
||||
* **Conformité** : Répondez aux exigences réglementaires en matière de résidence des données
|
||||
* **Personnalisation** : Accès complet pour modifier et étendre la plateforme
|
||||
|
||||
## Getting Started
|
||||
## Prise en main
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Docker Compose" icon="docker" href="/l/fr/developers/self-host/capabilities/docker-compose">
|
||||
Quick setup with Docker
|
||||
Configuration rapide avec Docker
|
||||
</Card>
|
||||
|
||||
<Card title="Cloud Providers" icon="cloud" href="/l/fr/developers/self-host/capabilities/cloud-providers">
|
||||
Deploy on AWS, GCP, or Azure
|
||||
<Card title="Fournisseurs cloud" icon="cloud" href="/l/fr/developers/self-host/capabilities/cloud-providers">
|
||||
Déployez sur AWS, GCP ou Azure
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
Reference in New Issue
Block a user