A scaffolding tool for creating full-stack Gleam applications with Lustre, featuring client-server hydration.
- 🚀 Full-stack Gleam/Lustre application setup
- 🔄 Client-server hydration out of the box
- ✨ Optimistic UI updates using the
optimist
package - 📦 Separate client, server, and shared modules
- ⚡ Vite for fast client-side development
- 🧪 Test setup for all modules
npm create gleam-lustre-fullstack@latest
npx create-gleam-lustre-fullstack@latest
pnpm create gleam-lustre-fullstack@latest
yarn create gleam-lustre-fullstack
The scaffolded project includes:
-
Client: Lustre frontend application with Vite
- Hot module replacement
- TypeScript declarations
- CSS styling
- Optimistic UI updates for better UX
-
Server: Gleam backend server
- Static file serving
- API endpoints ready
-
Shared: Common code between client and server
- Shared types and logic
- Reusable utilities
your-project/
├── client/
│ ├── src/
│ │ ├── {name}_client.gleam
│ │ ├── main.js
│ │ └── main.css
│ ├── test/
│ ├── gleam.toml
│ ├── package.json
│ └── vite.config.js
├── server/
│ ├── src/
│ │ ├── {name}_server.gleam
│ │ └── manifest.gleam
│ ├── test/
│ ├── priv/
│ └── gleam.toml
└── shared/
├── src/
│ └── shared.gleam
├── test/
└── gleam.toml
After scaffolding your project:
cd your-project
# Start development servers
# Terminal 1 - Start the client dev server
cd client && npm install && npm run dev
# Terminal 2 - Start the server
cd server && gleam run
# Or build for production
cd client && npm install && npm run build
cd server && gleam run
- Gleam installed
- Node.js 16+ and npm
- Erlang/OTP 23+ (for Gleam)
- Inspired by create-gleam by Enderchief
- Based on a simplified version of the Lustre Full-Stack Applications Guide example
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
If you find any bugs or have feature requests, please file an issue on the GitHub repository.