Skip to main content

​
Environment Configuration

Fataplus requires several environment variables for proper operation across different services and integrations.

​
Configuration Overview

Environment variables are managed differently depending on the deployment target:
  • Local Development: .env.local file
  • Cloudflare Workers: wrangler.toml [vars] section
  • Cloudflare Pages: Dashboard environment variables

​
Core Configuration

​
Cloudflare Settings

Required for deploying to Cloudflare infrastructure: 
CLOUDFLARE_API_KEY=your_api_key
CLOUDFLARE_ACCOUNT_ID=your_account_id
1

Get your API key

  1. Go to Cloudflare Dashboard
  2. Navigate to My Profile > API Tokens
  3. Create a token with:
    • Workers Routes: Edit
    • Workers Scripts: Edit
    • D1: Edit
    • Pages: Edit
2

Find your Account ID

  1. Go to Cloudflare Dashboard
  2. Select any domain
  3. Scroll down to API section on the right sidebar
  4. Copy the Account ID
Current production account ID: f30dd0d409679ae65e841302cc0caa8c

​
Database Configuration

DATABASE_ID=your_d1_database_id
This is the Cloudflare D1 database identifier. Current production value: 
DATABASE_ID=20b1fb8c-3e08-4e91-9083-53558750107d
Never commit the database ID or other sensitive credentials to version control. Use .env.local for local development.

​
Integration Configuration

​
Figma API Integration

For design system synchronization: 
FIGMA_ACCESS_TOKEN=your_figma_token
1

Create Figma App

  1. Go to Figma Developers
  2. Click Create an app
  3. Give it a name: “Fataplus Integration”
2

Configure permissions

Required permissions:
  • Read files
  • Read comments
  • Webhooks
3

Generate access token

  1. In your Figma app settings
  2. Navigate to Personal Access Tokens
  3. Generate a new token
  4. Copy and store securely

​
Claude AI Integration

For AI-powered features: 
CLAUDE_API_KEY=your_claude_api_key
Obtain from Anthropic Console.

​
OAuth Configuration

For authentication and authorization: 
OAUTH_CLIENT_ID=your_oauth_client
OAUTH_CLIENT_SECRET=your_oauth_secret

​
Environment-Specific Variables

​
Development Environment

For local development (wrangler.toml): 
[vars]
ENVIRONMENT = "development"

​
Production Environment

For production deployment: 
[env.production]
name = "my-sonicjs-app-production"
vars = { ENVIRONMENT = "production" }

​
Complete Configuration Example

# Cloudflare Configuration
CLOUDFLARE_API_KEY=your_api_key
CLOUDFLARE_ACCOUNT_ID=f30dd0d409679ae65e841302cc0caa8c
DATABASE_ID=20b1fb8c-3e08-4e91-9083-53558750107d

# Integration APIs
FIGMA_ACCESS_TOKEN=your_figma_token
CLAUDE_API_KEY=your_claude_api_key

# OAuth
OAUTH_CLIENT_ID=your_oauth_client
OAUTH_CLIENT_SECRET=your_oauth_secret

# Application
ENVIRONMENT=development

​
Setting Environment Variables

​
Local Development

1

Create .env.local file

cp .env.example .env.local
2

Edit with your values

Open .env.local and add your actual API keys and tokens.
3

Verify .gitignore

Ensure .env.local is in your .gitignore:
echo ".env*" >> .gitignore

​
Cloudflare Workers

For Workers, use the [vars] section in wrangler.toml: 
[vars]
ENVIRONMENT = "production"
Do not put sensitive secrets in [vars]. Use Cloudflare Workers Secrets instead (see below).
For sensitive values like API keys: 
# Set a secret
wrangler secret put CLAUDE_API_KEY
# You'll be prompted to enter the value

# List all secrets
wrangler secret list

# Delete a secret
wrangler secret delete CLAUDE_API_KEY
Secrets are encrypted and not visible in the dashboard or logs.

​
Cloudflare Pages Environment Variables

1

Navigate to your Pages project

Go to Cloudflare Dashboard > Workers & Pages
2

Open Settings

Click on your project, then go to Settings > Environment variables
3

Add variables

  • Select Production or Preview environment
  • Click Add variable
  • Enter name and value
  • Click Save

​
Verification

​
Check Local Configuration

# Verify environment file exists
cat .env.local

# Start development server
npm run dev

​
Check Worker Configuration

# View current configuration
wrangler whoami

# List secrets
wrangler secret list

# Test configuration
wrangler dev

​
Security Best Practices

Follow these security guidelines:
  1. Never commit sensitive data to version control
  2. Use Cloudflare Secrets for API keys and tokens
  3. Rotate credentials regularly (every 90 days recommended)
  4. Use environment-specific values (different keys for dev/prod)
  5. Limit API token permissions to only what’s needed
  6. Monitor API usage for unusual activity

​
Files to Exclude from Git

Ensure your .gitignore includes: 
# Environment files
.env*
.env.local
.env.production

# Credentials
*.key
*.pem
*secret*
credentials.json

​
Required vs Optional Variables

​
Required for Basic Deployment

  • CLOUDFLARE_ACCOUNT_ID
  • DATABASE_ID

​
Required for Full Functionality

  • CLOUDFLARE_API_KEY (for deployments)
  • FIGMA_ACCESS_TOKEN (for design sync)
  • CLAUDE_API_KEY (for AI features)

​
Optional

  • OAUTH_CLIENT_ID / OAUTH_CLIENT_SECRET (if using OAuth)
  • R2 bucket bindings (if using media storage)

​
Troubleshooting

​
Variables not loading

  1. Check file name is exactly .env.local
  2. Restart development server
  3. Verify no syntax errors in .env.local

​
Secrets not working in Worker

  1. Verify secret is set: wrangler secret list
  2. Redeploy worker: wrangler deploy
  3. Check secret name matches code exactly (case-sensitive)

​
Production variables not applied

  1. Verify [env.production] section in wrangler.toml
  2. Deploy with environment flag: wrangler deploy --env production
  3. Check Cloudflare Dashboard for environment variables

​
Next Steps