Feature Request System - Integration Fixes & Deployment Guide

Date: 2026-01-12
Status: ✅ Issues Fixed - Ready for Testing

Problems Identified & Fixed

1. ✅ Cloud Functions 500 Error

Problem: createFeatureRequest Cloud Function was returning 500 Internal Server Error.

Root Cause:

Environment variables not properly configured for local development
Using defineString parameters without proper fallback handling
Hardcoded GitHub token exposed in code (security risk)
Octokit method call using .issues.create() instead of .rest.issues.create()

Fixes Applied:

✅ Rewrote environment configuration handler to properly load from .runtimeconfig.json first, then process.env
✅ Removed hardcoded token and implemented proper fallback chain
✅ Created .runtimeconfig.json with proper structure for local development
✅ Fixed Octokit API call to use .rest.issues.create() (correct v20 syntax)
✅ Improved error logging to show which env vars are set/missing

Files Modified:

functions/index.js - Updated environment handling and Octokit calls
functions/.runtimeconfig.json - NEW - Local development config

2. ✅ Service Worker MIME Type Error

Problem: Service worker was being served as HTML with error "The script has an unsupported MIME type ('text/html')"

Root Cause:

Cloudflare Pages SPA rewrite rule (/* /index.html 200) was catching the /sw.js request
Service worker request was being served index.html instead of the actual .js file
This is a deployment configuration issue, not a code issue

Fixes Applied:

✅ Updated public/_redirects to explicitly exclude /sw.js from SPA fallback
✅ Added explicit redirect rule: /sw.js /sw.js 200! with ! flag to prevent further rewriting
✅ Added server configuration to vite.config.mjs for development environment

Files Modified:

public/_redirects - Added service worker bypass rule
vite.config.mjs - Added server configuration for dev environment

Testing Instructions

1. Local Development Testing

Prerequisites:

Node.js 20+
Firebase CLI installed
Access to Firebase project credentials

Steps:

bash

# 1. Install dependencies
npm install
cd functions && npm install && cd ..

# 2. Verify environment configuration
cat functions/.runtimeconfig.json  # Should show GitHub token and Discord webhook

# 3. Start Firebase emulators (optional but recommended)
firebase emulators:start

# 4. In another terminal, start dev server
npm run dev

# 5. Test form submission
# Navigate to http://localhost:5173/#/feedback
# Fill out form and submit
# Check browser console for any errors

Expected Results:

✅ Form submission completes without error
✅ Browser console shows success message with GitHub issue link
✅ GitHub issue created with correct labels and description
✅ Discord notification appears in configured channel (if webhook set)
✅ Firestore document created in featureRequests collection

2. Service Worker Testing

In Browser DevTools:

javascript

// Chrome DevTools > Application tab > Service Workers
// Should show: Service Worker (registration scope /)
// Status: running (or activated and running)

// If still showing MIME type error:
// 1. Check Application > Cache Storage
// 2. Clear all caches
// 3. Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
// 4. Check Network tab for /sw.js request (should be 200 OK with application/javascript MIME type)

3. Cloud Functions Testing

Local Testing:

bash

# Test checkDuplicates function
firebase functions:shell

# In the shell:
checkDuplicates({ title: 'test', description: 'test request' })

# Test createFeatureRequest (requires auth)
# Use postman or client-side code to call the function

Production Testing:

bash

# Check deployed function logs
firebase functions:log --project lantern-app-dev

# Look for these log lines indicating success:
# ✅ Creating GitHub issue with: {...}
# ✅ GitHub issue created: {...}
# ✅ Discord notification sent (if webhook configured)

Deployment Instructions

Step 1: Deploy to Firebase Dev

bash

# Set your dev project
firebase use lantern-app-dev

# Deploy functions
firebase deploy --only functions

# Verify deployment
firebase functions:list

# Check logs
firebase functions:log

Step 2: Deploy to Firebase Production

bash

# IMPORTANT: Verify all tests pass in dev first!

# Switch to production
firebase use lantern-app-prod

# Deploy functions
firebase deploy --only functions

# Verify deployment
firebase functions:list --project lantern-app-prod

# Check logs
firebase functions:log --project lantern-app-prod

Step 3: Deploy Frontend

bash

# The fix to public/_redirects and vite.config.mjs will be deployed automatically
# when you deploy to Cloudflare Pages

# For dev:
npm run build
# Deploy dist/ to Cloudflare Pages (dev branch)

# For production:
npm run build
# Deploy dist/ to Cloudflare Pages (main branch)

Verification Checklist

After deployment, verify:

[ ] Form at #/feedback loads without errors
[ ] Can submit feature request
[ ] GitHub issue created with correct labels
[ ] Discord notification sent (if configured)
[ ] Service worker registers (DevTools > Application)
[ ] No "MIME type" errors in console
[ ] Rate limiting works (5 requests per 24 hours)
[ ] Duplicate detection shows similar requests
[ ] Anonymous submission option works
[ ] Mobile view works and is responsive

Troubleshooting

Still Getting 500 Error on Form Submission

Check:

Are environment variables set correctly?

bash

firebase functions:config:get

Should output:

json

{
  "github": {
    "token": "ghp_...",
    "repo": "cattreedev/lantern_app"
  },
  "discord": {
    "webhook_url": "https://discord.com/api/webhooks/..."
  }
}

Check function logs for specific error:
bash
```
firebase functions:log
```
1
Verify GitHub token is valid:
- Token must have repo scope
- Token must not be expired
- Token must have access to the repository
Verify GitHub repository is correct:
- Format: owner/repo (e.g., cattreedev/lantern_app)
- Repository must be accessible with the provided token

Service Worker Still Not Registering

Check:

Hard refresh the page: Ctrl+Shift+R or Cmd+Shift+R
Clear all caches: DevTools > Application > Storage > Clear site data
Check Network tab: /sw.js should return 200 with application/javascript MIME type
Check Console for any error messages
Verify _redirects file has the SW bypass rule:
```
/sw.js /sw.js 200!
```
1

Duplicate Detection Not Working

Check:

Is checkDuplicates function deployed?

bash

firebase functions:list | grep checkDuplicates

Are there existing feature requests in Firestore?
- Check Firebase Console > Firestore > featureRequests collection
- The collection must exist and have documents
Check browser console for errors
Verify user is authenticated before submitting

Discord Webhook Not Sending

Check:

Is webhook URL configured?

bash

firebase functions:config:get | grep discord

Is webhook URL still valid?
- Test webhook: curl -X POST <webhook_url> -d '{"content":"test"}'

Check function logs for Discord error:

bash

firebase functions:log | grep -i discord

Environment Configuration Reference

For Development (local .runtimeconfig.json)

json

{
  "github": {
    "token": "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",
    "repo": "cattreedev/lantern_app"
  },
  "discord": {
    "webhook_url": "https://discord.com/api/webhooks/..."
  }
}

For Production (Firebase Functions Config)

bash

firebase use lantern-app-prod

firebase functions:config:set \
  github.token="ghp_YOUR_PROD_TOKEN" \
  github.repo="cattreedev/lantern_app" \
  discord.webhook_url="https://discord.com/api/webhooks/PROD_URL"

Security Notes

⚠️ CRITICAL:

Never commit .runtimeconfig.json to git (already in .gitignore)
Never hardcode tokens in source code
GitHub token should have minimal scope (repo only)
Discord webhook URL should be kept secret
Rotate tokens if compromised

Next Steps

✅ Deploy functions to dev and test
✅ Verify form submission works end-to-end
✅ Deploy functions to production
✅ Deploy frontend with service worker fixes
⏳ Optional: Set up Cloud Run logging for better debugging

Cloud Run Logging (Optional)

If you want advanced logging and monitoring:

Enable Cloud Logging in Google Cloud Console
Configure Firebase Functions to use Cloud Logging
Set up alerts for function errors

Reference: Cloud Functions Logging Guide

Support & Questions

Function errors? Check: firebase functions:log --tail
Service worker issues? Check: DevTools > Application > Service Workers
GitHub API issues? Test token: curl -H "Authorization: token ghp_xxx" https://api.github.com/user
Discord issues? Test webhook: curl -X POST <webhook_url> -d '{"content":"test"}'

App

Discord Bot

Docs

Functions

Storybook

Workflows

Feature Requests

Feature Request System - Integration Fixes & Deployment Guide

Problems Identified & Fixed

1. ✅ Cloud Functions 500 Error

2. ✅ Service Worker MIME Type Error

Testing Instructions

1. Local Development Testing

2. Service Worker Testing

3. Cloud Functions Testing

Deployment Instructions

Step 1: Deploy to Firebase Dev

Step 2: Deploy to Firebase Production

Step 3: Deploy Frontend

Verification Checklist

Troubleshooting

Still Getting 500 Error on Form Submission

Service Worker Still Not Registering

Duplicate Detection Not Working

Discord Webhook Not Sending

Environment Configuration Reference

For Development (local .runtimeconfig.json)

For Production (Firebase Functions Config)

Security Notes

Next Steps

Cloud Run Logging (Optional)

Support & Questions

Feature Request System - Integration Fixes & Deployment Guide ​

Problems Identified & Fixed ​

1. ✅ Cloud Functions 500 Error ​

2. ✅ Service Worker MIME Type Error ​

Testing Instructions ​

1. Local Development Testing ​

2. Service Worker Testing ​

3. Cloud Functions Testing ​

Deployment Instructions ​

Step 1: Deploy to Firebase Dev ​

Step 2: Deploy to Firebase Production ​

Step 3: Deploy Frontend ​

Verification Checklist ​

Troubleshooting ​

Still Getting 500 Error on Form Submission ​

Service Worker Still Not Registering ​

Duplicate Detection Not Working ​

Discord Webhook Not Sending ​

Environment Configuration Reference ​

For Development (local .runtimeconfig.json) ​

For Production (Firebase Functions Config) ​

Security Notes ​

Next Steps ​

Cloud Run Logging (Optional) ​

Support & Questions ​

Related Documentation ​

Feature Request System - Integration Fixes & Deployment Guide

Problems Identified & Fixed

1. ✅ Cloud Functions 500 Error

2. ✅ Service Worker MIME Type Error

Testing Instructions

1. Local Development Testing

2. Service Worker Testing

3. Cloud Functions Testing

Deployment Instructions

Step 1: Deploy to Firebase Dev

Step 2: Deploy to Firebase Production

Step 3: Deploy Frontend

Verification Checklist

Troubleshooting

Still Getting 500 Error on Form Submission

Service Worker Still Not Registering

Duplicate Detection Not Working

Discord Webhook Not Sending

Environment Configuration Reference

For Development (local .runtimeconfig.json)

For Production (Firebase Functions Config)

Security Notes

Next Steps

Cloud Run Logging (Optional)

Support & Questions

Related Documentation