This website is an Astro application deployed to Cloudflare Workers. Astro combines mostly static HTML with selective server rendering, which fits a monitoring dashboard: fast public pages, authenticated dashboard routes, and API endpoints for auth, Stripe, and CSV export—all in one codebase.
Why Astro fits monitoring dashboards
Environmental dashboards mix mostly-read pages (home, about, history tables) with small interactive islands (contact form, preferences forms). Astro renders the stable shell on the server and hydrates only what needs JavaScript, keeping first loads quick on phones checking garage temps from the driveway.
Server output mode
The project uses output: 'server' with the Cloudflare adapter. Each request can run
server code to read Supabase session cookies, load user feed configuration, and fetch live JSON before
HTML leaves the edge. API routes live beside pages under src/pages/api—the same pattern
as Next.js route handlers but compiled for Workers.
Islands and deferred loading
The home page wraps temperature and weather widgets with deferred server rendering so visitors see
layout immediately while probes resolve. Contact form hydration uses Preact via client:load
because it needs Turnstile and client-side validation. Choosing island boundaries deliberately avoids
shipping a full SPA for pages that are mostly read-only.
Project structure highlights
src/pages— routes for marketing, dashboard, and REST-like API endpoints.src/lib— Supabase access, feed parsing, Stripe, schema markup, and history queries.src/components— reusable Astro UI for tables, settings forms, and about articles.src/layouts— shared chrome with JSON-LD schema and sitemap links.
Edge deployment
Cloudflare Workers run the server bundle close to users. Environment secrets (Supabase keys, Stripe, SMTP) are injected at deploy time. Image assets pass through Astro’s image pipeline for optimized delivery in about guides and the home page logo.
Compared to a pure SPA
A client-only React app would shift probe fetching to the browser, exposing feed URLs and delaying meaningful content until JavaScript executes. Astro keeps sensitive fetches on the server where cookies and service keys stay controlled. For a Node-centric comparison, read Next.js and Node applications.
Source code: github.com/doodersrage/garage-temp