puffinOffsetCalculator/SIMPLE-SETUP.md

2.1 KiB

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

docker-compose up -d

This will:

  • Pull the calculator image from Gitea registry
  • 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:

<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

version: '3.8'

services:
  puffin-calculator:
    image: code.letsbe.solutions/matt/puffinoffsetcalculator:latest
    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:

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