Krow-workspace/docs/guide-for-localhost.md

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.

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.

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 :

    import { Badge } from "./components/ui/badge";
    import ChatBubble from "./components/chat/ChatBubble";
    

  • Après :

    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 :

    import { createClient } from '@base44/sdk';
    
    export const base44 = createClient({
      appId: "...",
      requiresAuth: true
    });
    

  • Nouveau code à ajouter :

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

      const { data: user } = useQuery({
        queryKey: ['current-user-layout'],
        queryFn: () => base44.auth.me(),
      });
      

    • Après :

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

      const { data: unreadCount = 0 } = useQuery({
        queryKey: ['unread-notifications', user?.id],
        // ...
      });
      

    • Après :

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

    ReactDOM.createRoot(document.getElementById('root')).render(
        <App />
    )
    

  • Après :

    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(
      <React.StrictMode>
        <QueryClientProvider client={queryClient}>
          <App />
        </QueryClientProvider>
      </React.StrictMode>,
    )
    

7. Lancement du Serveur

Après avoir appliqué toutes ces modifications, vous pouvez lancer le serveur de développement.

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.