Passer au contenu principal
Suivez ce quickstart pour ajouter Base44 à votre projet Refine. Vous allez créer un backend Base44, définir des entités et intégrer Base44 en tant que fournisseur de données dans Refine.
La CLI nécessite Node.js 20.19.0 ou supérieur.

​
Configuration

1

Installer la CLI Base44

Installez la CLI Base44 globalement :
npm install -g base44@latest
2

Créer un backend Base44

Naviguez vers le répertoire de votre projet Refine, puis exécutez :
base44 create
Si vous n’êtes pas déjà connecté, la commande vous demandera de vous authentifier.Sélectionnez Create a basic project lorsque demandé. Cela crée les fichiers backend dans le répertoire de votre projet Refine. Suivez ensuite les invites pour configurer votre projet.Lorsque vous créez un projet, les skills Base44 sont incluses automatiquement, fournissant à votre agent IA des instructions et du contexte pour les tâches Base44.
3

Configurer le répertoire de sortie

Mettez à jour votre config.jsonc pour pointer vers la sortie de build Refine. Ajoutez ou modifiez le champ site.outputDirectory :
{
  "site": {
    "outputDirectory": "dist"
  }
}
4

Définir des entités

Créez des schémas d’entités pour définir vos structures de données. Les fichiers d’entités doivent être placés dans le répertoire base44/entities/.Par exemple, créez base44/entities/task.jsonc :
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

Pousser les entités vers Base44

Poussez vos schémas d’entités vers Base44 :
base44 entities push
Cette commande synchronise vos définitions d’entités locales avec votre backend Base44, les rendant disponibles pour une utilisation dans votre application. Consultez entities push pour plus d’informations.
6

Installer le SDK Base44

Installez le SDK Base44 dans votre projet Refine :
npm install @base44/sdk
7

Créer un client Base44

Créez un client SDK Base44 dans votre projet. L’appId peut être trouvé dans votre fichier base44/.app.jsonc.Par exemple, créez src/api/base44Client.ts :
import { createClient } from '@base44/sdk';

export const base44 = createClient({
  appId: 'your-app-id-from-app.jsonc'
});
8

Utiliser le SDK dans votre frontend

Créez un composant simple pour lister et ajouter des tâches. Par exemple, créez src/components/TaskList.tsx :
import { useState, useEffect } from 'react';
import { base44 } from '../api/base44Client';

export function TaskList() {
  const [tasks, setTasks] = useState<any[]>([]);
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    loadTasks();
  }, []);

  const loadTasks = async () => {
    setIsLoading(true);
    try {
      const taskList = await base44.entities.Task.list();
      setTasks(taskList);
    } catch (error) {
      console.error('Error loading tasks:', error);
    }
    setIsLoading(false);
  };

  const addTask = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newTaskTitle.trim()) return;

    setIsLoading(true);
    try {
      const newTask = await base44.entities.Task.create({
        title: newTaskTitle,
        completed: false
      });
      setTasks([...tasks, newTask]);
      setNewTaskTitle('');
    } catch (error) {
      console.error('Error creating task:', error);
    }
    setIsLoading(false);
  };

  return (
    <div>
      <h1>Tasks</h1>

      {isLoading && <p>Loading...</p>}

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>

      <form onSubmit={addTask}>
        <input
          type="text"
          value={newTaskTitle}
          onChange={(e) => setNewTaskTitle(e.target.value)}
          placeholder="New task"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
          Add Task
        </button>
      </form>
    </div>
  );
}
Utilisez le nom exact de l’entité de votre schéma lors de l’appel du SDK, y compris la capitalisation. Par convention, les noms d’entités commencent par une majuscule. Par exemple, si votre schéma a "name": "Task", vous y accédez avec base44.entities.Task.list().
9

Importer le composant dans votre application

Mettez à jour votre src/App.tsx pour utiliser le composant TaskList :
import { TaskList } from './components/TaskList';

function App() {
  return <TaskList />;
}

export default App;
10

Exécuter votre application localement

Démarrez votre serveur de développement Refine pour tester votre intégration. Depuis la racine de votre projet, exécutez :
npm run dev
Votre application Refine se connectera à votre backend Base44 via le fournisseur de données personnalisé, gérant automatiquement toutes les opérations CRUD.
11

Construire votre frontend

Lorsque vous êtes satisfait du rendu local, construisez votre projet Refine pour la production :
npm run build
Cela crée des fichiers de production optimisés dans votre répertoire de sortie (généralement dist).
12

Déployer votre frontend

Déployez votre frontend compilé sur Base44 :
base44 deploy
La commande deploy déploie votre frontend compilé sur l’hébergement Base44. Elle poussera également toutes les mises à jour de vos schémas d’entités si vous avez fait des changements depuis le dernier push. Une fois terminé, vous verrez le nom de votre projet, un lien vers votre tableau de bord Base44 et l’URL de votre application en direct.

​
Étapes suivantes

Maintenant que votre backend Base44 est intégré à votre projet, vous pouvez :

​
Voir aussi

Cette page a été traduite à l’aide de l’IA. Pour les informations les plus précises et à jour, consultez la version anglaise.