Urban Broccoli Logo Urban Broccoli A rebrandable SaaS marketing and dashboard framework for agencies.

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.

Architecture

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 build completes without errors
  • No console errors in production preview (npm run preview)

Recommended

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

Build Command: npm run build
Output Dir: dist

Vercel auto-detects Astro. Node 18+ required.

Note: Uses static output by default. No server adapter 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.

Global Edge Caching
Zero Server Runtime
Auto-Asset Minification
Instant Pre-built HTML

Cloudflare Pages

Maximum global performance and edge deployment.

Build Command: npm run build
Output Directory: dist

Fully static. No Workers configuration required.

Netlify

Simple and reliable for production static sites.

Build Command: npm run build
Publish Directory: dist

No server functions or adapters required.


Advanced

Manual Static Hosting

For S3, GitHub Pages, or traditional VPS environments.

Step 1: Build Locally

npm run build

Step 2: Upload Contents

Upload the contents of /dist to your provider.

AWS S3 GCS Azure Nginx

Step 3: Point DNS

Add the required DNS records (A, CNAME, or nameserver updates) to your registrar. SSL is typically handled by the provider.

Professional Tip: Always verify your index.html is in the root of your hosting bucket/folder.

Environment Variables

Only required for optional integration patterns.

PUBLIC_SUPABASE_URL=your_url
PUBLIC_STRIPE_PUBLIC_KEY=your_key

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+


Infrastructure Discipline

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.

Infrastructure Status: All Systems Operational