esafwan

React to Frappe Integration Architecture

This document outlines the standard pattern for integrating a modern React application (like the one in huf/frontend) with a Frappe backend. It explains how to deploy the React app as a Single Page Application (SPA) within Frappe without strictly relying on library wrappers like frappe-react-sdk or frappe-js-sdk. You can easily swap in react-query, standard fetch, or axios.

1. Routing and Base URLs (Frappe hooks.py)

To serve a React app on a specific base route (e.g., /amuse instead of /huf), Frappe's website routing rules must be configured in hooks.py.

When a user navigates to /amuse/dashboard, Frappe needs to serve the React app's index.html file so that React Router can take over on the client side.

esafwan

Frappe App Codebase Mapping Agent

Deterministic, Incremental, Script-Assisted, Context-Aware

Mission

You are documenting a Frappe app codebase into a structured, resumable, navigable documentation system.

This applies to:

• ERPNext
• any custom Frappe app

esafwan

ERPNext Project Management Module Discovery

1. Purpose of This Document

This document is a code-and-metadata-based discovery of ERPNext Project Management, focused on the implementation under erpnext/projects and directly related cross-module behavior. It is intended as an engineering handoff reference before any frontend rebuild work.

2. Progress Tracker / Todo Board

Investigation order followed: module footprint → DocTypes → metadata → behavior logic → views/reports → backend contract → hidden dependencies → consolidation.

• Identify module footprint
• Identify core DocTypes

esafwan

Frappe DocType Internals Reference

Source: github.com/frappe/frappe — frappe/core/doctype/doctype/ and frappe/core/doctype/docfield/

This document describes how Frappe stores DocType definitions, field schemas, and form layouts internally.

DocType Document Structure

A DocType is itself a Frappe document (meta-DocType). When you create a DocType, Frappe stores it as a JSON file on disk (for standard DocTypes) or in the database (for custom DocTypes with custom=1).

esafwan

Frappe Commander - DocType Creation Reference

Source: github.com/esafwan/frappe_commander

This document summarizes how Frappe Commander creates DocTypes programmatically, serving as a reference for Huf's Data Table Builder implementation.

Overview

Frappe Commander provides both a CLI (bench new-doctype) and a REST API (commander.api.create_doctype_api) for creating DocTypes without writing code. It uses Frappe's standard ORM to create DocType documents with fields, permissions, and module assignments.

esafwan

Chat in HUF

Reference: develop @ aefaac5 · Branch: feature/jsx-in-chat · Date: 2026-02-13 09:24 UTC

This document describes how the chat feature works in HUF, including UI architecture, message capabilities, APIs, and real-time updates.

---

Overview

esafwan

Demo data setup in ERPNext (Frappe app)

This document explains how ERPNext wires demo data into the install/setup experience, how the data is produced, and how you can replicate the pattern in another Frappe app.

Where the demo-data option shows up

ERPNext adds a “Generate Demo Data for Exploration” checkbox to the setup wizard. This is defined in the setup wizard front-end slide configuration (setup_wizard.js) under the organization slide as the setup_demo field. When checked, its value is included in the setup wizard payload. 【F:erpnext/public/js/setup_wizard.js†L30-L74】

How the setup wizard triggers demo data

esafwan

YouTube Shorts API – Architecture & File Layout (Frappe)

Goal

• Avoid slow/blocking HTTP requests
• Move heavy work to background jobs
• Add safe parallelism
• Enable caching + polling
• Keep frontend API fast (<100 ms)

esafwan

Adding pip Dependencies in a Frappe App (Correct Way)

This is the recommended and production-safe way to add Python dependencies to a Frappe app such as google_services.

---

Preferred Method: pyproject.toml

Open the file:

esafwan

Realtime websocket-based listeners are implemented in Frappe CRM

🔌 Realtime WebSocket Implementation in Frappe CRM

1. Socket Initialization (src/socket.js)

The app initializes a Socket.IO connection that connects to the Frappe realtime server: