miracles_in_motion/docs/deployment/DEPLOYMENT_COMPLETE_GUIDE.md

🎯 Complete Deployment Guide - All Next Steps

Date: November 12, 2025
Status: Infrastructure complete, applications ready for deployment

---

✅ Current Status

Infrastructure: COMPLETE ✅

• All 9 Azure resources deployed and verified
• Static Web App: Created (Standard SKU) - https://lemon-water-015cb3010.3.azurestaticapps.net
• Function App: Created and running - https://mim-prod-igiay4-func.azurewebsites.net
• Key Vault: Configured with 6 secrets
• Azure AD: App registration configured
• Application Insights: Connected
• Monitoring: Alerts configured

Applications: READY FOR DEPLOYMENT ⚠️

• Frontend: Built successfully (298KB gzipped)
• API: Built successfully (TypeScript compiled)
• Deployment Packages: Created and ready
  • swa-deploy.zip (705KB) - Frontend
  • api-func-deploy-proper.zip (9.2KB) - Functions

---

🚀 CRITICAL: Deploy Applications

Step 1: Deploy Frontend to Static Web App ⚠️ HIGH PRIORITY

Current: Static Web App shows Azure default page
Target: Your React application should be visible

✅ RECOMMENDED: GitHub Actions (Automatic)

You have a production deployment workflow (.github/workflows/production-deployment.yml) that will automatically deploy everything:

# 1. Commit all changes
git add .
git commit -m "Deploy to production - ensure all endpoints operational"

# 2. Push to trigger automatic deployment
git push origin main

# 3. Monitor deployment
# Go to: https://github.com/Miracles-In-Motion/public-web/actions
# Watch the "Production Deployment" workflow

What happens automatically:

• ✅ Builds frontend application
• ✅ Builds API
• ✅ Deploys to Static Web App
• ✅ Deploys Function App functions
• ✅ Runs smoke tests
• ✅ Verifies deployment

Timeline: 5-10 minutes for complete deployment

Alternative: Azure Portal

1. Go to: https://portal.azure.com
2. Navigate to: Static Web App → mim-prod-igiay4-web
3. Go to: Deployment Center
4. Choose: Upload → Upload swa-deploy.zip (705KB, already created)
5. Wait for deployment to complete

Alternative: SWA CLI

DEPLOY_TOKEN=$(az staticwebapp secrets list \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --query "properties.apiKey" -o tsv)

swa deploy ./dist \
  --env production \
  --deployment-token $DEPLOY_TOKEN \
  --no-use-keychain

Verify:

# Should show your React app, not Azure default page
curl https://lemon-water-015cb3010.3.azurestaticapps.net | grep -i "miracles\|react\|vite"

---

Step 2: Deploy Function App Functions ⚠️ HIGH PRIORITY

Current: Function App is running but functions need deployment
Target: Functions should respond at /api/donations

✅ RECOMMENDED: GitHub Actions (Automatic)

The workflow will automatically deploy functions when you push.

Alternative: Manual Deployment

# Deploy using the proper package (already created)
az functionapp deployment source config-zip \
  --resource-group rg-miraclesinmotion-prod \
  --name mim-prod-igiay4-func \
  --src api-func-deploy-proper.zip

# Restart Function App
az functionapp restart \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod

# Wait and test
sleep 15
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations

Functions Available:

• createDonation - POST /api/donations
• getDonations - GET /api/donations

Test Functions:

# GET donations
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations

# POST donation
curl -X POST https://mim-prod-igiay4-func.azurewebsites.net/api/donations \
  -H "Content-Type: application/json" \
  -d '{"amount":100,"donorName":"Test","donorEmail":"test@example.com"}'

---

✅ Verification Steps

Step 3: Verify All Endpoints

Comprehensive Testing:

# 1. Static Web App
echo "Testing Static Web App..."
curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
curl -s https://lemon-water-015cb3010.3.azurestaticapps.net | head -20

# 2. Function App
echo "Testing Function App..."
curl -I https://mim-prod-igiay4-func.azurewebsites.net
curl -s https://mim-prod-igiay4-func.azurewebsites.net

# 3. API Endpoints
echo "Testing API endpoints..."
curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
curl https://mim-prod-igiay4-func.azurewebsites.net/api/health

# 4. Run automated tests
bash scripts/test-deployment.sh

Success Criteria:

• ✅ Static Web App shows your React application
• ✅ Function App responds correctly
• ✅ API endpoints return JSON
• ✅ No errors or unavailable messages

---

☁️ Cloudflare Setup

Step 4: Complete Cloudflare Configuration

When Ready:

1. Add credentials to .env.production:

   CLOUDFLARE_API_TOKEN=your-token
   CLOUDFLARE_ZONE_ID=your-zone-id
   

2. Run automation:

   bash scripts/setup-cloudflare-auto.sh
   

What it configures:

• DNS records (www and apex)
• SSL/TLS (Full mode, Always HTTPS)
• Security settings
• Performance optimizations

---

🌐 Custom Domain

Step 5: Configure Custom Domain

After DNS is ready:

az staticwebapp hostname set \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --hostname "mim4u.org"

az staticwebapp hostname set \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --hostname "www.mim4u.org"

---

📋 Complete Checklist

Critical (Do First)

• Deploy Frontend - Push to GitHub or use Azure Portal
• Deploy Functions - Will deploy automatically with GitHub Actions
• Verify Endpoints - Test all URLs
• Test Functionality - Verify API works

Important (Do Next)

• Complete Cloudflare - Add credentials and run automation
• Configure Custom Domain - Set up DNS
• Final Testing - Comprehensive verification

Optional (Later)

• Performance Optimization
• Additional Monitoring

---

🎯 RECOMMENDED ACTION

BEST: Push to GitHub

git add .
git commit -m "Deploy to production - ensure all endpoints operational"
git push origin main

This triggers automatic deployment of both frontend and functions!

---

📊 Expected Results

Component	Current	After Deployment
Static Web App	Azure default page	Your React app
Function App	Default page	Function responses
API Endpoints	404/Unavailable	JSON responses

---

✅ Success Criteria

• Infrastructure deployed ✅
• Static Web App shows your application ⚠️
• Function App functions deployed ⚠️
• All endpoints operational ⚠️
• Configuration complete ✅
• Monitoring active ✅

---

🚀 RECOMMENDED: Push to GitHub to trigger automatic deployment!

📄 For detailed instructions, see: ALL_NEXT_STEPS.md