Managing Frontend Assets

Relevant source files

The following files were used as context for generating this wiki page:

• build_tools/download_frontend.sh
• pro_admin_frontend/README.md
• README.md
• examples/axum_example/api/src/lib.rs
• sea-orm-pro/src/config.rs
• pro_admin/config.toml
• examples/axum_example/README.md

The frontend of the SeaORM Pro admin panel is a decoupled system based on Ant Design Pro. Because the core project focuses on the Rust-based backend, the frontend assets are managed as pre-compiled artifacts that are fetched during the installation process and served as static files by the backend server.

The management of these assets involves three primary phases: acquisition via automated scripts, configuration of visual elements via TOML files, and integration into the backend routing logic to ensure the Single Page Application (SPA) functions correctly.

Sources: pro_admin_frontend/README.md:1-3, README.md:55-58

Asset Acquisition and Installation

Frontend assets are not stored directly in the repository's primary source tree. Instead, they are distributed as a compressed archive (admin_panel.tar.gz) hosted on GitHub releases. A specialized shell script is provided to automate the retrieval and extraction of these assets into the local project structure.

The Download Script

The build_tools/download_frontend.sh script performs the following actions:

1. Cleanup: Removes any existing assets/admin directory to ensure a clean state.
2. Creation: Creates a new assets/admin directory.
3. Download: Uses curl to fetch the latest admin_panel.tar.gz from the official SeaQL repository.
4. Extraction: Extracts the contents using tar, stripping the top-level component to place files directly into the target directory.

Sources: build_tools/download_frontend.sh:4-16

The following diagram illustrates the asset setup workflow:

Backend Integration and Serving

Once the assets are downloaded, the backend must be configured to serve them to the user. In the provided Axum example, the server uses a dedicated service nest to handle requests to the /admin path.

Static File Hosting Logic

The backend server maps the /admin URL prefix to the physical directory containing the downloaded assets. Crucially, because the frontend is an SPA, the server includes a "fallback" mechanism. If a specific file is not found (e.g., a deep link like /admin/tables/customer), the server returns index.html, allowing the frontend router to handle the request.

// Implementation in Axum
.nest_service(
    "/admin",
    get_service(
        ServeDir::new(concat!(env!("CARGO_MANIFEST_DIR"), "/../assets/admin")).fallback(
            ServeFile::new(concat!(
                env!("CARGO_MANIFEST_DIR"),
                "/../assets/admin/index.html"
            )),
        ),
    ),
)

Sources: examples/axum_example/api/src/lib.rs:81-91

Request Flow for Frontend Assets

The following sequence diagram shows how the backend resolves requests for frontend assets versus application routes:

Visual Configuration and Customization

While the frontend code is pre-compiled, various visual assets and themes are controlled via the backend configuration system. This allows developers to customize the appearance of the admin panel without rebuilding the frontend source code.

Theme Configuration Options

The ThemeCfg struct in the Rust backend defines the paths for key visual elements. These paths are typically pointed to static files served under the /admin or /static routes.

Field	Type	Description	Example Value
title	String	The text title displayed in the admin panel.	"SeaORM Pro"
logo	String	Path to the favicon or small logo.	"/admin/favicon.ico"
login_banner	String	Path to the image displayed on the login page.	"/admin/logo.png"

Sources: sea-orm-pro/src/config.rs:37-45, pro_admin/config.toml:1-7

Static Resource Resolution

The backend also serves a /static directory which contains global CSS files such as normalize.css and skeleton.css. These provide the foundational styling used across different parts of the application, including the admin interface.

Sources: examples/axum_example/api/src/lib.rs:67-79, examples/axum_example/api/static/css/normalize.css, examples/axum_example/api/static/css/skeleton.css

Summary of Asset Locations

Source Location	Deployment Target	Purpose
build_tools/download_frontend.sh	N/A	Automation script for asset retrieval.
GitHub Releases (.tar.gz)	assets/admin/	Pre-compiled React (Ant Design Pro) application.
api/static/	/static/	Global CSS styles (normalize, skeleton).
pro_admin/config.toml	JSON API	Dynamic configuration for title, logo, and banners.

Sources: build_tools/download_frontend.sh:6, examples/axum_example/api/src/lib.rs:67-91, pro_admin/config.toml:1-7

Managing frontend assets in SeaORM Pro is designed for speed and convenience, allowing users to deploy a professional admin panel by simply running a download script and configuring a TOML file. The backend's static file serving logic ensures that the Single Page Application operates seamlessly while remaining decoupled from the Rust compilation process.