SampleApp

A template generator for creating Vespa.ai applications using FastHTML, providing pre-configured layouts, styling, and components to accelerate application development.

Note: This project is under active development. Some styles and components may still need polishing.

Prerequisites

• Python 3.8 or higher
• uv - Modern Python package installer and resolver

  brew install uv

Project Setup

# Initialize project
mkdir my-app && cd my-app
uv init
uv add git+ssh://[email protected]/ldalves/sampleapp.git
source .venv/bin/activate

# Create application structure
sampleapp init

Project Structure

my-app/
├── app/              # Application code
│   ├── bin/          # Binary files (eg. tailwindcss)
│   ├── config/       # Application configuration
│   ├── routes/
│   │   ├── api/      # API endpoints for dynamic updates
│   │   └── views/    # Page view routes
│   ├── static/       # Static assets
│   └── main.py       # Application entry point
├── dataset/          # Datasets and sample data working directory
└── run.py            # Application runner

Commands

Initialize Project

sampleapp init [--force]

Add Features

# Add TailwindCSS
sampleapp add tailwindcss

Development

# Start development server
python run.py

# Watch for TailwindCSS changes 
sampleapp watch

Production

# Build application
sampleapp build

tree -d -I '__pycache__' build
build
├── app
│   ├── routes
│   │   ├── api
│   │   └── views
│   └── static
│       └── css
├── requirements.txt
├── run.py
└── sampleapp
    ├── assets
    │   ├── css
    │   ├── favicon
    │   ├── img
    │   └── js
    ├── components
    ├── core
    └── layouts

# Copy build folder and run production build
cd build

# Install dependencies
pip install -r requirements.txt

# Run application
python run.py

The build process:

• Minifies static assets
• Optimizes TailwindCSS
• Updates production configuration
• Generates requirements.txt
• Creates deployment-ready package in build/

Available Components and Layouts

SampleApp comes with pre-built components and layouts to help you quickly create Vespa.ai applications.

Layouts

from sampleapp.layouts import (
    app_layout,     # Main application wrapper
    aside,          # Sidebar layout
    aside_toggle,   # Sidebar toggle button
    body,           # Body section
    header,         # Header section
    layout,         # Base layout
    logo,           # Vespa logo component
    main,           # Main content area
    nav,            # Navigation components placeholder
    theme_toggle,   # Dark/light theme toggle
    toolbar         # Top toolbar - Between header and main
)

Components

from sampleapp.components import (
    autocomplete,   # Autocomplete input field
    badge,          # Status and label badges
    button,         # Styled buttons
    container,      # Content container - Without padding
    content,        # Content wrapper - With padding
    group,          # Grouped elements - Flex container
    icon,           # SVG icons - Font Awesome
    link,           # Styled links
    scroll_area,    # Scrollable containers
    stack,          # Vertical/horizontal stacks - Flex container
    text,           # Typography components
    text_input,     # Input fields
    tooltip         # Hover tooltips
)

These components and layouts are designed to work together seamlessly and follow Vespa.ai's design guidelines. Import and use them in your routes to maintain consistent styling across your application.

Example usage:

from sampleapp.components import container, text
from sampleapp.layouts import app_layout


def register_routes(rt):
    @rt("/")
    def get():
        return (
            app_layout(
                container(
                    text("We Make AI Work", size="3xl"),
                    size="md",
                    cls="gap-lg text-center transform translate-y-[21vh]",
                )
            ),
        )

License

MIT