Problem:
- NEXT_PUBLIC_* variables must be baked into Next.js build at BUILD TIME
- Setting them in docker-compose is too late (bundle already built)
- This caused "NEXT_PUBLIC_WREN_API_TOKEN is undefined" errors in production
Solution:
1. Updated Dockerfile to accept ARG values for all NEXT_PUBLIC_* variables
2. Set ARGs as ENV variables before npm run build (lines 15-26)
3. Updated CI/CD workflow to pass build-args from Gitea secrets/vars
4. Variables are now baked into the image during build
Next Steps:
1. Add these secrets to Gitea repository settings:
- NEXT_PUBLIC_WREN_API_TOKEN
- NEXT_PUBLIC_FORMSPREE_CONTACT_ID
- NEXT_PUBLIC_FORMSPREE_OFFSET_ID
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
2. Add this variable to Gitea repository settings:
- NEXT_PUBLIC_API_BASE_URL
3. Next push will build image with variables baked in
4. Can simplify docker-compose (remove NEXT_PUBLIC_* from web service)
Files Changed:
- Dockerfile: Added ARG and ENV declarations before build step
- .gitea/workflows/build-deploy.yml: Added build-args to frontend image build
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This is a major migration from Vite to Next.js 16.0.1 for improved
performance, better SEO, and modern React features.
## Next.js Migration Changes
- Upgraded to Next.js 16.0.1 with Turbopack (from Vite 6)
- Migrated from client-side routing to App Router architecture
- Created app/ directory with Next.js page structure
- Added server components and client components pattern
- Configured standalone Docker builds for production
## Bug Fixes - React Hooks
- Fixed infinite loop in Header.tsx scroll behavior (removed lastScrollY state dependency)
- Fixed infinite loop in useCalculatorState.ts (wrapped saveState/clearState in useCallback)
- Fixed infinite loop in OffsetOrder.tsx (removed savedState from useEffect dependencies)
- Removed unused React imports from all client components
## Environment Variable Migration
- Migrated all VITE_ variables to NEXT_PUBLIC_ prefix
- Updated src/utils/config.ts to use direct static references (required for Next.js)
- Updated src/api/checkoutClient.ts, emailClient.ts, aisClient.ts for Next.js env vars
- Updated src/vite-env.d.ts types for Next.js environment
- Maintained backward compatibility with Docker window.env
## Layout & UX Improvements
- Fixed footer to always stay at bottom of viewport using flexbox
- Updated app/layout.tsx with flex-1 main content area
- Preserved glass morphism effects and luxury styling
## TypeScript & Build
- Fixed TypeScript strict mode compilation errors
- Removed unused imports and variables
- Fixed Axios interceptor types in project/src/api/wrenClient.ts
- Production build verified and passing
## Testing & Verification
- Tested calculator end-to-end in Playwright
- Verified Wren API integration working (11 portfolios fetched)
- Confirmed calculation: 5000L → 13.47 tons CO₂ → $3,206 total
- All navigation routes working correctly
- Footer positioning verified across all pages
## Files Added
- app/ directory with Next.js routes
- components/ directory with client components
- next.config.mjs, next-env.d.ts
- ENV_MIGRATION.md, NEXTJS_MIGRATION_COMPLETE.md documentation
## Files Modified
- Docker configuration for Next.js standalone builds
- package.json dependencies (Next.js, React 19)
- ts config.json for Next.js
- All API clients for new env var pattern
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CRITICAL FIX:
- Frontend now loads environment variables at runtime instead of build time
- This allows changing configuration without rebuilding the Docker image
CHANGES:
- Add env-config.js script loader to index.html
- Update env.sh to use correct path for serve (/app/dist)
- Update Dockerfile to run env.sh before starting serve
- Add VITE_STRIPE_PUBLISHABLE_KEY to docker-compose environment
HOW IT WORKS:
1. env.sh reads VITE_* variables from container environment
2. Generates /app/dist/env-config.js with window.env object
3. index.html loads env-config.js before React app
4. src/utils/config.ts reads from window.env at runtime
This fixes the "Missing required environment variable: WREN_API_TOKEN" error
because the frontend can now access environment variables passed to the container.
🔒 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
CRITICAL SECURITY FIXES:
- Add webhook secret validation to prevent signature bypass
- Implement idempotency protection across all webhook handlers
- Add atomic database updates to prevent race conditions
- Improve CORS security with origin validation and logging
- Remove .env from git tracking to protect secrets
STRIPE INTEGRATION:
- Add support for checkout.session.expired webhook event
- Add Stripe publishable key to environment configuration
- Fix webhook handlers with proper idempotency checks
- Update Order model with atomic updatePaymentAndStatus method
- Add comprehensive logging for webhook processing
DEPLOYMENT ARCHITECTURE:
- Split into two Docker images (frontend-latest, backend-latest)
- Update CI/CD to build separate frontend and backend images
- Configure backend on port 3801 (internal 3001)
- Add production-ready docker-compose.yml
- Remove redundant docker-compose.portainer.yml
- Update nginx configuration for both frontend and backend
DOCUMENTATION:
- Add PRODUCTION-SETUP.md with complete deployment guide
- Add docs/stripe-security-fixes.md with security audit details
- Add docs/stripe-checkout-sessions.md with integration docs
- Add docs/stripe-webhooks.md with webhook configuration
- Update .env.example with all required variables including Stripe publishable key
CONFIGURATION:
- Consolidate to single .env.example template
- Update .gitignore to protect all .env variants
- Add server/Dockerfile for backend container
- Update DEPLOYMENT.md with new architecture
🔒 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
