🏝️ Astro Islands Test Page
📋 Developer Note: "No Islands Detected" Message
Why Astro dev tools shows "No islands detected":
✅ Our Implementation (Vanilla JS):
- Uses
<script>tags with TypeScript - Runs as client-side scripts, not framework islands
- Works identically to framework islands for functionality
- More lightweight - no React/Vue bundle overhead
- Perfect for Azure Static Web Apps compatibility
🏝️ True Astro Islands (what dev tools detect):
- UI Framework components (React, Vue, Svelte)
- Must use
client:*directives - Example:
<MyReactComponent client:load /> - Adds framework bundle size
💡 The "No islands detected" message is just informational - our JavaScript islands work perfectly!
✅ Static Content (Build Time)
Message: This is static data rendered at build time
Build Time: 2026-01-26T14:53:53.655Z
Environment: production
🚀 Astro 5.13+ Environment Variables Demo
🌐 Public Variables (Client-Side)
Site Name:
Environment:
Debug Mode:
Analytics:
⚡ Astro Default Variables
Mode:
productionProduction:
trueDevelopment:
Base URL:
/🔒 Private Variables (Server-Side Only)
Build Version:
Not available in clientDebug Logs:
Not available in client🎯 New staticImportMetaEnv Features:
- • No Automatic Coercion: "true" stays as string, not converted to boolean
- • No process.env Replacement: Private vars stay as import.meta.env
- • Vite-Aligned Behavior: Consistent with Vite's environment handling
- • Static Inlining: Values are inlined at build time for better performance
- • Manual Conversion: Use === "true" for boolean checks
Available Test Courses (Static)
sc-300 az-104 55286 test-after-rebuild
🌟 Island #1: Simple Client Hydration
Status: Server-rendered (static)
Current Time: --:--:--
🔑 Island #2: SAS Token API Test
API Status: ❌ Not Connected
API results will appear here when island hydrates...
📄 Island #3: Blob Content Fetcher
Blob content will appear here when fetched...
📊 Island Status Panel
❓
Simple Island
❓
SAS Token API
❓
Blob Fetcher