Passer au contenu principal
Suivez ce quickstart pour ajouter Base44 à votre projet Solid JS. Vous allez créer un backend Base44, définir des entités et intégrer le SDK dans votre frontend.
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 Solid JS, 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 Solid JS. 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 Solid JS. 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 JavaScript Base44 :
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.js :
import { createClient } from '@base44/sdk';

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

Utiliser le SDK dans votre frontend

Dans votre frontend, écrivez du code pour interagir avec les instances de vos entités. Par exemple :
import { createSignal, onMount, For } from 'solid-js';
import { base44 } from '../api/base44Client';

export default function TaskList() {
  const [tasks, setTasks] = createSignal([]);
  const [newTaskTitle, setNewTaskTitle] = createSignal('');
  const [isLoading, setIsLoading] = createSignal(false);

  onMount(async () => {
    await loadTasks();
  });

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

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

    setIsLoading(true);
    try {
      // Create a record
      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>
        <For each={tasks()}>
          {(task) => <li>{task.title}</li>}
        </For>
      </ul>

      <form onSubmit={addTask}>
        <input
          type="text"
          value={newTaskTitle()}
          onInput={(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

Exécuter votre application localement

Démarrez votre serveur de développement Solid JS pour tester votre intégration. Depuis la racine de votre projet, exécutez :
npm run dev
Votre application Solid JS se connectera à votre backend Base44 via le client SDK, vous permettant de travailler avec vos entités déployées en temps réel.
10

Construire votre frontend

Lorsque vous êtes satisfait du rendu local, construisez votre projet Solid JS 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).
11

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.