svelte-5-static-shadcn-template/README.md

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
• 🐳 Docker Ready - Production nginx container
• 🚀 Static Generation - Optimized for deployment anywhere

Quick Start

Development

# Install dependencies
bun install

# 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

Deployment

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

• Static Hosts: Netlify, Vercel, GitHub Pages
• Docker: Any container platform (production nginx setup)
• CDN: Any CDN with the built files
• 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