Svelte 5 Static Template with shadcn-svelte

A modern, production-ready template for building static websites with Svelte 5, SvelteKit, and shadcn-svelte components, containerized with nginx.

Features

• ⚡ Svelte 5 - Latest version with new features
• 🏗️ SvelteKit - Full-stack framework with static adapter
• 🎨 shadcn-svelte - Beautiful, accessible UI components
• 🎭 Tailwind CSS 4 - Latest version for styling
• 📝 TypeScript - Type safety out of the box
• 🧪 Testing Suite - Vitest for unit tests, Playwright for E2E
• 📏 Code Quality - ESLint + Prettier configured
• 🔒 Security - Semgrep static analysis + Bun audit
• 🤖 Dependencies - Renovate for automated updates
• 🐳 Docker Ready - Production nginx container
• 🚀 Static Generation - Optimized for deployment anywhere

Quick Start

Development

# Install dependencies
bun install

# Install Playwright browsers (for E2E tests)
just install-browsers
# OR: bunx playwright install

# Install system dependencies for Playwright (Linux/WSL)
just install-deps
# OR: sudo bunx playwright install-deps

# Start development server
bun run dev

Production Build

# Build static site
bun run build

# Preview production build
bun run preview

Docker Deployment

# Build and run with Docker Compose
docker-compose up --build

# Or build Docker image manually
docker build -t svelte-static-app .
docker run -p 3000:80 svelte-static-app

Project Structure

├── src/
│   ├── lib/
│   │   ├── components/ui/    # shadcn-svelte components
│   │   └── utils.ts          # Utility functions
│   ├── routes/               # SvelteKit routes
│   └── app.html             # HTML template
├── static/                   # Static assets
├── tests/                    # Test files
├── Dockerfile               # Multi-stage Docker build
├── nginx.conf              # Nginx configuration
└── docker-compose.yml      # Container orchestration

Scripts

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build
• bun run test - Run all tests
• bun run test:unit - Run unit tests
• bun run test:e2e - Run E2E tests
• bun run lint - Lint code
• bun run format - Format code

Adding UI Components

Use the shadcn-svelte CLI to add components:

# Add a component
bunx shadcn-svelte@latest add [component-name]

# Example: Add a dialog component
bunx shadcn-svelte@latest add dialog

Configuration

Static Adapter

The static adapter is configured in svelte.config.js. Modify settings as needed:

adapter: adapter({
	pages: 'build', // Output directory
	assets: 'build', // Assets directory
	fallback: undefined, // SPA fallback page
	precompress: false, // Enable gzip/brotli
	strict: true // Strict prerendering
});

Nginx

Production nginx configuration in nginx.conf includes:

• Gzip compression
• Static asset caching
• Security headers
• SPA routing support

CI/CD & Deployment

GitHub Actions / Gitea Actions

Single workflow (.github/workflows/ci.yml) that runs:

• Tests & Linting - Full CI pipeline with Just commands
• Security Scanning - Semgrep static analysis + Bun audit
• Docker Build - Pushes to your container registry

Required Secrets/Variables:

• DOCKER_REGISTRY - Your container registry URL
• DOCKER_REPOSITORY - Your repository path
• DOCKER_USERNAME / DOCKER_PASSWORD - Registry credentials
• SEMGREP_APP_TOKEN - Optional for advanced Semgrep features

Deployment Options

This template generates a static site that can be deployed to:

• Container Platforms - Docker with nginx (recommended)
• Static Hosts - Netlify, Vercel, any CDN
• Traditional Hosting - Any web server

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

MIT License - see LICENSE file for details