Enfyra
Docs

App

Enfyra App (Frontend) Documentation This section covers everything that runs in the Enfyra admin app (port 3000) – the UI, extensions, forms, permissions, and how the app talks to the backend server. The app is a pure API client : it never connects directly to your database. All

Enfyra App (Frontend) Documentation

This section covers everything that runs in the Enfyra admin app (port 3000) – the UI, extensions, forms, permissions, and how the app talks to the backend server.

The app is a pure API client: it never connects directly to your database. All data comes from the Enfyra Server (port 1105) via HTTP APIs.

New to Enfyra? Start with the Installation Guide to set up your backend and frontend.

Quick Navigation

  • API Integration

  • API Integration – How to call backend APIs directly using fetch through appUrl/api/ (e.g., http://localhost:3000/api/user_definition)

  • Extensions & Widgets

  • Extension System – Create custom pages, widgets, and global shell extensions with Vue components

  • Header Actions – Inject custom buttons into the app header and sub-header

  • Forms & Data Entry

  • Form System – Auto-generated forms, validation, relations, and change tracking
  • Relation Picker – Selecting related records inside forms

  • Filter System – Advanced filtering for tables and pickers

  • Permissions & Visibility

  • Permission Builder – Visual permission rule builder

  • Permission Components – PermissionGate component and usePermissions composable

  • Validation

  • Column Rules – Attach min/max, length, pattern, format constraints to columns; rules are enforced server-side on POST/PATCH

  • Navigation & Layout

  • Menu Management – Sidebar and menu configuration
  • Method Management – HTTP method records and badge colors used by route forms

  • Page Header – Page headers with stats and gradients

  • Hooks, Handlers & Packages (UI side)

  • Hooks – Managing hooks from the app UI
  • Custom Handlers – Managing custom handlers from the app UI

  • Package Management – Installing NPM packages for hooks and handlers

  • Storage & Files

  • Storage Management – File uploads, folders, and storage configurations

  • Operations

  • Server Logs – Read and tail backend logs from the admin app
  • Runtime Monitor – Process, database, queue, websocket, and Redis visibility

Frontend Learning Path

If you are building on top of the Enfyra App UI, this is a suggested order:

  1. Understand the architecture
  2. Architecture Overview – How frontend and backend work together

  3. Server Overview – Server-side concepts and APIs

  4. Work with data from the app

  5. Form System – How forms are generated from tables
  6. Filter System – Filtering data in tables and relation pickers

  7. API Integration – Calling APIs from pages, extensions, and widgets

  8. Build custom UI and workflows

  9. Extension System – Custom pages, widgets, and global shell extensions
  10. Header Actions – Custom header actions

  11. Menu Management – Connecting extensions to menus

  12. Secure and control the UI

  13. Permission Builder – Define permission rules
  14. Permission Components – Hide/show UI based on permissions

  15. Permission Builder – Backend permission evaluation (see Permission Builder for details)

  16. Go deeper into backend customization (from the app UI)

  17. Hooks – Configure hooks that run on the server
  18. Custom Handlers – Override default CRUD behavior
  19. Package Management – Install NPM packages for hooks/handlers
  20. Server Hooks & Handlers – Full server-side behavior

How This Relates to the Server Docs

  • The Server docs (../server/README.md) describe what APIs exist and how they behave.
  • The App docs (this folder) describe how the admin app uses those APIs through forms, tables, extensions, and permissions.

When in doubt:

  • If you are asking “Which endpoint / field / filter can I use?” – go to the server docs.
  • If you are asking “How do I show this in the UI / extension?” – stay in the app docs.