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

> Adicione um backend Base44 ao seu projeto Solid JS

Siga este quickstart para adicionar a Base44 ao seu projeto Solid JS. Você criará um backend Base44, definirá entidades e integrará o SDK no seu frontend.

<Note>A CLI requer Node.js 20.19.0 ou superior.</Note>

## Configuração

<Steps>
  <Step title="Instale a CLI da Base44">
    Instale a CLI da Base44 globalmente:

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

  <Step title="Crie um backend Base44">
    Navegue até o diretório do seu projeto Solid JS e execute:

    ```bash theme={null}
    base44 create
    ```

    Se você ainda não estiver logado, o comando vai solicitar que você autentique.

    Selecione **Create a basic project** quando solicitado. Isso cria os arquivos do backend dentro do diretório do seu projeto Solid JS. Em seguida, siga as instruções para configurar seu projeto.

    Quando você cria um projeto, as [Base44 skills](/developers/backend/overview/base44-skills) são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
  </Step>

  <Step title="Configure o diretório de saída">
    Atualize seu [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) para apontar para a saída do build do Solid JS. Adicione ou modifique o campo `site.outputDirectory`:

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

  <Step title="Defina entidades">
    Crie [schemas de entidade](/developers/references/entities/introduction) para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório `base44/entities/`.

    Por exemplo, crie `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="Envie entidades para a Base44">
    Envie seus schemas de entidade para a Base44:

    ```bash theme={null}
    base44 entities push
    ```

    Este comando sincroniza suas definições locais de entidade com seu backend Base44, tornando-as disponíveis para uso na sua aplicação. Veja [`entities push`](/developers/references/cli/commands/entities-push) para mais informações.
  </Step>

  <Step title="Instale o SDK da Base44">
    Instale o SDK JavaScript da Base44:

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

  <Step title="Crie um cliente Base44">
    Crie um [cliente](/developers/references/sdk/getting-started/client) SDK da Base44 no seu projeto. O `appId` pode ser encontrado no seu arquivo `base44/.app.jsonc`.

    Por exemplo, crie `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="Use o SDK no seu frontend">
    No seu frontend, escreva código para interagir com as instâncias das suas [entidades](/developers/references/sdk/docs/type-aliases/entities). Por exemplo:

    ```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>
      Use o nome exato da entidade do seu schema ao chamar o SDK, incluindo capitalização. Por convenção, os nomes de entidade começam com letra maiúscula. Por exemplo, se seu schema tem `"name": "Task"`, você acessa como `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Execute seu app localmente">
    Inicie seu servidor de desenvolvimento Solid JS para testar sua integração. A partir da raiz do projeto, execute:

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

    Seu app Solid JS se conectará ao seu backend Base44 através do cliente SDK, permitindo trabalhar com suas entidades implantadas em tempo real.
  </Step>

  <Step title="Faça build do seu frontend">
    Quando estiver satisfeito com como tudo está localmente, faça build do seu projeto Solid JS para produção:

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

    Isso cria arquivos de produção otimizados no seu diretório de saída (normalmente `dist`).
  </Step>

  <Step title="Implante seu frontend">
    Implante seu frontend compilado na Base44:

    ```bash theme={null}
    base44 deploy
    ```

    O comando `deploy` implanta seu frontend compilado na hospedagem da Base44. Também enviará quaisquer atualizações nos seus schemas de entidade se você tiver feito mudanças desde o último push. Quando concluído, você verá o nome do seu projeto, um link para seu dashboard Base44 e a URL da sua aplicação ao vivo.
  </Step>
</Steps>

## Próximos passos

Agora que o backend Base44 está integrado ao seu projeto, você pode:

* Usar o [SDK](/developers/references/sdk/getting-started/overview) para adicionar mais funcionalidade ao seu frontend.
* Adicionar [entidades](/developers/backend/resources/entities/overview), [funções de backend](/developers/backend/resources/functions) e [agentes](/developers/backend/resources/agents-config). Se está trabalhando em TypeScript, [gere tipos](/developers/references/sdk/getting-started/dynamic-types) para obter autocomplete e segurança de tipo.
* Testar localmente executando [`base44 dev`](/developers/references/cli/commands/dev) para o backend e `npm run dev` para o frontend. Veja [Desenvolvimento local](/developers/backend/overview/local-dev/local-development-overview) para instruções de configuração.
* Continuar construindo seu frontend e implantar atualizações com [`base44 deploy`](/developers/references/cli/commands/deploy).
* Abrir seu site implantado com [`base44 site open`](/developers/references/cli/commands/site-open).

## Veja também

* [Referência de comandos da CLI](/developers/references/cli/commands/introduction): Todos os comandos da CLI disponíveis
* [Estrutura do projeto](/developers/backend/overview/project-structure): Como os arquivos do projeto são organizados
* [Documentação do SDK JavaScript](/developers/references/sdk/getting-started/overview): Conecte seu app ao backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Ensine assistentes de IA a trabalhar com a Base44

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>