89 lines
2.1 KiB
Markdown
89 lines
2.1 KiB
Markdown
|
# 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:
|
||
|
|
- 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:
|
||
|
|
|
||
|
|
```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:
|
||
|
|
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:
|
||
|
|
|
||
|
|
```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
|