raw-app_skill

Overview

This skill provides a template and tooling for building raw apps: custom frontends (React, Svelte, Vue) that call typed Windmill backend runnables and query whitelisted datatables. It scaffolds an app structure, manages backend runnables and SQL migrations, and generates type-safe bindings for frontend calls. Use it to turn scripts and queries into webhooks, workflows, and UIs with an efficient developer experience.

How this skill works

The skill scaffolds a raw_app folder with frontend entry points, backend runnables, a raw_app.yaml config, and an auto-generated wmill.ts type binding. Backend runnables live under backend/ and can be authored in many languages; the frontend calls them via the generated backend client. Datatables are accessed only if listed in raw_app.yaml, and local SQL migrations live in sql_to_apply/ for dev-time application.

When to use it

• You need a custom UI that calls server-side logic with typed bindings.
• You want to author backend runnables in TypeScript, Python, SQL, or other supported languages.
• You must enforce a whitelist of database tables for frontend-accessible queries.
• You want a fast workflow engine and easy local dev with SQL migrations and live reload.
• You need to convert scripts or flows into callable webhooks or UI actions.

Best practices

• Use the interactive wmill app new command to scaffold apps and pick a frontend framework.
• Keep backend runnables focused: one runnable per file with descriptive IDs (e.g., get_user.ts).
• Always add new tables to raw_app.yaml data.tables before querying them from runnables or the frontend.
• Use parameterized queries to avoid SQL injection; prefer the provided query interpolation or $1-style parameters in Python.
• Run wmill app generate-locks after adding or changing backend runnables to create/update lock files.

Example use cases

• Build a React admin dashboard that calls backend runnables for CRUD operations on whitelisted Postgres tables.
• Author a Svelte frontend that triggers Python runnables for data processing and returns results to the UI.
• Create a Vue-powered form that calls TypeScript runnables which perform DB queries using the configured datatable.
• Develop local SQL migrations in sql_to_apply/ during development and confirm execution via the dev server modal.
• Expose existing Windmill scripts or flows by adding YAML references so the frontend calls them like inline runnables.