Blueprint Framework

repository·main·Indexed 19 days ago

https://github.com/blueprintframework/framework

An open-source extension framework and manager for Pterodactyl that allows developers to create modular extensions and administrators to install them without manual code changes. It includes a Bash-based CLI for management, a PHP/Laravel backend, and a frontend extended via React, TypeScript, and Blade. The framework provides a dedicated UI library (@blueprint/ui) with components like UiBadge, UiAlert, and UiDivider to ensure visual consistency with the Pterodactyl panel.

Tokens
8.2K
Snippets
30
Records
47
Agent score
68%

What's inside Blueprint

  1. Use Blueprint UI components in extensions

    main

    Blueprint UI provides a library of versatile, themeable components designed to match the look and feel of Pterodactyl's native UI. Extensions can consume these components using the @blueprint/ui package. Components are designed to be feature-rich counterparts to Pterodactyl's own components, ensuring visual consistency while providing enhanced functionality.

    import { UiBadge } from '@blueprint/ui';
  2. Understand the Blueprint Framework Architecture

    main

    Blueprint works by applying a 'Blueprint patch' onto a Pterodactyl panel. Instead of traditional standalone addons that overwrite files, Blueprint enables a modular system where the panel is extended through 'extensions'.

    The framework components consist of:

    • CLI: Written in Bash, used for management and installation.
    • Backend: Extends Pterodactyl's backend using PHP and Laravel.
    • User-side Frontend: Extends the user interface using React and TypeScript.
    • Admin-side Frontend: Extends the administration interface using PHP, Laravel, and Blade.
  3. Extension Installation Constraints and Validation

    main

    When developing or installing Blueprint extensions, the installation script enforces several security and structural constraints to ensure system stability:

    • Path Escaping: Component file paths and navigation route component paths are strictly forbidden from escaping the components directory. Paths containing .., /.., or starting with / are rejected.
    • File Extensions: Component paths in configuration must not end with a file extension (e.g., .tsx, .ts, .jsx, or .js).
    • Route Types: Navigation routes must be explicitly defined as either server or account type.
    • Encoding: The system expects UTF-8 encoding. If the system locale is not UTF-8, the installation may proceed with limited support or fail during route generation.
    • External Paths: Extensions cannot be imported from external paths; they must be relative to the current directory and not start with ./ or ../ in a way that violates the import rules.
  4. Custom extension removal logic

    main

    If an extension includes a custom removal script located at .blueprint/extensions/<identifier>/private/remove.sh, the Blueprint removal command will execute it before proceeding with the standard cleanup.

    When a custom script is detected, the following environment variables are passed to the script's execution context:

    • ENGINE: The Blueprint engine being used.
    • EXTENSION_IDENTIFIER: The unique identifier of the extension.
    • EXTENSION_TARGET: The target of the extension.
    • EXTENSION_VERSION: The version of the extension.
    • PTERODACTYL_DIRECTORY: The root directory of the Pterodactyl installation.
    • BLUEPRINT_VERSION: The version of Blueprint.

    Warning: Use custom removal scripts with caution as they run with the permissions of the web user.

  5. Configure extension console commands via Console.yml

    main

    If an extension provides a data.console directory, it can define Artisan commands and schedules using a Console.yml file. The installer automatically generates the necessary PHP command classes and schedule entries.

    Command Definition

    For each command defined in the Console.yml hierarchy, the following fields are used:

    • Signature: The Artisan command signature (e.g., extension:my-command).
    • Description: The command description.
    • Path: The relative path to the logic file (must end in .php).
    • Interval: (Optional) The scheduling frequency.

    Supported Scheduling Intervals

    If an interval is provided, the installer maps it to the following Blueprint/Laravel schedule methods:

    • everyMinute, everyTwoMinutes, everyThreeMinutes, everyFourMinutes, everyFiveMinutes, everyTenMinutes, everyFifteenMinutes, everyThirtyMinutes.
    • hourly, daily, weekly, monthly, quarterly, yearly.
    • weekdays, weekends, sundays, mondays, tuesdays, wednesdays, thursdays, fridays, saturdays.
    • Custom Cron: Any other string is treated as a standard cron expression (e.g., cron('0 * * * *')).
  6. Blueprint Client-side API Routes

    main

    Blueprint automatically registers client-side API routes by scanning the routes/blueprint/client/ directory. Each .php file in that directory defines a group of routes prefixed with the filename (excluding the extension).

    For example, a file named api.php in that directory will result in all routes defined within it being prefixed with /api.

  7. Extension Directory Structure and Linking

    main

    Blueprint extensions are organized into specific directories within the .blueprint/extensions/<identifier>/ folder. The installation process automatically creates symbolic links to integrate these into the main application:

    • public/: Contains public assets. Linked to public/extensions/<identifier>.
    • assets/: Contains extension assets (like icons and CSS). Icons are linked to public/assets/extensions/<identifier>/icon.<ext>. CSS is linked to public/assets/extensions/<identifier>/admin.style.css or resources/scripts/blueprint/css/extensions.css.
    • private/: Contains sensitive data and configuration. Includes a .store/ directory for backups of conf.yml, Components.yml, and Console.yml.
    • fs/: The extension filesystem. Linked to storage/extensions/<identifier> and public/fs/<identifier>.
    • wrappers/: Contains Blade templates for dashboard or admin wrappers, linked to resources/views/blueprint/dashboard/wrappers/<identifier>.blade.php or resources/views/blueprint/admin/wrappers/<identifier>.blade.php.
  8. Watch for developer changes with the watch script

    main

    The watch.sh script is a developer utility designed to monitor the .blueprint/dev directory for changes. When changes are detected (via inotifywait), it triggers a rebuild of the extension using the blueprint -add "[developer-build]" command.

    Prerequisites & Behavior:

    • Developer Mode: Must be enabled (checked via is_developer).
    • Configuration: Requires a .blueprint/dev/conf.yml file to exist in the extension directory.
    • Environment Setup: Automatically clears Laravel caches (view, config, route, cache) and the Blueprint cache (bp:cache).
    • Asset Watching: If conf_dashboard_components or conf_dashboard_css are defined in your configuration, the script starts yarn watch in the background to monitor frontend assets.
    • Cleanup: On exit (SIGINT/SIGTERM), the script cleans up by killing background yarn processes and resetting .prettierignore.
    # To use this script, run it from your terminal within the project context
    ./scripts/commands/developer/watch.sh
  9. Initialize a new extension development environment

    main

    The init.sh script is a developer-mode command used to scaffold a new extension from a template into the .blueprint/dev directory.

    Prerequisites:

    • Developer Mode: Developer mode must be enabled for this command to run.
    • Clean Dev Directory: To prevent accidental data loss, the .blueprint/dev directory must be empty (excluding .gitkeep) before running the command. If files exist in .blueprint/dev, the command will fail with a fatal error.

    Workflow: When running the command, you will be prompted to provide the following metadata, which is used to populate the extension's configuration files:

    1. Template: Choose an extension template from the available list (fetched from the BlueprintFramework templates repository).
    2. Name (info.name): The display name of your extension.
    3. Identifier (info.identifier): A unique, lowercase-only string (a-z) used to identify the extension.
    4. Description (info.description): A brief summary of what the extension does.
    5. Version (info.version): The initial version of your extension (e.g., 1.0).
    6. Author (info.author): The name of the extension author.

    Post-Initialization:

    • The extension files are placed in .blueprint/dev.
    • A .dist directory is created in .blueprint/dev containing symlinks to core types.
    • TypeScript types are automatically generated via node scripts/helpers/generate-types.js.
    • The command cleans up temporary build files in .blueprint/tmp upon completion.
  10. Install an extension via CLI

    main

    The Blueprint installation script allows you to install extensions by providing the path to the extension bundle. It supports both standard installations and developer builds.

    Installation Modes

    • Standard Installation: Pass the path to the extension folder or bundle.
    • Developer Build: Use the [developer-build] flag to install an extension from a local development directory (typically .blueprint/dev).

    Requirements for Extensions

    For an installation to succeed, the extension bundle must contain a valid .blueprint/conf.yml file. The installer validates several criteria:

    • Required Configuration: info.name, info.identifier, info.description, info.version, info.target, and admin.view must be defined.
    • Identifier Validation: The info.identifier must be lowercase, contain only a-z characters, and cannot be blueprint or exceed 48 characters.
    • Placeholder Check: Extensions must not contain default placeholder values like [name], [identifier], or [ver] in their configuration.
    • Path Safety: All file and directory paths defined in conf.yml must be relative and cannot attempt to escape the extension bundle (e.g., using .. or absolute paths).
    # Standard installation
    ./blueprint install /path/to/extension
    
    # Developer build installation
    ./blueprint install [developer-build]
  11. Finalize extension installation and rebuild assets

    main

    After extensions are installed, the Blueprint installation process performs several cleanup and finalization steps to ensure the Pterodactyl panel is correctly updated.

    Depending on your configuration, the following actions may occur:

    • Asset Rebuilding: If YARN is enabled and IgnoreRebuild is not set to true, the panel assets are rebuilt using yarn run build:production --progress.
    • Filesystem Linking: Runs php artisan storage:link to ensure storage is accessible.
    • Cache Management: If not in developer watch mode, the script flushes view, config, and route caches. It also clears the application cache (unless KeepApplicationCache is true) and runs php artisan bp:cache and php artisan queue:restart.
    • Permissions: Updates file ownership to the configured $OWNERSHIP value, excluding node_modules.
    • Database Migrations: If dbmigrations is set to true and you are not running in a Docker environment, php artisan migrate --force is executed.