> ## 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 Solid JS

> Añade un backend de Base44 a tu proyecto Solid JS

Sigue este quickstart para añadir Base44 a tu proyecto Solid JS. Crearás un backend de Base44, definirás entidades e integrarás el SDK en tu frontend.

<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 Solid JS 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 Solid JS. 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 Solid JS. 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 JavaScript de Base44:

    ```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.js`:

    ```javascript 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">
    En tu frontend, escribe algo de código para interactuar con las instancias de tus [entidades](/developers/references/sdk/docs/type-aliases/entities). Por ejemplo:

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

    <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="Ejecuta tu app localmente">
    Inicia tu servidor de desarrollo de Solid JS para probar tu integración. Desde la raíz de tu proyecto, ejecuta:

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

    Tu app de Solid JS se conectará a tu backend de Base44 a través del cliente del SDK, lo que te permite trabajar con tus entidades desplegadas en tiempo real.
  </Step>

  <Step title="Construye tu frontend">
    Cuando estés satisfecho con cómo se ve todo localmente, construye tu proyecto Solid JS 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>