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

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 et est en cours d'exécution.
• Node.js (v22 ou supérieure) a été installé sur votre machine.

Contenu inclus

Stack technique

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 :

{
  "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>"
}

3. Exécuter en local

npm install
npm run dev

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

4. Build et déploiement

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.

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 :

Exemple : utilisation du dataset Chicago

Si vous avez suivi le tutoriel de démarrage, 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) :

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

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 /> :

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

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.

Ajouter un nouveau graphique

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

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 :

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.

Aller plus loin

• Documentation de la Front API : découvrez comment personnaliser et étendre votre API.
• Identity Access Manager : configurez les fournisseurs d'authentification et les droits d'accès.
• Analytics Manager : créez et gérez vos requêtes.
• Documentation des Apps : 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 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 dédié.

Si vous avez besoin d'une assistance concernant vos services OVHcloud, créez une demande depuis notre centre d'aide.

Rejoignez notre communauté d'utilisateurs.