Solid JS Quickstart

npm install -g base44@latest

base44 create

{
  "site": {
    "outputDirectory": "dist"
  }
}

{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}

base44 entities push

npm install @base44/sdk

import { createClient } from '@base44/sdk';

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

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>
  );
}

npm run dev

npm run build

base44 deploy