8d9f65868a
All checks were successful
Build and Push Docker Images / docker (push) Successful in 43s
ROOT CAUSE (Zen Debug Investigation): The API_BASE_URL constant was being evaluated when the module loaded, BEFORE window.env was populated by env-config.js. This caused the app to permanently use the fallback localhost:3001 instead of reading the production URL from the .env file. TIMING ISSUE: 1. Browser loads index.html 2. env-config.js loads (creates window.env) 3. main.tsx loads as ES module (DEFERRED) 4. Module imports checkoutClient → const API_BASE_URL executes 5. window.env NOT READY YET → falls back to localhost:3001 6. API_BASE_URL locked to wrong value forever THE FIX: Changed from module-level constants to request-time lazy evaluation. Now getApiBaseUrl() is called WHEN THE API REQUEST HAPPENS, not when the module loads. At that point window.env is guaranteed to exist. FILES CHANGED: - src/api/checkoutClient.ts: * Removed constant API_BASE_URL * All 3 functions now call getApiBaseUrl() at request time * Added logging to show which URL is being used - src/api/aisClient.ts: * Removed constant API_KEY * Added getApiKey() function with lazy evaluation * Same pattern for consistency and future-proofing This fixes: "FetchEvent for http://localhost:3001 resulted in network error" Now uses: https://puffinoffset.com/api (from .env file) 🔒 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Puffin Offset - Carbon Offsetting for Yachts
This application helps users calculate and offset the carbon footprint of yachts through verified carbon offset projects.
Features
- Carbon footprint calculation for yacht trips
- Integration with Wren carbon offset projects
- Responsive UI for mobile and desktop
- Contact forms powered by Formspree
Setup
Local Development
- Install dependencies:
npm install
- Create a
.envfile with your API tokens:
VITE_WREN_API_TOKEN=your-token-here
VITE_FORMSPREE_CONTACT_ID=your-formspree-contact-form-id
VITE_FORMSPREE_OFFSET_ID=your-formspree-offset-form-id
- Run the development server:
npm run dev
Docker Setup
This project can be run in Docker containers using Docker Compose, and is configured to work with an Nginx reverse proxy on the host.
Prerequisites
- Docker
- Docker Compose
- Nginx (on the host system for SSL termination and reverse proxying)
Running with Docker Compose
- Build and start the containers:
docker compose up -d
-
The Docker container will listen on port 3800, which should be reverse-proxied by your host Nginx.
-
Stop the containers:
docker compose down
Nginx Configuration
The project includes two Nginx configuration files:
nginx.conf: Used INSIDE the Docker container to serve the static files on port 3800nginx-host.conf: A reference config for setting up your Nginx on the HOST to reverse proxy to the Docker container
To set up the host Nginx:
- Copy the nginx-host.conf to your Nginx sites directory:
sudo cp nginx-host.conf /etc/nginx/sites-available/puffinoffset.com
sudo ln -s /etc/nginx/sites-available/puffinoffset.com /etc/nginx/sites-enabled/
- Uncomment the SSL certificate lines after you've obtained certificates using Certbot or another SSL provider
- Test and reload Nginx:
sudo nginx -t
sudo systemctl reload nginx
Environment Variables
When using Docker, the environment variables are mounted as a volume from your local .env file. Make sure it contains:
VITE_WREN_API_TOKEN=your-token-here
VITE_FORMSPREE_CONTACT_ID=your-formspree-contact-form-id
VITE_FORMSPREE_OFFSET_ID=your-formspree-offset-form-id
Backend Service (Optional)
The docker-compose file includes a commented section for running the backend script (app.js) in a separate container. To enable it:
- Uncomment the
backendservice indocker-compose.yml - Ensure your
.envfile contains the needed variables - Run
docker compose up -dto start both services
API Documentation
For Wren API documentation, visit: https://wren.co/api
Building for Production
# Without Docker
npm run build
# With Docker
docker compose build
The production build will be available in the dist directory, or served by Nginx in the Docker container.