puffinOffsetCalculator/SIMPLE-SETUP.md

# Simple Puffin Offset Calculator Setup

This guide provides a minimalist approach to run the Puffin Offset Calculator in a Docker container and embed it into WordPress.

## Quick Start

### 1. Create a Directory and Required Files

Create a new directory and add these files:

- `docker-compose.yml` - Configuration for Docker container
- `.env` - Environment variables for the application

### 2. Run with Docker Compose

```bash
docker-compose up -d
```

This will:
- Build the calculator image from the local Dockerfile
- Start the container
- Make the calculator available at http://localhost:8080

### 3. Embed in WordPress

Add this code to a page in your WordPress site:

```html
<iframe 
  src="http://localhost:8080" 
  width="100%" 
  height="800px" 
  frameborder="0"
  style="border:none;overflow:hidden"
  title="Carbon Offset Calculator">
</iframe>
```

Adjust the URL if you're hosting the Docker container on a different server.

## docker-compose.yml File Contents

```yaml
version: '3.8'

services:
  puffin-calculator:
    build: .
    container_name: puffin-calculator
    ports:
      - "8080:80"
    restart: unless-stopped
    environment:
      - NODE_ENV=production
      # Include any environment variables from .env file
      - REACT_APP_API_KEY=${REACT_APP_API_KEY}
      - REACT_APP_API_URL=${REACT_APP_API_URL}
    volumes:
      # Persist Nginx logs
      - ./logs:/var/log/nginx
```

## .env File Example

Create a `.env` file with any required environment variables:

```
REACT_APP_API_KEY=your_api_key_here
REACT_APP_API_URL=https://api.example.com
```

## Gitea Registry Authentication

If you get authentication errors when Docker tries to pull the image:

```bash
docker login code.letsbe.solutions
# Enter your Gitea credentials when prompted
```

Then run `docker-compose up -d` again.

## Troubleshooting

- **Container not starting**: Check the logs with `docker-compose logs puffin-calculator`
- **Calculator not showing in WordPress**: Ensure the server hosting Docker is accessible from your WordPress server
- **CORS issues**: Your WordPress site must be able to load content from the calculator URL