How to Elegantly Extend 1Panel: Three Proven Paths for Custom Development

Core Principle: Extend Before Modifying

Before making any changes, always try to use the extension mechanisms provided by 1Panel; only resort to direct code edits when absolutely necessary, to prevent merge conflicts during future upgrades.

Solution 1 – Use the App Store for Custom Applications

This is the recommended, non‑intrusive method. The app store is essentially a Docker Compose application manager, allowing you to package a new service as a custom app.

Steps:

Prepare a docker-compose.yml file that defines the Docker services, networks, and volumes needed for your application.

Create a meta.json file that describes the app (name, version, description, etc.) for 1Panel.

Prepare an icon file logo.png for the app.

Package the three files into a zip archive.

Import the zip via the 1Panel UI under “App Store → Local Apps”.

{
  "name": "My Awesome App",
  "type": "app",
  "logo": "logo.png",
  "version": "1.0.0",
  "description": "这是我的狂拽酷炫的自定义应用",
  "website": "https://your-app.com",
  "document": "https://your-docs.com"
}

After import, the app can be deployed and managed with a single click, just like any official app.

Solution 2 – Add a New Backend Module (e.g., Redis Management)

When the app store cannot satisfy deep integration needs, you can add a native backend module.

Typical workflow (using a Redis manager as example):

Create a data model in core/app/model/redis_instance.go defining Redis connection details.

Add a migration in core/init/migration/migration.go that registers &model.RedisInstance{} with gormigrate.New(...).Migrate() so the database table is created automatically.

Implement the service layer in core/app/service/redis_service.go handling business logic such as connecting to Redis and executing commands.

Define API handlers in core/app/api/v2/redis_api.go that expose the service functions to the front‑end.

Register routes by creating core/router/ro_redis.go which adds the Redis API paths (e.g., /redis/instances, /redis/keys) to the Gin engine, and include the router in common.go.

This approach requires familiarity with Go and 1Panel’s backend architecture but allows deep feature integration.

Solution 3 – Front‑End Refactoring

If you need UI customisation, you can modify the front‑end, which is a standalone Vue project located in the frontend directory.

Steps:

Enter the frontend folder and install dependencies with npm or yarn.

Locate the target .vue component and edit it as needed.

Run the build command, typically npm run build, to generate the production assets.

The build creates a dist directory containing compiled HTML, CSS, and JS files.

Replace the existing static files used by the 1Panel backend (e.g., under core/cmd/server/web/) with the new dist contents.

Note that this method is the most invasive and incurs the highest maintenance cost because the UI changes must be re‑applied after each 1Panel upgrade.

Summary of the Three Paths

App Store (recommended) : Non‑intrusive, zero maintenance, suitable for adding independent services.

Backend Module : Controlled intrusion, enables deep integration, requires Go knowledge.

Front‑End Refactor : High intrusion and maintenance, only for strong UI customization needs.

Choose the approach that matches your requirements and technical comfort level to ensure a stable and maintainable extension of 1Panel.