A modern, production-ready template for building web applications with Leptos (Rust) and Vite, featuring automated GitHub Pages deployment and release management.
- Leptos 0.8 - Reactive web framework for Rust with nightly features
- Vite - Fast build tool with rolldown integration
- WebAssembly - High-performance WASM with size optimization
- TypeScript - Type-safe JavaScript development
- MDUI - Material Design UI components
- Hot Reload - Instant reload for both Rust and frontend changes
- Smart Build Scripts - Environment-aware build system
- Advanced Caching - Optimized dependency and build caching
- Auto WASM Import - Seamless WASM module integration
- Development Tools - Integrated linting, formatting, and debugging
- Automated Releases - Tag-based release creation with checksums
- GitHub Pages - Automated deployment with optimized builds
- Multi-Environment - Development, production, and GitHub Pages configs
- Security - SHA256/SHA1 checksums for release integrity
- Documentation - Auto-generated changelogs and installation guides
Ensure you have the following tools installed:
# Install Rust with nightly toolchain
rustup toolchain install nightly
rustup default nightly
rustup target add wasm32-unknown-unknown
# Install essential WASM tools
cargo install wasm-pack wasm-bindgen-cli cargo-watch
# Install Node.js package manager
npm install -g pnpm
# Optional: Install additional development tools
cargo install leptosfmt # Leptos code formatter-
Clone and setup:
git clone https://github.com/starlight02/leptos-vite-template.git cd leptos-vite-template pnpm install -
Start development:
pnpm dev
-
Open browser: Navigate to
http://localhost:5173
pnpm dev- Start development server with hot reloadpnpm wasm:watch- Watch and rebuild WASM onlypnpm wasm:build:dev- Build WASM for development
pnpm build- Build for production deploymentpnpm build:dev- Build for development testingpnpm build:github- Build optimized for GitHub Pagespnpm preview- Preview production build locally
pnpm wasm:build- Build WASM for productionpnpm wasm:build:github- Build WASM for GitHub Pages
pnpm clean- Clean build artifacts (pkg, dist, target/wasm32-unknown-unknown)
leptos-vite-template/
├── src/ # Rust source code
│ ├── lib.rs # Main Leptos application
│ ├── components/ # Reusable Leptos components
│ ├── pages/ # Page components and routing
│ ├── assets/ # Static assets
│ ├── bindings/ # WASM bindings
│ ├── plugins/ # Custom plugins
│ └── env.rs # Environment configuration
├── scripts/ # Build and utility scripts
│ ├── build-all.js # Complete build orchestration
│ ├── build-wasm.js # WASM-specific build logic
│ └── env-loader.js # Environment configuration loader
├── plugins/ # Custom Vite plugins
│ └── vite-plugin-wasm-import.ts
├── .github/workflows/ # CI/CD automation
│ ├── deploy.yml # GitHub Pages deployment
│ └── release.yml # Automated release creation
├── public/ # Static public assets
│ └── icons/ # Application icons
├── pkg/ # Generated WASM files
├── dist/ # Production build output
├── main.ts # TypeScript entry point
├── index.html # HTML template
├── vite.config.ts # Vite configuration
├── Cargo.toml # Rust project configuration
└── package.json # Node.js dependencies
- Environment Detection: Automatically configures builds for development, production, or GitHub Pages
- WASM Optimization: Uses
wasm-optwith size optimization (-Oz) for production - Caching Strategy: Intelligent caching for Rust dependencies, WASM tools, and Node modules
- Hot Reload: Monitors Rust source changes and rebuilds WASM automatically
- Virtual Modules: Custom Vite plugin creates
virtual:wasm-initfor seamless imports - Automatic Detection: Discovers WASM modules in
pkg/directory - HMR Support: Hot module replacement for WASM changes
- Error Handling: Graceful fallbacks and error reporting
- Development: Fast builds with debugging symbols
- Production: Optimized builds with LTO and size optimization
- GitHub Pages: Special builds with correct base paths and routing
Trigger Methods:
- Push any tag starting with
v(e.g.,v1.0.0) - Manual trigger from GitHub Actions tab
Process:
- 🔧 Environment Setup - Installs Rust nightly, Node.js, pnpm, WASM tools
- 📦 Smart Caching - Caches dependencies for faster subsequent builds
- 🦀 WASM Build - Compiles Rust to optimized WebAssembly
- ⚡ Frontend Build - Builds and optimizes frontend assets
- ✅ Verification - Validates build artifacts and structure
- 🚀 Deployment - Publishes to GitHub Pages
Requirements:
- Enable GitHub Pages in repository settings
- Set source to "GitHub Actions"
- Ensure repository has proper permissions
Creating Releases:
# Create and push a signed tag
git tag -s v1.0.0 -m "Release v1.0.0 - Description"
git push origin v1.0.0What You Get:
- 📦 Optimized ZIP Package - Production build with standard naming
- 🔐 Security Checksums - SHA256 and SHA1 files for integrity verification
- 📝 Detailed Changelog - Auto-generated with commit categorization
- 📖 Installation Guide - Complete setup and verification instructions
- 🔗 GitHub Integration - Proper release pages with download links
Verification:
# Verify downloaded files
sha256sum -c leptos-vite-template-v1.0.0-wasm32-unknown-unknown.zip.sha256
sha1sum -c leptos-vite-template-v1.0.0-wasm32-unknown-unknown.zip.sha1- Use
cargo watchfor fast incremental WASM builds - Leverage Vite's HMR for instant frontend updates
- Enable Rust analyzer for better IDE support
- Check browser console for WASM initialization errors
- Use development builds for better error messages
- Monitor GitHub Actions logs for deployment issues
- Modify
vite.config.tsfor build customization - Update
.env.*files for environment-specific settings - Extend
scripts/for custom build logic
- Fork the repository
- Create a feature branch
- Make your changes
- Test with
pnpm buildandpnpm dev - Submit a pull request
MIT License - see LICENSE file for details.
Live Demo: https://starlight02.github.io/leptos-vite-template/