> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart de Refine

> Añade Base44 a tu proyecto Refine

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.

<Note>El CLI requiere Node.js 20.19.0 o superior.</Note>

## Configuración

<Steps>
  <Step title="Instala el CLI de Base44">
    Instala el CLI de Base44 globalmente:

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="Crea un backend de Base44">
    Navega al directorio de tu proyecto Refine y ejecuta:

    ```bash theme={null}
    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](/developers/backend/overview/base44-skills) se incluyen automáticamente, proporcionando a tu agente de IA instrucciones y contexto para las tareas de Base44.
  </Step>

  <Step title="Configura el directorio de salida">
    Actualiza tu [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) para que apunte a la salida de build de Refine. Añade o modifica el campo `site.outputDirectory`:

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="Define entidades">
    Crea [esquemas de entidades](/developers/references/entities/introduction) para definir tus estructuras de datos. Los archivos de entidades deben colocarse en el directorio `base44/entities/`.

    Por ejemplo, crea `base44/entities/task.jsonc`:

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="Envía las entidades a Base44">
    Envía los esquemas de tus entidades a Base44:

    ```bash theme={null}
    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`](/developers/references/cli/commands/entities-push) para más información.
  </Step>

  <Step title="Instala el SDK de Base44">
    Instala el SDK de Base44 en tu proyecto Refine:

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="Crea un cliente de Base44">
    Crea un [cliente](/developers/references/sdk/getting-started/client) 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`:

    ```typescript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="Usa el SDK en tu frontend">
    Crea un componente sencillo para listar y añadir tareas. Por ejemplo, crea `src/components/TaskList.tsx`:

    ```tsx theme={null}
    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>
      );
    }
    ```

    <Note>
      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()`.
    </Note>
  </Step>

  <Step title="Importa el componente en tu app">
    Actualiza tu `src/App.tsx` para usar el componente TaskList:

    ```tsx theme={null}
    import { TaskList } from './components/TaskList';

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

    export default App;
    ```
  </Step>

  <Step title="Ejecuta tu app localmente">
    Inicia tu servidor de desarrollo de Refine para probar tu integración. Desde la raíz de tu proyecto, ejecuta:

    ```bash theme={null}
    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.
  </Step>

  <Step title="Construye tu frontend">
    Cuando estés satisfecho con cómo se ve todo localmente, construye tu proyecto Refine para producción:

    ```bash theme={null}
    npm run build
    ```

    Esto crea archivos de producción optimizados en tu directorio de salida (normalmente `dist`).
  </Step>

  <Step title="Despliega tu frontend">
    Despliega tu frontend construido en Base44:

    ```bash theme={null}
    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.
  </Step>
</Steps>

## Siguientes pasos

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

* Usar el [SDK](/developers/references/sdk/getting-started/overview) para añadir más funcionalidad a tu frontend.
* Añadir [entidades](/developers/backend/resources/entities/overview), [funciones de backend](/developers/backend/resources/functions) y [agentes](/developers/backend/resources/agents-config). Si trabajas en TypeScript, [genera tipos](/developers/references/sdk/getting-started/dynamic-types) para obtener autocompletado y seguridad de tipos.
* Probar localmente ejecutando [`base44 dev`](/developers/references/cli/commands/dev) para el backend y `npm run dev` para el frontend. Consulta [Desarrollo local](/developers/backend/overview/local-dev/local-development-overview) para las instrucciones de configuración.
* Seguir creando tu frontend y desplegar actualizaciones con [`base44 deploy`](/developers/references/cli/commands/deploy).
* Abrir tu sitio desplegado con [`base44 site open`](/developers/references/cli/commands/site-open).

## Ver también

* [Referencia de comandos del CLI](/developers/references/cli/commands/introduction): Todos los comandos del CLI disponibles
* [Estructura del proyecto](/developers/backend/overview/project-structure): Cómo se organizan los archivos del proyecto
* [Documentación del SDK de JavaScript](/developers/references/sdk/getting-started/overview): Conecta tu app al backend
* [Skills de Base44](/developers/backend/overview/base44-skills): Enseña a los asistentes de IA a trabajar con Base44

<Note>Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la [versión en inglés](/). </Note>