---
title: "Créer une Front App personnalisée avec React, Vite et Shadcn"
description: "Ce guide présente le template d'application React Shadcn Vite, un kit de démarrage orienté développeurs pour créer des applications front-end entièrement personnalisées"
url: https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/tutorials-app-development-react-shadcn
lang: fr
lastUpdated: 2026-09-14
---
> For AI agents: the complete documentation index is available at https://docs.ovhcloud.com/fr/llms.txt, the full documentation bundle is available at https://docs.ovhcloud.com/fr/llms-full.txt.

# Créer une Front App personnalisée avec React, Vite et Shadcn

## Objectif

Ce guide présente le template d'application **React Shadcn Vite**, un kit de démarrage orienté développeurs pour créer des applications front-end entièrement personnalisées au-dessus de la [Front API](https://docs.dataplatform.ovh.net/#/en/technical/sdk/api/index) de la Data Platform.

Ce template offre un **contrôle total sur le code de l'application**, permettant aux développeurs de créer des applications de données sur mesure à l'aide de technologies front-end modernes. Pour une expérience low-code par glisser-déposer, utilisez l'[app builder visuel](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-app-services-apps.md).

:::warning
Il s'agit d'un template avancé destiné aux développeurs à l'aise avec **React, TypeScript et les outils front-end modernes**. Pour une approche no-code, consultez le [guide de démarrage pour créer une app](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/getting-started-visualize-data.md).
:::

## Prérequis

Pour utiliser ce template, réalisez d'abord les étapes suivantes sur la Platform :

