↵ to select ↑↓ to navigate
Framework

Framework

ERPNext Framework Cloud Frappe HR Learning CRM Builder Insights Education Helpdesk Wiki Drive Books Gantt Print Designer Lending Studio
Tutorial Learn Discuss Website
'; tocContainer.innerHTML = html; }, updateNavButtons(prevDoc, nextDoc) { const navContainer = document.getElementById('wiki-nav-buttons'); if (!navContainer) return; let html = ''; if (prevDoc || nextDoc) { const justifyClass = prevDoc && nextDoc ? 'sm:justify-between' : (prevDoc ? 'sm:justify-start' : 'sm:justify-end'); html = `
`; if (prevDoc) { html += `
Previous Page ${prevDoc.title}
`; } if (nextDoc) { const mlClass = !prevDoc ? 'sm:ml-auto' : ''; html += `
Next Page ${nextDoc.title}
`; } html += '
'; } navContainer.innerHTML = html; } }); }); function wikiSidebar() { return { // Store expanded states with persistence expandedStates: Alpine.$persist({}), currentRoute: 'framework/user/en/introduction', get isCollapsed() { return this.$store.sidebar.isCollapsed; }, init() { this.revealCurrentPage(this.currentRoute); // Keep the tree in sync when navigation happens client-side // (sidebar links, prev/next buttons, browser back/forward) this.$watch('$store.navigation.currentRoute', (route) => { this.currentRoute = route; this.revealCurrentPage(route); }); }, toggleSidebar() { this.$store.sidebar.toggle(); }, toggleNode(nodeId) { // Toggle the expanded state for this node this.expandedStates[nodeId] = !this.expandedStates[nodeId]; }, isExpanded(nodeId) { // Return whether this node is expanded (default to false) return this.expandedStates[nodeId] || false; }, revealCurrentPage(route) { // Expand all parent groups of the current page, then scroll it into view if (!route) return; this.$nextTick(() => { // Scoped to $root so we don't match the mobile drawer's copy of the tree const currentPageElement = this.$root.querySelector(`[data-route="${route}"]`); if (!currentPageElement) return; // Containers whose x-collapse expansion this call triggers const expandingContainers = []; let parentElement = currentPageElement.parentElement; while (parentElement && parentElement !== this.$root) { if (parentElement.classList.contains('wiki-children')) { const parentItem = parentElement.parentElement; const parentContent = parentItem?.querySelector('.wiki-item-content[data-node-id]'); const nodeId = parentContent?.getAttribute('data-node-id'); if (nodeId && !this.expandedStates[nodeId]) { this.expandedStates[nodeId] = true; expandingContainers.push(parentElement); } } parentElement = parentElement.parentElement; } const scrollToCurrentPage = () => currentPageElement.scrollIntoView({ block: 'nearest' }); if (!expandingContainers.length) { scrollToCurrentPage(); return; } // Scroll only once the x-collapse height transition has // settled, so the position is measured against the final // layout. The timer is a fallback for when no transition // fires at all (e.g. prefers-reduced-motion). const outermost = expandingContainers[expandingContainers.length - 1]; let scrolled = false; const finish = () => { if (scrolled) return; scrolled = true; outermost.removeEventListener('transitionend', finish); scrollToCurrentPage(); }; outermost.addEventListener('transitionend', finish); setTimeout(finish, 400); }); } } }
Edit
Open in ChatGPT
Ask ChatGPT about this page
Open in Claude
Ask Claude about this page

Introduction

What is Frappe Framework?

See More

Frappe, pronounced fra-pay, is a full stack, batteries-included, web framework written in Python and Javascript with MariaDB as the database. It is the framework which powers ERPNext, is pretty generic and can be used to build database driven apps.

Why Frappe?

The key difference in Frappe compared to other frameworks is that meta-data is also treated as data. This enables you to build front-ends very easily. We believe in a monolithic architecture, so Frappe comes with almost everything you need to build a modern web application. It has a full featured Admin UI called the Desk that handles forms, navigation, lists, menus, permissions, file attachment and much more out of the box. Read more here.

Key Features

  1. Full-Stack Framework: Frappe covers both front-end and back-end development, allowing developers to build complete applications using a single framework.
  2. Built-in Admin Interface: Provides a pre-built, customizable admin dashboard for managing application data, reducing development time and effort.
  3. Role-Based Permissions: Comprehensive user and role management system to control access and permissions within the application.
  4. REST API: Automatically generated RESTful API for all models, enabling easy integration with other systems and services.
  5. Customizable Forms and Views: Flexible form and view customization using server-side scripting and client-side JavaScript.
  6. Report Builder: Powerful reporting tool that allows users to create custom reports without writing any code.

Installation

Before you can use Frappe, you need to install it. We have a complete installation guide which covers all possibilities, this guide will also help you understand the backend stack.

Learning and community

  1. Frappe School - Learn Frappe Framework and ERPNext from the various courses by the maintainers or from the community.
  2. GitHub - Explore the source code, contribute, and collaborate with the Frappe community.
  3. Discussion Forum - Hang out with our growing community on our forum, ask questions, help others and be a part of the community.
  4. buildwithhussain.com - Watch Frappe Framework being used in the wild to build world-class web apps.
Last updated 3 months ago
Was this helpful?
Thanks!