React Quickstart

Add a Base44 backend to your React project

Follow this quickstart to add Base44 to your React project. You’ll create a Base44 backend, define entities, and integrate the SDK into your frontend.

The CLI requires Node.js 20.19.0 or higher.

Setup

1. Install the Base44 CLI

   Install the Base44 CLI globally:

   npm install -g base44@latest
   
2. Create a Base44 backend

   Navigate to your React project directory, then run:

   base44 create
   

   If you’re not already logged in, the command will prompt you to authenticate.

   Select Create a basic project when prompted. This creates the backend files within your React project directory. Then follow the prompts to configure your project.

   When you create a project, Base44 skills are included automatically, providing your AI agent with instructions and context for Base44 tasks.

3. Configure your site

   Update your config.jsonc to point to your React build output and set the commands for building and serving. Add the site.outputDirectory, site.buildCommand, and site.serveCommand fields:

   {
     "site": {
       "outputDirectory": "dist",
       "buildCommand": "npm run build",
       "serveCommand": "npm run dev"
     }
   }
   

   With serveCommand set, base44 dev starts your backend and frontend together from a single terminal. With buildCommand set, base44 build compiles your frontend with your app ID injected.

4. Define entities

   Create entity schemas to define your data structures. Entity files must be placed in the base44/entities/ directory.

   For example, create base44/entities/task.jsonc:

   {
     "name": "Task",
     "type": "object",
     "properties": {
       "title": {
         "type": "string"
       },
       "completed": {
         "type": "boolean",
         "default": false
       }
     },
     "required": ["title"]
   }
   
5. Push entities to Base44

   Push your entity schemas to Base44:

   base44 entities push
   

   This command synchronizes your local entity definitions with your Base44 backend, making them available for use in your application. See entities push for more information.

6. Install the Base44 SDK

   Install the Base44 JavaScript SDK:

   npm install @base44/sdk
   
7. Create a Base44 client

   Create a Base44 SDK client in your project. Read the app ID from VITE_BASE44_APP_ID, which base44 build and base44 dev set automatically.

   For example, create src/api/base44Client.js:

   import { createClient } from '@base44/sdk';
   
   export const base44 = createClient({
     appId: import.meta.env.VITE_BASE44_APP_ID,
   });
   

   VITE_BASE44_APP_ID resolves to your linked app’s ID, which the CLI reads from base44/.app.jsonc.

8. Use the SDK in your frontend

   Create a simple component to list and add tasks. For example, create src/components/TaskList.jsx:

   import { useState, useEffect } from 'react';
   import { base44 } from '../api/base44Client';
   
   export default function TaskList() {
     const [tasks, setTasks] = useState([]);
     const [newTaskTitle, setNewTaskTitle] = useState('');
     const [isLoading, setIsLoading] = useState(false);
   
     useEffect(() => {
       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>
           {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 the exact entity name from your schema when calling the SDK, including capitalization. By convention, entity names begin with a capital letter. For example, if your schema has "name": "Task", you access it as base44.entities.Task.list().

9. Run your app locally

   Start your Vite development server to test your integration. From your project root, run:

   npm run dev
   

   Your React project will connect to your Base44 backend through the SDK client, allowing you to work with your deployed entities in real-time.

10. Build and deploy your frontend

    Build your React project for production with your app ID injected, then deploy:

    base44 build
    base44 deploy
    

    base44 build runs your buildCommand with VITE_BASE44_APP_ID set to your linked app’s ID. base44 deploy uploads the compiled files and pushes any updates to your entity schemas. When complete, you’ll see a link to your Base44 dashboard and your live application URL.

Next steps

Now that your Base44 backend is integrated with your project, you can:

• Use the SDK to add more functionality to your frontend.
• Add entities, backend functions, and agents. If you’re working in TypeScript, generate types to get autocomplete and type safety.
• Test locally with base44 dev. See Local development for setup instructions.
• Continue building your frontend and deploy updates with base44 deploy.
• Open your deployed site with base44 site open.

See also

• CLI Command Reference: All available CLI commands
• Project Structure: How project files are organized
• JavaScript SDK Documentation: Connect your app to the backend
• Base44 Skills: Teach AI assistants to work with Base44