# Guide de Lancement Local et de Migration pour un Projet Exporté de Base44
Ce guide documente les étapes nécessaires pour prendre un projet frontend exporté de la plateforme Base44 et le faire fonctionner en local, complètement déconnecté de l'infrastructure Base44. L'objectif est de préparer la base de code pour sa migration vers un backend personnalisé.
## Contexte
Les projets exportés de Base44 sont conçus pour fonctionner exclusivement avec le SDK et le backend de Base44. Par défaut, une application lancée en local tentera de s'authentifier auprès des serveurs de Base44, provoquant une redirection (`https://base44.app/login`) et empêchant tout développement local.
Ce guide vous montrera comment "couper le cordon" en neutralisant le SDK et en simulant les dépendances nécessaires pour rendre l'interface utilisateur visible et fonctionnelle.
## Prérequis
- Node.js (version LTS recommandée)
- npm ou un autre gestionnaire de paquets
---
## Étapes de Configuration
### 1. Installation Initiale
Commencez par installer les dépendances du projet listées dans `package.json`.
```bash
npm install
```
### 2. Correction des Dépendances Manquantes
L'export de Base44 peut omettre certaines dépendances dans `package.json` alors qu'elles sont utilisées dans le code.
- **Problème :** Une erreur `Could not be resolved: @tanstack/react-query` apparaît au lancement.
- **Solution :** Installez manuellement la dépendance manquante.
```bash
npm install @tanstack/react-query
```
### 3. Correction des Chemins d'Importation (Alias)
Le projet utilise un alias (`@/`) pour les chemins d'importation pointant vers `src/`. Certains chemins générés peuvent être incorrects.
- **Problème :** Erreur `Failed to resolve import "./components/..."`.
- **Solution :** Corrigez les chemins d'importation pour utiliser l'alias.
- **Fichier à modifier :** `src/pages/Layout.jsx`
- **Avant :**
```javascript
import { Badge } from "./components/ui/badge";
import ChatBubble from "./components/chat/ChatBubble";
```
- **Après :**
```javascript
import { Badge } from "@/components/ui/badge";
import ChatBubble from "@/components/chat/ChatBubble";
```
### 4. Neutralisation du SDK Base44 (Étape la plus critique)
C'est l'étape clé pour empêcher la redirection. Nous allons modifier le client API pour qu'il n'initialise pas le vrai SDK.
- **Problème :** L'application redirige vers `https://base44.app/login` au démarrage.
- **Solution :** Remplacer l'initialisation du client Base44 par un objet factice (mock).
- **Fichier à modifier :** `src/api/base44Client.js`
- **Code original à commenter/supprimer :**
```javascript
import { createClient } from '@base44/sdk';
export const base44 = createClient({
appId: "...",
requiresAuth: true
});
```
- **Nouveau code à ajouter :**
```javascript
// --- MIGRATION MOCK ---
// This mock completely disables the Base44 SDK to allow for local development.
// It prevents redirection to the Base44 login page.
export const base44 = {
auth: {
me: () => Promise.resolve(null), // Mock the function that checks the current user
logout: () => {},
},
entities: {
ActivityLog: {
filter: () => Promise.resolve([]),
},
},
// Add other mocked functions as needed during development
};
```
### 5. Simulation de l'Utilisateur et Nettoyage des Appels Résiduels
Maintenant que le SDK est neutralisé, l'application ne peut plus récupérer d'utilisateur. Nous devons en simuler un et désactiver les appels `useQuery` restants.
- **Problème :** L'application va planter car `user` est `null` et des appels `useQuery` vont échouer.
- **Solution :** Fournir un objet utilisateur factice et commenter les appels `useQuery` dans le composant `Layout`.
- **Fichier à modifier :** `src/pages/Layout.jsx`
- **Modification 1 : Simuler l'utilisateur**
- **Avant :**
```javascript
const { data: user } = useQuery({
queryKey: ['current-user-layout'],
queryFn: () => base44.auth.me(),
});
```
- **Après :**
```javascript
// const { data: user } = useQuery({ ... }); // Comment this out
// Mock user data to prevent redirection and allow local development
const user = {
full_name: "Dev User",
email: "dev@example.com",
user_role: "admin", // Change this to test different roles
profile_picture: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
};
```
- **Modification 2 : Neutraliser l'appel des notifications**
- **Avant :**
```javascript
const { data: unreadCount = 0 } = useQuery({
queryKey: ['unread-notifications', user?.id],
// ...
});
```
- **Après :**
```javascript
// const { data: unreadCount = 0 } = useQuery({ ... }); // Comment this out
const unreadCount = 0; // Mocked value
```
### 6. Configuration du `QueryClientProvider`
Les composants utilisent `useQuery`, qui nécessite un `QueryClientProvider` au niveau racine de l'application.
- **Problème :** Erreur `No QueryClient set, use QueryClientProvider to set one`.
- **Solution :** Envelopper l'application avec le provider.
- **Fichier à modifier :** `src/main.jsx`
- **Avant :**
```javascript
ReactDOM.createRoot(document.getElementById('root')).render(
)
```
- **Après :**
```javascript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/App.jsx'
import '@/index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById('root')).render(
,
)
```
### 7. Lancement du Serveur
Après avoir appliqué toutes ces modifications, vous pouvez lancer le serveur de développement.
```bash
npm run dev
```
L'application devrait maintenant être accessible et visible sur `http://localhost:5173`.
## Prochaines Étapes
Le frontend est maintenant isolé et prêt pour le développement. Les prochaines étapes de la migration sont :
1. Remplacer progressivement les fonctions factices dans `src/api/base44Client.js` par des appels à votre propre backend.
2. Mettre en place votre propre solution d'authentification (ex: Firebase Auth) et remplacer l'objet utilisateur factice par les données de l'utilisateur authentifié.
3. Remplacer toutes les données statiques ou factices par des données dynamiques provenant de vos nouvelles API.