- Un schéma **Lakehouse Manager** a été construit et alimenté.
- Un workflow **Data Processing Engine** a été exécuté avec succès.
- Des **Queries** ont été créées dans l'Analytics Manager.
- Une **Front API** a été [déployée](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/getting-started-expose-api.md) et est en cours d'exécution.
- [Node.js](https://nodejs.org/) (v22 ou supérieure) a été installé sur votre machine.

## Contenu inclus

### Stack technique

| Technologie                                     | Objectif                                     |
| ----------------------------------------------- | -------------------------------------------- |
| [React](https://react.dev/) 19                  | Framework UI                                 |
| [TypeScript](https://www.typescriptlang.org/) 5 | Développement typé                           |
| [Vite](https://vite.dev/) 6                     | Outil de build et serveur de dev             |
| [Tailwind CSS](https://tailwindcss.com/) 4      | Framework CSS utility-first                  |
| [Shadcn/UI](https://ui.shadcn.com/)             | Librairie de composants (basée sur Radix UI) |
| [React Router](https://reactrouter.com/) 7      | Routing côté client                          |
| [TanStack Query](https://tanstack.com/query) 5  | État serveur et récupération de données      |
| [Zustand](https://zustand.docs.pmnd.rs/)        | Gestion de l'état côté client                |
| [Recharts](https://recharts.org/)               | Visualisation de données                     |
| [i18next](https://www.i18next.com/)             | Internationalisation (EN/FR)                 |

### Modules

Le template est livré avec trois modules intégrés :

#### `ts-sdk` : SDK Data Platform

Le module central qui gère la communication avec la Platform. Il fournit :

- **`DataPlatformApi`** : un service d'API qui gère deux instances Axios, une pour l'Identity Access Manager (IAM) et une pour la Front API.
- **L'injection automatique de tokens** via des intercepteurs Axios sur chaque requête.
- **L'exécution de requêtes** via `POST /qb/query` pour récupérer les données de vos requêtes de l'Analytics Manager.
- **La récupération des préférences de l'application** pour la configuration du branding et de l'authentification.
- **La configuration de l'environnement** chargée depuis `public/environments-vars.json`.

#### `rts-authentication` : Authentification

Un système d'authentification complet fournissant :

- Une **page de connexion** prenant en charge les identifiants standards et les fournisseurs OAuth.
- **L'authentification multifacteur (MFA)** : email, SMS, et application d'authentification.
- **La gestion de session** avec rafraîchissement automatique (toutes les 15 minutes) et gestion de l'expiration du token.
- Un flux de **changement de mot de passe** avec validation de la robustesse.
- Un **store de session basé sur Zustand** persisté dans `localStorage`.

#### `rts-charts` : Composants de graphiques

Des composants de visualisation de données prêts à l'emploi construits sur Recharts :

- **`<Chart />`** : un composant wrapper qui accepte une `QueryRequest`, exécute la requête auprès de la Front API, et affiche le résultat.
- Types de graphiques pris en charge : **Bar chart**, **Line chart**, **Pie chart**.
- **`<Table />`** : un composant de tableau de données pour les résultats de requêtes tabulaires.
- États de **chargement et d'erreur** intégrés.
- **Prise en charge de dictionnaires** pour traduire les valeurs de champs en libellés lisibles.

## Structure du projet

```
├── public/
│   └── environments-vars.json          # API & IAM endpoints configuration
├── src/
│   ├── main.tsx                        # Application entry point
│   ├── routes.tsx                       # Route definitions
│   ├── components/
│   │   └── ui/                         # Shadcn/UI components
│   ├── config/
│   │   └── i18n/                       # Translation files (EN/FR)
│   ├── contexts/                       # React contexts (Auth, Dictionaries, etc.)
│   ├── forepaas/                       # Data Platform modules
│   │   ├── ts-sdk/                     # SDK module
│   │   ├── rts-authentication/         # Authentication module
│   │   └── rts-charts/                 # Charts module
│   └── pages/
│       ├── Home.tsx                    # Landing page
│       └── dashboard/
│           ├── DashboardOne.tsx        # Example dashboard with PieChart + BarChart
│           └── DashboardTwo.tsx        # Example dashboard with LineChart + BarChart + Table
├── forepaas.json                       # Data Platform deployment configuration
├── vite.config.ts                      # Vite configuration
└── tailwind.config.ts                  # Tailwind CSS theming
```

## Démarrage

### 1. Créer l'application sur la Platform

Depuis la page d'accueil de votre projet, ouvrez **Application Services** et cliquez sur **Créer une application**.

Sélectionnez le template **React Shadcn Vite** dans le store, renseignez le nom de l'application, et confirmez.

### 2. Configurer l'environnement

Le template se connecte à la Platform via deux endpoints définis dans `public/environments-vars.json` :

```json
{
  "IAM_URL": "https://<PROJECT_NAME>.eu.dataplatform.ovh.net/cam?app_id=<APP_ID>",
  "API_URL": "https://<PROJECT_NAME>.eu.dataplatform.ovh.net/<API_ID>"
}
```

| Variable  | Description                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| `IAM_URL` | L'endpoint de l'Identity Access Manager, incluant l'ID de votre application. Utilisé pour l'authentification. |
| `API_URL` | L'endpoint de la Front API. Utilisé pour exécuter des requêtes et récupérer des données.                      |

:::info
En local, le SDK recherche automatiquement `environments-vars-override.json` en priorité, ce qui vous permet de définir des endpoints de développement local sans modifier la configuration principale.
:::

### 3. Exécuter en local

```bash
npm install
npm run dev
```

Le serveur de développement démarre sur `http://localhost:3333`.

### 4. Build et déploiement

```bash
npm run build
```

Cela génère un bundle prêt pour la production dans le dossier `/production`. Vous pouvez également utiliser `npm run zip` pour créer une archive déployable.

Sur la Platform, le processus de build et de déploiement fonctionne de la même manière que celui décrit dans le [guide de déploiement d'application](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/getting-started-visualize-data.md#construire-et-d%C3%A9ployer-la-nouvelle-version-de-votre-application).

## Travailler avec les queries

Le template utilise des objets `QueryRequest` pour récupérer les données de la Front API. Une query request contient :

| Champ                | Description                                                                |
| -------------------- | -------------------------------------------------------------------------- |
| `data.fields`        | Les attributs à récupérer, avec des modes de calcul (ex. `select`, `sum`). |
| `scale.fields`       | Les dimensions selon lesquelles regrouper.                                 |
| `filter`             | Les conditions de filtrage pour restreindre les résultats.                 |
| `dynamic_parameters` | Les paramètres pour le filtrage dynamique (ex. plages de dates).           |
| `order`              | L'ordre de tri des résultats.                                              |
| `data.limit`         | Le nombre maximum de résultats à retourner.                                |

### Exemple : utilisation du dataset Chicago

Si vous avez suivi le [tutoriel de démarrage](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-getting-started.md), le template inclut des dashboards d'exemple compatibles avec le dataset des trajets à vélo de Chicago.

**Nombre moyen de trajets par jour de la semaine** (PieChart) :

```typescript
const query: QueryRequest = {
  data: {
    fields: { avg_rides_per_day_per_station: ["select"] }
  },
  scale: {
    fields: ["week_day"]
  },
  filter: {},
  dynamic_parameters: []
};
```

**Top 5 des stations par nombre total de trajets** (BarChart) :

```typescript
const query: QueryRequest = {
  data: {
    fields: { rides: ["sum"] },
    limit: 5
  },
  scale: {
    fields: ["station_name"]
  },
  order: { rides: "desc" },
  filter: {},
  dynamic_parameters: []
};
```

Ces requêtes sont affichées à l'aide du composant `<Chart />` :

```tsx
<Chart
  title="Average rides per day"
  type="pie"
  query={query}
  dictionary={weekDayDictionary}
/>
```

:::info
Les requêtes ci-dessus utilisent les mêmes attributs (`avg_rides_per_day_per_station`, `rides`, `station_name`, `week_day`, `cat_temperature`) créés lors de l'[étape Analytics Manager](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/getting-started-create-queries.md) du tutoriel de démarrage.
:::

## Personnaliser le template

Ce template est un **point de départ**. Vous êtes censé développer vos propres pages, composants et logique métier par-dessus. Voici quelques tâches courantes :

### Ajouter une nouvelle page

1. Créez votre composant dans `src/pages/`.
2. Ajoutez une route dans `src/routes.tsx`.
3. Ajoutez un lien de navigation dans `src/components/Menu.tsx`.

:::info
Le template inclut un générateur [Plop](https://plopjs.com/) pour créer rapidement de nouvelles pages de dashboard. Exécutez `npm run plop` et suivez les instructions.
:::

### Ajouter un nouveau graphique

Utilisez le composant `<Chart />` avec votre propre `QueryRequest` :

```tsx
import Chart from "@forepaas/rts-charts/components/Chart";

<Chart
  title="My custom chart"
  type="bar"
  query={myQueryRequest}
/>
```

Types pris en charge : `bar`, `line`, `pie`. Pour les données tabulaires, utilisez le composant `<Table />`.

### Ajouter des traductions

Les fichiers de traduction se trouvent dans `src/config/i18n/`. Ajoutez vos clés à la fois dans `en.json` et `fr.json`, puis utilisez-les avec le hook `useTranslation` d'i18next :

```tsx
const { t } = useTranslation();
return <h1>{t("my.translation.key")}</h1>;
```

### Personnaliser le thème

Le theming Tailwind CSS est configuré dans `tailwind.config.ts`. Le template utilise des variables CSS (basées sur HSL) pour les couleurs, prenant en charge à la fois les modes clair et sombre.

Les composants Shadcn/UI peuvent être personnalisés ou étendus à l'aide du [Shadcn CLI](https://ui.shadcn.com/docs/cli).

## Aller plus loin

- [Documentation de la Front API](https://docs.dataplatform.ovh.net/#/en/technical/sdk/api/index) : découvrez comment personnaliser et étendre votre API.
- [Identity Access Manager](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-iam.md) : configurez les fournisseurs d'authentification et les droits d'accès.
- [Analytics Manager](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-analytics-manager.md) : créez et gérez vos requêtes.
- [Documentation des Apps](https://docs.ovhcloud.com/fr/guides/public-cloud/data-platform/landing-page-app-services-apps.md) : découvrez l'alternative no-code visuelle.

Si vous avez besoin d'une formation ou d'une assistance technique pour la mise en oeuvre de nos solutions, contactez votre commercial ou cliquez sur [ce lien](https://www.ovhcloud.com/fr/professional-services/) pour obtenir un devis et demander une analyse personnalisée de votre projet à nos experts de l’équipe Professional Services.

Posez vos questions, faites-nous part de vos commentaires et interagissez directement avec l’équipe qui développe la Data Platform sur le [canal Discord](https://discord.gg/ovhcloud) dédié.

Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre [centre d'aide](https://help.ovhcloud.com/csm?id=csm_get_help).

Rejoignez notre [communauté d'utilisateurs](https://community.ovhcloud.com/).