mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-27 20:29:10 +00:00
Anso
ec7620675e
* feat(app-store): editorial hero, category rail, security scan signal per tile Rework the App Store view into an editorial layout with a 180px category rail, a featured-template hero, and compact tiles that surface star counts and vulnerability scan status at a glance. The deploy sheet splits into Essentials (one-click deploy) and Advanced (full port/volume/env control) tabs. Backend enriches /api/templates with scan_status, scan_cve_count, and a featured flag computed from the highest-star template with recorded stars. Scan lookups use a single batched SQL query to avoid N+1 round-trips. * fix(app-store): split firstSentence helper into its own module The firstSentence helper lived alongside the TemplateLogo component, which violates react-refresh/only-export-components — a file that exports a component must not also export non-component values, or Fast Refresh cannot establish an HMR boundary. Move the helper into appstore/util.ts and update the two import sites.
108 lines
6.0 KiB
Plaintext
108 lines
6.0 KiB
Plaintext
---
|
|
title: App Store
|
|
description: Browse and deploy pre-configured application templates in one click.
|
|
---
|
|
|
|
The **App Store** tab lets you browse a curated catalogue of Docker Compose templates and deploy any of them as a new stack with environment-specific configuration, no YAML required.
|
|
|
|
<Frame>
|
|
<img src="/images/app-store/app-store-hero.png" alt="App Store with a category sidebar, a featured template hero banner, and editorial tiles with security scan badges" />
|
|
</Frame>
|
|
|
|
## Browsing templates
|
|
|
|
Templates are loaded from a remote registry (configurable in **Settings > App Store**). The default registry is LinuxServer.io. A live count of available apps is shown in the top right of the view.
|
|
|
|
**Search:** Type in the search bar to filter templates by name, description, or category in real-time.
|
|
|
|
**Category sidebar:** The left rail lists every category with its count. Click a category to narrow the grid. The active category is highlighted with a cyan rail and tinted background.
|
|
|
|
**Featured hero:** A featured template is pinned at the top of the grid with its logo, title, description, and a primary **Deploy** button. The hero disappears while you have an active search query.
|
|
|
|
Each tile shows:
|
|
- A brand-tinted logo square (falls back to the first letter of the template name)
|
|
- Name and first-sentence pitch
|
|
- GitHub star count and primary category
|
|
- A **security scan badge** on the right: `CLEAN` (no CVEs detected), `{n} CVE(s)` (amber, open vulnerabilities), or `UNSCANNED` (no scan recorded yet)
|
|
|
|
## Deploying a template
|
|
|
|
Click any tile to open the **deployment sheet** on the right side of the screen. The sheet splits configuration into two tabs: **Essentials** for a fast one-click deploy and **Advanced** for full control over ports, volumes, and environment.
|
|
|
|
<Frame>
|
|
<img src="/images/app-store/deploy-sheet-essentials.png" alt="Deployment sheet opened on the Essentials tab, showing the stack name field and a deploy-with-defaults hint" />
|
|
</Frame>
|
|
|
|
The sheet header displays the app logo, title, and a truncated description with a **Read more** / **Read less** toggle. Below the description you may see:
|
|
|
|
- **Architecture badges** (e.g. `amd64`, `arm64`) when the template declares supported platforms
|
|
- **GitHub stars** count
|
|
- **Source** link to the GitHub repository
|
|
- **Docs** link to the official documentation
|
|
|
|
When deploying to a remote node, a badge at the top of the sheet shows the target node name.
|
|
|
|
### Essentials tab
|
|
|
|
The **Essentials** tab has a single field (the stack name) plus a hint that the template's recommended ports, volumes, and environment variables will be used as-is. Click **Deploy {template}** to ship it in one click. For anything more nuanced, switch to **Advanced**.
|
|
|
|
### Stack name
|
|
|
|
Pre-filled with the template name in lowercase. You can change it; the same [naming rules](/features/stack-management#creating-a-stack) apply (lowercase, hyphens, no spaces).
|
|
|
|
### Advanced tab
|
|
|
|
The **Advanced** tab exposes every knob the template declares: port mappings, volumes, environment variables, custom key/value pairs, and the post-deploy vulnerability scan toggle. Fields on this tab are pre-populated with the template's defaults, so customizing is additive rather than required.
|
|
|
|
### Ports
|
|
|
|
For each exposed port, the sheet shows an editable **host port** field (left side) and the fixed **container port** (right side). Edit the host port to avoid conflicts with other services on the same machine. Ports must be in the valid range (1 to 65535); invalid values are highlighted and block deployment.
|
|
|
|
If a host port is already in use by a running container, a pulsating warning dot appears next to the port. Hover over the dot to see which application is using the port. If the application is managed by Sencho, the stack name is shown; otherwise the indicator reads "used by an external app".
|
|
|
|
<Frame>
|
|
<img src="/images/app-store/app-store-port-conflict.png" alt="Port conflict indicator showing port 8080 is used by heimdall" />
|
|
</Frame>
|
|
|
|
### Volumes
|
|
|
|
For each container mount point, enter the **host path** where that data should be stored. Suggested defaults (e.g. `./config`, `./data`) are pre-filled.
|
|
|
|
<Note>
|
|
Relative paths like `./config` are resolved relative to the stack directory inside your `COMPOSE_DIR`. Absolute paths map directly to the host filesystem.
|
|
</Note>
|
|
|
|
### Environment variables
|
|
|
|
Each template declares the variables it needs. Sencho pre-fills sensible defaults where available (e.g. `PUID=1000`, `PGID=1000`, `TZ` from your browser locale). Edit any value before deploying.
|
|
|
|
### Custom variables
|
|
|
|
Below the template variables, an **Add Custom Variable** section lets you define arbitrary key-value pairs not declared by the template. Type a key and value, then click **+** to add it. If you add a key that already exists in the template defaults, a warning will let you know your custom value will override the default.
|
|
|
|
### What happens on Deploy
|
|
|
|
1. Sencho creates a new stack directory in `COMPOSE_DIR`
|
|
2. Writes the generated `compose.yaml` (and `.env` file if environment variables are configured)
|
|
3. Runs `docker compose up -d`
|
|
4. On success: switches you to the Editor view for that stack
|
|
5. On failure: rolls back by running `docker compose down` and deleting the stack directory
|
|
|
|
A toast notification confirms success or shows the error message. Large images may take a few minutes to pull.
|
|
|
|
If a previous stack with the same name was removed outside of Sencho (for example, through the Docker CLI or Docker Desktop), the leftover directory is cleaned up automatically and the deploy proceeds as normal.
|
|
|
|
<Note>
|
|
Deploying a template requires the `stack:create` permission. Users without this permission will see the Deploy button disabled.
|
|
</Note>
|
|
|
|
## Custom template registry
|
|
|
|
By default Sencho uses the LinuxServer.io template registry. To use your own:
|
|
|
|
1. Open **Settings > App Store**
|
|
2. Enter your registry URL (must serve a JSON array of template objects in Portainer v2 format)
|
|
3. Click **Save & Refresh**
|
|
|
|
Sencho saves the new URL and automatically refreshes the template cache from the new source. To revert to the default registry, click **Reset to Default**.
|