miracles_in_motion/docs/deployment/ALL_NEXT_STEPS.md

🚀 All Next Steps - Complete Deployment Guide

Date: November 12, 2025
Objective: Ensure ALL endpoints are fully deployed and operational

---

📊 Current Deployment Status

✅ COMPLETE

• Infrastructure: All 9 Azure resources deployed and verified
• Configuration: Key Vault, Azure AD, environment variables configured
• Monitoring: Application Insights and alerts active
• Builds: Frontend and API built successfully
• Function App: Created and responding

⚠️ NEEDS DEPLOYMENT

• Static Web App: Shows Azure default page (needs React app deployment)
• Function App Functions: Need to be registered and deployed
• Endpoints: Not fully operational yet

---

🎯 CRITICAL: Complete Application Deployment

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

Current Issue: Static Web App shows Azure default page instead of your React application.

✅ RECOMMENDED: Use GitHub Actions (Automatic)

You have a production deployment workflow configured. This is the most reliable method:

# 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 GitHub Actions will do:

• ✅ Build frontend application
• ✅ Build API
• ✅ Deploy to Static Web App
• ✅ Deploy Function App functions
• ✅ Run smoke tests
• ✅ Verify deployment

Timeline: 5-10 minutes for complete deployment

Alternative: Azure Portal Deployment

1. Go to: https://portal.azure.com
2. Navigate to: Static Web App → mim-prod-igiay4-web
3. Go to: Deployment Center
4. Choose one:
   • Upload: Upload swa-deploy.zip (already created: 705KB)
   • Connect to GitHub: Connect repository for automatic deployments
   • Local Git: Use local Git deployment

Alternative: SWA CLI (If Needed)

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

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

Verify Deployment:

# 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 Status: Function App is running but functions need to be registered.

✅ RECOMMENDED: Use GitHub Actions (Automatic)

The GitHub Actions workflow will automatically deploy functions when you push.

Alternative: Manual Deployment

# 1. Ensure API is built
cd api
npm run build
cd ..

# 2. Create deployment package (already created: api-func-deploy-proper.zip)
# Package includes: dist/, host.json, package.json

# 3. Deploy to Function App
az functionapp deployment source config-zip \
  --resource-group rg-miraclesinmotion-prod \
  --name mim-prod-igiay4-func \
  --src api-func-deploy-proper.zip

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

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

Functions Available:

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

Verify Functions:

# Test endpoints
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"}'

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

---

✅ Verification Steps

Step 3: Verify All Endpoints Are Operational

Comprehensive Testing:

# 1. Static Web App - should show your app
echo "=== Testing Static Web App ==="
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" https://lemon-water-015cb3010.3.azurestaticapps.net)
echo "HTTP Status: $HTTP_CODE"
curl -s https://lemon-water-015cb3010.3.azurestaticapps.net | head -20

# 2. Function App - should respond
echo "=== Testing Function App ==="
HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" https://mim-prod-igiay4-func.azurewebsites.net)
echo "HTTP Status: $HTTP_CODE"
curl -s https://mim-prod-igiay4-func.azurewebsites.net | head -5

# 3. API Endpoints - should return JSON
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 returns your React application HTML (not Azure default page)
• ✅ Function App responds (200 OK or function responses)
• ✅ API endpoints return JSON or proper responses
• ✅ No "service unavailable" errors
• ✅ No 404 errors for expected endpoints

---

🔧 Configuration Verification

Step 4: Verify All Settings

Check Environment Variables:

# Static Web App
az staticwebapp appsettings list \
  --name mim-prod-igiay4-web \
  --resource-group rg-miraclesinmotion-prod \
  --query "properties"

# Function App
az functionapp config appsettings list \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod \
  --query "[?name=='KEY_VAULT_URL' || name=='APPINSIGHTS_INSTRUMENTATIONKEY' || name=='STRIPE_SECRET_KEY' || name=='COSMOS_DATABASE_NAME']"

All settings should be configured:

• ✅ AZURE_CLIENT_ID
• ✅ AZURE_TENANT_ID
• ✅ VITE_STRIPE_PUBLISHABLE_KEY (Key Vault reference)
• ✅ KEY_VAULT_URL
• ✅ APPINSIGHTS_INSTRUMENTATIONKEY
• ✅ STRIPE_SECRET_KEY (Key Vault reference)

---

☁️ Cloudflare Setup (Optional but Recommended)

Step 5: Complete Cloudflare Configuration

Prerequisites: Add to .env.production:

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

Run Automation:

bash scripts/setup-cloudflare-auto.sh

What it configures:

• ✅ DNS records (www and apex domain)
• ✅ SSL/TLS (Full mode, Always HTTPS)
• ✅ Security settings (Medium level, Browser check)
• ✅ Performance (Minification, Brotli compression)
• ✅ Custom domain in Azure

---

🌐 Custom Domain (Optional)

Step 6: Configure Custom Domain

After Cloudflare or DNS is ready:

# Add custom domain to Azure
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"

Timeline:

• DNS propagation: 5-30 minutes
• SSL certificate: 1-24 hours

