create-lamdera-app

A modern CLI tool to scaffold Lamdera applications with a complete feature set including Tailwind CSS, authentication, internationalization (i18n), dark mode, and testing.

Features

Every generated app includes:

• 🚀 Quick Setup - Get a fully-featured Lamdera app in seconds
• 🎨 Tailwind CSS - Beautiful, responsive designs out of the box
• 🔐 Authentication - Google One Tap, GitHub OAuth, and Email authentication
• 🌍 i18n Support - Built-in internationalization (EN/FR) with easy extension
• 🌓 Dark Mode - System-aware dark/light theme switching
• 🧪 Testing Ready - lamdera-program-test integration for reliable tests
• 📝 Editor Support - Cursor editor integration with custom rules
• 🔧 Dev Tools - Hot reload, debugger toggle, and pre-commit hooks
• ⚡ Bun Support - Use Bun for 10x faster package installs

Installation

npm install -g @CharlonTank/create-lamdera-app

Usage

Create a new project

create-lamdera-app

Follow the interactive prompts to set your project name and GitHub preferences.

Non-interactive mode

create-lamdera-app --name my-app --github yes

Add to existing project

cd existing-lamdera-project
create-lamdera-app --init

Options

• --name <project-name> - Project name (required in non-interactive mode)
• --github <yes|no> - Create GitHub repository
• --no-github - Don't create GitHub repository
• --public/--private - Repository visibility (default: private)
• --init - Add features to existing project
• --package-manager <npm|bun> - Choose package manager (default: npm)
• --pm <npm|bun> - Shorthand for --package-manager
• --bun - Use Bun package manager (same as --pm bun)
• --simple - Use simple boilerplate without counter/chat demo features
• --skip-install - Skip package installation

Boilerplate Options

Full Boilerplate (default)

Includes all features plus demo implementations:

• ✅ Counter example (increment/decrement with backend sync)
• ✅ Chat system (real-time messaging)
• ✅ Home and Chat pages
• ✅ Full admin panel (manage users, messages, reset counters)

Simple Boilerplate (--simple)

All core features without demo code:

• ✅ All infrastructure (Auth, Routing, i18n, Theme, Testing)
• ❌ No counter demo
• ❌ No chat demo
• ❌ Minimal admin panel (user management only)
• Perfect starting point for your own app

Example:

create-lamdera-app --name my-app --simple

Project Structure

my-app/
├── src/
│   ├── Backend.elm
│   ├── Frontend.elm
│   ├── Types.elm
│   ├── Env.elm
│   ├── I18n.elm          # Internationalization
│   ├── Theme.elm         # Dark mode support
│   ├── LocalStorage.elm  # Persistent storage
│   ├── Auth.elm          # Authentication logic
│   ├── Login.elm         # Login page
│   ├── Register.elm      # Registration page
│   ├── Admin.elm         # Admin dashboard
│   ├── Password.elm      # Password utilities
│   ├── Email.elm         # Email utilities
│   ├── GoogleOneTap.elm  # Google auth setup
│   ├── DomId.elm         # DOM element IDs
│   └── styles.css        # Tailwind input file
├── tests/
│   └── Tests.elm         # Example tests
├── scripts/
│   └── lamdera-env-setup.js  # Quick env setup helper
├── public/
│   └── sample.svg
├── elm.json
├── package.json          # With Tailwind scripts
├── tailwind.config.js
├── .githooks/
│   └── pre-commit       # Auto-format on commit
├── lamdera-dev-watch.sh  # Development server
├── toggle-debugger.py    # Debug helper
├── head.html
├── .cursorrules         # Cursor editor rules
└── openEditor.sh        # Quick editor opener

Development

Start the development server

cd my-app
npm start
# or
bun run start

This runs both Lamdera and Tailwind CSS watchers concurrently.

Use a different port

PORT=3000 npm start

Run with hot reload

npm run start:hot

Run tests

elm-test-rs --compiler $(which lamdera)

Authentication Setup

The generated app includes authentication scaffolding for:

• Google One Tap sign-in
• GitHub OAuth
• Email authentication

To enable authentication:

1. Set up OAuth apps with Google/GitHub
2. Add your credentials to Env.elm
3. Configure environment variables in the Lamdera dashboard

Quick Environment Setup

Instead of manually entering each environment variable in the Lamdera dashboard, use the helper script:

1. Open scripts/lamdera-env-setup.js in your project
2. Update the VALUES object with your actual credentials
3. Go to https://dashboard.lamdera.app/app/{your-app-name}/config
4. Open browser console (F12 → Console tab)
5. Copy and paste the entire script
6. Review the auto-filled values and click "Save changes"

The script automatically sets correct visibility for each variable:

• Backend-only (secrets): googleAppClientSecret, githubAppClientSecret, adminPassword, resendApiKey
• Public (frontend-accessible): googleAppClientId, environment, githubAppClientId, resendFromEmail

i18n and Theming

• Language switcher (EN/FR) in the header
• Dark/Light/System theme selector
• Preferences persist in localStorage
• Auto-detects browser language and system theme

Testing

Example tests are included using lamdera-program-test. The tests demonstrate:

• User interactions (clicks, form inputs)
• Frontend message handling
• Backend communication
• Effect command testing

Package Manager Support

Using Bun (recommended for speed)

create-lamdera-app --name my-app --bun

Bun provides 10-100x faster package installation compared to npm.

Install Bun

curl -fsSL https://bun.sh/install | bash

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT