Serverpod In-Built Web Server Tutorial: Build a Full-Stack Analytics Dashboard
Most Flutter developers use Serverpod purely as an API server and never touch the built-in web server sitting right next to it. This course changes that. Across 9 structured lessons, you build app_analytics: a fully functional mobile app analytics dashboard served directly from your Serverpod backend, using three different serving strategies in one Dart project. You start with the two-server architecture and the Relic framework, work through routing, middleware, database schema design, and business logic endpoints, then build a live Flutter web dashboard compiled to WebAssembly and served with FlutterRoute. You then go deeper; HTTP caching with ETags and cache busting, server-side HTML rendering with Mustache templates, and serving a plain JavaScript SPA with SpaRoute and FallbackMiddleware. Every architectural decision is explained before it is written, and every concept is grounded in real, runnable code. By the time you reach the final lesson, you will have one Dart process serving a Flutter web app, a server-rendered HTML page, a REST API, and a plain SPA all from the same database, the same middleware stack, and one pod.start() call.
What You'll Build
A fully functional mobile app analytics dashboard (app_analytics) served directly from a Serverpod backend; combining a Flutter web app, a server-rendered HTML status page, a REST API with middleware, and a plain JavaScript SPA, all running from one Dart process and one PostgreSQL database.
Prerequisites
- Basic Serverpod knowledge (project setup, endpoints, generated client)
- Familiarity with Dart (async/await, classes, null safety)
- Basic Flutter widget knowledge (StatelessWidget, Column, ListView)
- No prior web server or HTTP experience required
What You'll Learn
- Understand Serverpod's two-server architecture and the Relic framework
- Build a routing layer with path parameters, query parameters, and route modules
- Implement middleware for logging, authentication, and request context
- Design a database schema with YAML models, migrations, and seed data
- Build reusable business logic endpoints callable by both web routes and Flutter
- Serve a Flutter web app compiled to WebAssembly using FlutterRoute
- Implement HTTP caching with ETags, Cache-Control, and CacheBustingConfig
- Render server-side HTML pages using WidgetRoute and Mustache templates
- Serve any plain SPA (React, Vue, Vanilla JS) using SpaRoute
Who This Is For
Flutter developers who already use Serverpod as an API server and want to unlock its built-in web serving capabilities to deliver web experiences without adding a separate backend infrastructure.
Lessons
Lesson 1
What is Serverpod's Web Server and Why Should You Care?
Serverpod ships with a second built-in server on port 8082, powered by the Relic framework, that lets you serve web content, static files, and SPAs directly from your Dart backend without a separate infrastructure.
Lesson 2
Project Setup & Folder Structure
We scaffold the app_analytics project, walk through the web/ directory that powers the web server, and write the first live HTTP route that responds from port 8082.
Lesson 3
Routing Deep Dive
We cover the full routing system: path parameters, query parameters, HTTP method filtering, wildcards, fallback routes, and grouping related endpoints into clean route modules.
Lesson 4
Middleware
We build a request logging middleware and an API key validation middleware, understand the execution order, and learn how to pass data between middleware and routes using ContextProperty.
Lesson 5
Designing the Database Schema
We design the App and AppMetric YAML models, run Serverpod's code generation, apply the database migration, and seed 90 rows of realistic analytics data that every subsequent lesson builds on.
Lesson 6
Business Logic & Endpoints
We build the AnalyticsEndpoint with three methods (getAppSummaries, getMetricsForApp, and getDashboardTotals) and wire the web routes to call them directly through the session.
Lesson 7
Building the Flutter Web Dashboard UI
We build the full analytics dashboard in Flutter (stats cards, a live DAU trend chart using fl_chart, and an interactive apps table) then compile it with flutter build web --wasm and serve it with FlutterRoute.
Lesson 8
Server-Side HTML with Mustache Templates
We build a fully server-rendered analytics status page using WidgetRoute, TemplateWidget, and Mustache HTML templates, delivering real database data as complete HTML with no JavaScript bundle required.
Lesson 9
Serving a Plain SPA
We serve a vanilla JavaScript analytics panel using SpaRoute, understand FallbackMiddleware under the hood, and assemble the final server.dart running all three serving strategies simultaneously from one Dart process.
Related Courses
