Skip to main content

Key Concepts

RASP Designer Components

1. Designer FE​

The Designer Frontend (FE) is the visual interface of the RASP Designer tool where users can build and design applications through a drag-and-drop interface. It enables users to construct UI screens intuitively without needing to write manual code.


Key Points:

  • Designer FE allows users to visually create application screens without writing code.
  • The left panel contains reusable UI components and a hierarchical view of the current page structure.
  • Users can drag components like buttons, input fields, containers, and more from the left panel onto a canvas.
  • The structure of the page can be viewed and managed from the "Page Structure" tab.
  • The right panel allows users to configure properties such as styles, attributes, and content for selected components.
  • Tab-based navigation at the top (Layout, Data, Users) helps manage the design, backend data resources, and user-level access.
  • The Actions dropdown in the Layout tab allows users to:
    • Save the entire application design to the database.
    • Download the generated React project as a ZIP file, containing the complete front-end source code based on the current design.
  • All design configurations are internally structured and stored in a schema that ensures consistency between the visual layout and the generated application code.

2.Designer BE​

The Designer BE plays a critical role in bridging the visual design interface (FE) with actual backend service code, ensuring that both frontend and backend are aligned and deployable.

Key Points:

  • Built on Node.js and Express for scalable API routing and server management.
  • Uses Prisma ORM for seamless interaction with the database, enabling dynamic schema-based resource handling.
  • Handles multiple API endpoints including:
  • Authentication via Keycloak is supported and managed through secure sessions and JWT verification.
  • Secure session management using express-session and cookie-parser, with configurations stored in a .env file (e.g., Keycloak credentials).
  • The backend receives the application schema when the user clicks "Download" on the front end. It then:
    • Generates backend resources based on schema.
    • Place the full backend project inside a react-apps directory.
  • Templating resource and component code generation is handled via EJS templates, allowing flexible and reusable code scaffolding for CRUD operations and UI components.

3. Backend Generator​

The Backend Generator is an essential part of the RASP Designer platform that bridges the frontend-defined data structures with a fully functional Spring Boot backend.

Key Points:

  • The Backend Generator transforms the data models defined in Designer FE into a fully functional backend codebase.
  • Initiated through the “Generate Resource” button inside the Data tab of the Designer Frontend.
  • This action sends a structured JSON payload (representing models, enums, etc.) to the RASP Platform (backend service built with Spring Boot).
  • The JSON structure is generated by Designer BE, ensuring consistent formatting and data mapping.
  • The RASP Platform interprets this JSON to generate:
    • Controllers
    • Service classes
    • Repositories
    • Entity classes
    • Other necessary backend files in a standard Spring Boot architecture
  • The generated backend is saved in a target location (typically under a configured repo/ folder).
  • The RASP Platform must be running before the generation process is triggered.
  • This flow enables seamless integration between front-end modeling and backend scaffolding, accelerating development and reducing manual effort.