---

📋 Complete Deployment Checklist

Critical (Do First) ⚠️

• Deploy Frontend - Static Web App needs your React application
• Deploy Functions - Function App needs function code
• Verify Endpoints - Ensure all respond correctly
• Test Functionality - Verify API endpoints work

Important (Do Next)

• Complete Cloudflare - Performance and security
• Configure Custom Domain - Professional URL
• Final Testing - Comprehensive verification

Optional (Can Do Later)

• Performance Optimization - Fine-tune response times
• Additional Monitoring - More detailed alerts

---

🚀 Quick Deployment Commands

Complete Deployment (All-in-One)

#!/bin/bash
# Complete Deployment Script

echo "🚀 Starting Complete Deployment"

# 1. Build everything
echo "📦 Building applications..."
npm run build
cd api && npm run build && cd ..

# 2. Deploy Function App
echo "⚡ Deploying Function App..."
cd api
mkdir -p deploy-package
cp -r dist/* deploy-package/
cp host.json deploy-package/
cp package.json deploy-package/
cd deploy-package
zip -r ../../api-func-deploy-proper.zip .
cd ../..
az functionapp deployment source config-zip \
  --resource-group rg-miraclesinmotion-prod \
  --name mim-prod-igiay4-func \
  --src api-func-deploy-proper.zip
az functionapp restart \
  --name mim-prod-igiay4-func \
  --resource-group rg-miraclesinmotion-prod

# 3. Deploy Static Web App
echo "🌐 Deploying Static Web App..."
# RECOMMENDED: Push to GitHub
echo "Push to GitHub to trigger automatic deployment:"
echo "  git add ."
echo "  git commit -m 'Deploy to production'"
echo "  git push origin main"

# OR use Azure Portal → Deployment Center

# 4. Verify
echo "✅ Waiting for deployment..."
sleep 20
echo "Testing endpoints..."
curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
curl -I https://mim-prod-igiay4-func.azurewebsites.net

echo "🎉 Deployment initiated!"

---

📊 Expected Results

Before Deployment

• Static Web App: Azure default page
• Function App: Default page or "service unavailable"
• API Endpoints: 404 or unavailable

After Deployment

• Static Web App: Your React application with Miracles in Motion
• Function App: Function responses or API endpoints
• API Endpoints: JSON responses from your functions

---

🎯 RECOMMENDED ACTION

BEST APPROACH: Use GitHub Actions

1. Commit and push:

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

2. Monitor deployment:

   • Go to: https://github.com/Miracles-In-Motion/public-web/actions
   • Watch the "Production Deployment" workflow
   • It will automatically:
     • Build frontend and API
     • Deploy to Static Web App
     • Deploy Function App functions
     • Run smoke tests

3. Verify after deployment (wait 5-10 minutes):

   # Test Static Web App
   curl -I https://lemon-water-015cb3010.3.azurestaticapps.net
   curl https://lemon-water-015cb3010.3.azurestaticapps.net | grep -i "miracles"
   
   # Test Function App
   curl -I https://mim-prod-igiay4-func.azurewebsites.net
   curl https://mim-prod-igiay4-func.azurewebsites.net/api/donations
   

---

✅ Success Criteria

All endpoints are fully deployed and operational when:

• Infrastructure deployed ✅
• Static Web App shows your application ⚠️
• Function App functions are registered ⚠️
• All API endpoints respond correctly ⚠️
• Configuration verified ✅
• Monitoring active ✅

---

📚 Documentation Reference

• Complete Next Steps: COMPLETE_NEXT_STEPS.md
• Deployment Next Steps: DEPLOYMENT_NEXT_STEPS.md
• Final Steps: FINAL_DEPLOYMENT_STEPS.md
• Deployment Status: DEPLOYMENT_STATUS.md
• GitHub Workflow: .github/workflows/production-deployment.yml

---

🆘 Troubleshooting

Static Web App Still Shows Default Page

• Solution 1: Use Azure Portal → Deployment Center → Upload zip
• Solution 2: Connect GitHub repository for automatic deployments
• Solution 3: Check deployment history in Azure Portal

Function App Functions Not Working

• Solution 1: Verify functions are in the deployment package
• Solution 2: Check Function App logs in Azure Portal
• Solution 3: Restart Function App: az functionapp restart
• Solution 4: Verify app settings are correct

Endpoints Not Responding

• Solution 1: Check Function App state: az functionapp show
• Solution 2: Review logs: Azure Portal → Function App → Logs
• Solution 3: Verify CORS settings if needed
• Solution 4: Check Application Insights for errors

---

🎉 Summary

Current Status:

• ✅ Infrastructure: Complete and verified
• ✅ Configuration: Complete
• ⚠️ Applications: Need deployment

Next Action: 🚀 RECOMMENDED: Push to GitHub to trigger automatic deployment

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

This will automatically deploy both the frontend and Function App functions, ensuring all endpoints are fully operational!

---

📄 For detailed step-by-step instructions, see: COMPLETE_NEXT_STEPS.md