Tutorials

Hands-on tutorials to learn EreoJS by building real applications.

Available Tutorials

Build a Blog

A comprehensive 6-part tutorial that covers all the fundamentals by building a full-featured blog application.

What you'll learn:

• Setting up an EreoJS project
• File-based routing
• Data loading with loaders
• Form handling with actions
• Styling with Tailwind CSS
• Deploying to production

Prerequisites: Basic React knowledge

Time: ~2 hours

Build a Dashboard

Learn advanced patterns by building an authenticated dashboard with interactive islands.

What you'll learn:

• Authentication patterns
• Islands architecture
• Real-time updates
• Complex state management

Prerequisites: Completed Blog tutorial

Time: ~3 hours

Build a SaaS App

Build a full-featured project management app (TaskFlow) that covers the complete EreoJS stack — authentication, database with Drizzle ORM, forms with validation, islands, RPC, and deployment.

What you'll learn:

• Drizzle ORM with SQLite
• Multi-table relational schema
• Form validation and error handling
• Islands with shared state
• RPC procedures and real-time subscriptions
• Production deployment with tracing

Prerequisites: Completed Blog tutorial

Time: ~4 hours

Real-time Chat (RPC)

Build a real-time chat application using @ereo/rpc with WebSocket subscriptions, focusing on RPC procedures, real-time data flow, and reactive client components.

What you'll learn:

• RPC router and procedure definitions
• Query, mutation, and subscription patterns
• WebSocket-based real-time updates
• Reactive client components with signals
• Rate limiting and error handling

Prerequisites: Basic understanding of RPC

Time: ~2 hours

Tutorial Structure

Each tutorial is broken into manageable sections:

1. Setup - Project initialization and configuration
2. Core Features - Building the main functionality
3. Enhancements - Adding polish and advanced features
4. Deployment - Getting your app live

Getting the Most from Tutorials

1. Type along - Don't just copy-paste. Typing helps you learn.
2. Experiment - Try changing things to see what happens.
3. Read the errors - Error messages teach you about the framework.
4. Check the source - Reference code is available in /packages/examples/.

Quick Reference

Blog Tutorial Chapters

Chapter	Topic	Duration
1. Setup	Project initialization	15 min
2. Routes	Pages and navigation	20 min
3. Data Loading	Loaders and database	25 min
4. Forms	Actions and mutations	25 min
5. Styling	Tailwind CSS	20 min
6. Deployment	Going live	15 min

Dashboard Tutorial Chapters

Chapter	Topic	Duration
1. Setup	Project and database setup	20 min
2. Authentication	Login, registration, sessions	30 min
3. Islands	Interactive widgets	35 min
4. Analytics	Shared state between islands	30 min
5. Deployment	Production deployment	25 min

SaaS Tutorial Chapters

Chapter	Topic	Duration
1. Setup	Project scaffolding and schema	20 min
2. Authentication	Auth plugin, sessions, middleware	30 min
3. Database	Queries, CRUD, Drizzle ORM	35 min
4. Forms	Validation, error handling	30 min
5. Islands	Interactive components, shared state	35 min
6. RPC & Real-time	Procedures, subscriptions	30 min
7. Deployment	Production build, tracing, Docker	20 min

Real-time Chat Tutorial Chapters

Chapter	Topic	Duration
1. Setup	Project, store, RPC router	20 min
2. Procedures	Queries, mutations, events	25 min
3. Real-time	Subscriptions, WebSocket client	25 min
4. Client	Chat UI, room list, islands	25 min
5. Polish	Rate limiting, reconnection, typing	20 min

Example Code

All tutorial code is available in the repository:

• Blog: /packages/examples/blog
• Minimal: /packages/examples/minimal

Clone and run:

git clone https://github.com/ereoJS/ereoJS
cd ereo/packages/examples/blog
bun install
bun dev

Need Help?

• Check the API Reference for detailed documentation
• Visit GitHub Discussions for community support
• Report issues on GitHub Issues