Saltar al contenido principal
Sigue este quickstart para añadir Base44 a tu proyecto Refine. Crearás un backend de Base44, definirás entidades e integrarás Base44 como proveedor de datos en Refine.
El CLI requiere Node.js 20.19.0 o superior.

​
Configuración

1

Instala el CLI de Base44

Instala el CLI de Base44 globalmente:
npm install -g base44@latest
2

Crea un backend de Base44

Navega al directorio de tu proyecto Refine y ejecuta:
base44 create
Si aún no has iniciado sesión, el comando te pedirá que te autentiques.Selecciona Create a basic project cuando se te indique. Esto crea los archivos del backend dentro del directorio de tu proyecto Refine. Luego sigue las indicaciones para configurar tu proyecto.Cuando creas un proyecto, las skills de Base44 se incluyen automáticamente, proporcionando a tu agente de IA instrucciones y contexto para las tareas de Base44.
3

Configura el directorio de salida

Actualiza tu config.jsonc para que apunte a la salida de build de Refine. Añade o modifica el campo site.outputDirectory:
{
  "site": {
    "outputDirectory": "dist"
  }
}
4

Define entidades

Crea esquemas de entidades para definir tus estructuras de datos. Los archivos de entidades deben colocarse en el directorio base44/entities/.Por ejemplo, crea base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

Envía las entidades a Base44

Envía los esquemas de tus entidades a Base44:
base44 entities push
Este comando sincroniza tus definiciones de entidades locales con tu backend de Base44, haciéndolas disponibles para su uso en tu aplicación. Consulta entities push para más información.
6

Instala el SDK de Base44

Instala el SDK de Base44 en tu proyecto Refine:
npm install @base44/sdk
7

Crea un cliente de Base44

Crea un cliente del SDK de Base44 en tu proyecto. El appId se puede encontrar en tu archivo base44/.app.jsonc.Por ejemplo, crea src/api/base44Client.ts:
import { createClient } from '@base44/sdk';

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

Usa el SDK en tu frontend

Crea un componente sencillo para listar y añadir tareas. Por ejemplo, crea 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>
  );
}
Usa el nombre exacto de la entidad de tu esquema al llamar al SDK, incluida la capitalización. Por convención, los nombres de entidades comienzan con mayúscula. Por ejemplo, si tu esquema tiene "name": "Task", accedes a ella como base44.entities.Task.list().
9

Importa el componente en tu app

Actualiza tu src/App.tsx para usar el componente TaskList:
import { TaskList } from './components/TaskList';

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

export default App;
10

Ejecuta tu app localmente

Inicia tu servidor de desarrollo de Refine para probar tu integración. Desde la raíz de tu proyecto, ejecuta:
npm run dev
Tu app de Refine se conectará a tu backend de Base44 a través del proveedor de datos personalizado, gestionando automáticamente todas las operaciones CRUD.
11

Construye tu frontend

Cuando estés satisfecho con cómo se ve todo localmente, construye tu proyecto Refine para producción:
npm run build
Esto crea archivos de producción optimizados en tu directorio de salida (normalmente dist).
12

Despliega tu frontend

Despliega tu frontend construido en Base44:
base44 deploy
El comando deploy despliega tu frontend construido en el hosting de Base44. También enviará cualquier actualización a tus esquemas de entidades si has hecho cambios desde el último push. Cuando se complete, verás el nombre de tu proyecto, un enlace a tu panel de Base44 y la URL de tu aplicación en producción.

​
Siguientes pasos

Ahora que tu backend de Base44 está integrado con tu proyecto, puedes:

​
Ver también

Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la versión en inglés.