puffin-app/index.html
Matt 04bfef4391
All checks were successful
Build and Push Docker Images / docker (push) Successful in 46s
Fix frontend runtime environment configuration
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>
2025-10-30 12:30:29 +01:00

83 lines
3.9 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/webp" href="/puffinOffset.webp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#3b82f6" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Puffin Calculator" />
<link rel="apple-touch-icon" href="/puffinOffset.webp" />
<!-- Primary Meta Tags -->
<title>Puffin Offset - Carbon Offsetting for Superyachts</title>
<meta name="title" content="Puffin Offset - Carbon Offsetting for Superyachts">
<meta name="description" content="Luxury meets environmental responsibility. Calculate and offset your yacht's carbon footprint with verified projects. Join the sustainable yachting movement today.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://puffinoffset.com/">
<meta property="og:title" content="Puffin Offset - Carbon Offsetting for Superyachts">
<meta property="og:description" content="Luxury meets environmental responsibility. Calculate and offset your yacht's carbon footprint with verified projects. Join the sustainable yachting movement today.">
<meta property="og:image" content="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&q=80">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://puffinoffset.com/">
<meta property="twitter:title" content="Puffin Offset - Carbon Offsetting for Superyachts">
<meta property="twitter:description" content="Luxury meets environmental responsibility. Calculate and offset your yacht's carbon footprint with verified projects. Join the sustainable yachting movement today.">
<meta property="twitter:image" content="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?auto=format&fit=crop&q=80">
<!-- Additional SEO Meta Tags -->
<meta name="keywords" content="yacht carbon offset, superyacht sustainability, maritime carbon calculator, eco-friendly yachting, carbon neutral yacht, sustainable luxury, yacht emissions">
<meta name="author" content="Puffin Offset">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://puffinoffset.com/">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Puffin Offset",
"url": "https://puffinoffset.com",
"logo": "https://puffinoffset.com/puffinOffset.webp",
"description": "Luxury meets environmental responsibility. Calculate and offset your yacht's carbon footprint with verified projects.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+33-6-71-18-72-53",
"contactType": "customer service",
"email": "info@puffinoffset.com"
},
"sameAs": [
"https://twitter.com/puffinoffset",
"https://linkedin.com/company/puffinoffset"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Puffin Offset",
"url": "https://puffinoffset.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://puffinoffset.com/calculator?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
</head>
<body>
<div id="root"></div>
<!-- Load runtime environment configuration before app -->
<script src="/env-config.js"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>