Pular para o conteúdo principal
Siga este quickstart para adicionar a Base44 ao seu projeto Refine. Você criará um backend Base44, definirá entidades e integrará a Base44 como um data provider no Refine.
A CLI requer Node.js 20.19.0 ou superior.

​
Configuração

1

Instale a CLI da Base44

Instale a CLI da Base44 globalmente:
npm install -g base44@latest
2

Crie um backend Base44

Navegue até o diretório do seu projeto Refine e execute:
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 Refine. Em seguida, siga as instruções para configurar seu projeto.Quando você cria um projeto, as Base44 skills são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
3

Configure o diretório de saída

Atualize seu config.jsonc para apontar para a saída do build do Refine. Adicione ou modifique o campo site.outputDirectory:
{
  "site": {
    "outputDirectory": "dist"
  }
}
4

Defina entidades

Crie schemas de entidade para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório base44/entities/.Por exemplo, crie base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

Envie entidades para a Base44

Envie seus schemas de entidade para a Base44:
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 para mais informações.
6

Instale o SDK da Base44

Instale o SDK da Base44 no seu projeto Refine:
npm install @base44/sdk
7

Crie um cliente Base44

Crie um cliente SDK da Base44 no seu projeto. O appId pode ser encontrado no seu arquivo base44/.app.jsonc.Por exemplo, crie src/api/base44Client.ts:
import { createClient } from '@base44/sdk';

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

Use o SDK no seu frontend

Crie um componente simples para listar e adicionar tarefas. Por exemplo, crie 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>
  );
}
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().
9

Importe o componente no seu app

Atualize seu src/App.tsx para usar o componente TaskList:
import { TaskList } from './components/TaskList';

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

export default App;
10

Execute seu app localmente

Inicie seu servidor de desenvolvimento Refine para testar sua integração. A partir da raiz do projeto, execute:
npm run dev
Seu app Refine se conectará ao seu backend Base44 através do data provider customizado, lidando automaticamente com todas as operações CRUD.
11

Faça build do seu frontend

Quando estiver satisfeito com como tudo está localmente, faça build do seu projeto Refine para produção:
npm run build
Isso cria arquivos de produção otimizados no seu diretório de saída (normalmente dist).
12

Implante seu frontend

Implante seu frontend compilado na Base44:
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.

​
Próximos passos

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

​
Veja também

Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.