Infrastructure Strategy
Deployment Guide
Urban Broccoli is built static-first. Deployment is simple because the architecture is predictable. Follow this guide to get your production frontend live on the platform of your choice.
Deployment Model
Designed for performance, security, and hosting flexibility.
Build Output
All pages are pre-rendered into standard HTML, CSS, and JS during the build process.
Runtime
No server-side runtime (Node.js/PHP) is required to serve the frontend. It runs everywhere.
Portability
Compatible with any static host, CDN, or object storage provider (S3, Cloudflare, Vercel).
Backend Integration
Connects to any backend via client-side APIs. UI and logic are cleanly separated.
Quick Architecture Reminder
Urban Broccoli builds to a static /dist directory.
Any platform capable of hosting static assets will work, ensuring your frontend is portable and backend-independent.
✅ Pre-Deployment Checklist
- ✓ Brand configuration completed (colors, logos, typography)
- ✓ Metadata updated (page titles, descriptions, OG tags)
- ✓ Content reviewed and validated
- ✓
npm run buildcompletes without errors - ✓ No console errors in production preview (
npm run preview)
Deploy to Vercel
Vercel is optimized for Astro and provides the best zero-config experience.
1. Connect Repository
- Push your project to GitHub
- Go to vercel.com
- Click "Add New Project"
- Select your repository
2. Build Settings
Vercel auto-detects Astro. Node 18+ required.
3. Set Domain
- Go to Project Settings
- Add your custom domain
- Follow DNS steps
- Your site is live
Performance at the Edge
Because Urban Broccoli outputs static assets, Vercel provides sub-millisecond delivery via its global CDN network.
Cloudflare Pages
Maximum global performance and edge deployment.
Output Directory: dist
Fully static. No Workers configuration required.
Netlify
Simple and reliable for production static sites.
Publish Directory: dist
No server functions or adapters required.
Manual Static Hosting
For S3, GitHub Pages, or traditional VPS environments.
Step 1: Build Locally
Step 2: Upload Contents
Upload the contents of /dist to your provider.
Step 3: Point DNS
Add the required DNS records (A, CNAME, or nameserver updates) to your registrar. SSL is typically handled by the provider.
index.html is in the root of your hosting bucket/folder.
Environment Variables
Only required for optional integration patterns.
In Astro, only PUBLIC_ variables are exposed to the browser.
Performance Verification
Urban Broccoli’s base build scores 95+ in Lighthouse. Integrations (Stripe, etc.) may affect final scores.
Base Target
95+
Production
90+
Post-Deployment Verification
Verify your live environment before declaring victory.
Routes & Navigation
Confirm all major routes load without 404s.
Runtime Integrity
Check console for blocked assets or scripts.
Metadata Check
View source to ensure OG tags are active.
Mobile Reality
Test on physical devices for touch UX.
SSL/Security
Verify HTTPS lock and cert validity.
Lighthouse Audit
Run final production audit at PageSpeed.
Frontend Live. Infrastructure Stable.
Urban Broccoli is built to evolve as your product grows. Monitor analytics, collect feedback, and iterate safely.
Troubleshooting
Build Failures
Verify Node 18+, clear node_modules, and check build-time env vars.
Unexpected 404s
Confirm /dist is targeted and trailingslash config matches provider.
Technical Support
Infrastructure-level support is available for all license holders. Please include build logs, platform, and Node version.