TETHERWARE.AI - Deployment Guide

Overview

This repository contains the production-ready website for Tetherware.ai, a quantum-interacting non-deterministic AI framework. The site features a raw, hacker-aesthetic design with Matrix-style green-on-black theme, emphasizing functionality over corporate polish.

Tech Stack

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS with custom terminal theme
• Routing: Wouter for client-side routing
• Forms: React Hook Form with Zod validation
• State Management: TanStack Query for server state
• Backend: Express.js with PostgreSQL database
• Database: PostgreSQL (Neon) with Drizzle ORM
• UI Components: Radix UI + shadcn/ui

Prerequisites

• Node.js 18+
• npm or yarn
• PostgreSQL database (Neon/Supabase/Railway recommended)
• DATABASE_URL environment variable with PostgreSQL connection string
• Cloudflare account (free tier works)
• Domain tetherware.ai configured in Cloudflare

Local Development

1. Clone and install dependencies

   git clone <your-repo-url>
   cd tetherware-ai
   npm install

2. Set up database

   # Create .env file with your database connection string
   echo "DATABASE_URL=postgresql://user:password@host:5432/dbname" > .env
   echo "SESSION_SECRET=your_session_secret" >> .env
   
   # Push schema to create tables
   npm run db:push

3. Start development server

   npm run dev

   The app will be available at http://localhost:5000

Deployment to Cloudflare Pages

Method 1: Git Integration (Recommended)

1. Push to GitHub/GitLab

   git add .
   git commit -m "Initial Tetherware.ai website"
   git remote add origin YOUR_REPO_URL
   git push -u origin main

2. Connect to Cloudflare Pages

   • Log into Cloudflare Dashboard
   • Go to Pages → Create a project
   • Select Connect to Git
   • Choose your repository
   • Configure build settings:
     • Framework preset: None
     • Build command: npm run build
     • Build output directory: dist/public
     • Root directory: / (default)
     • Node version: 18 or higher (set in Environment Variables: NODE_VERSION=18)
   • Click Save and Deploy

3. Set Custom Domain

   • After deployment, go to Custom domains
   • Add tetherware.ai and www.tetherware.ai
   • Cloudflare will automatically configure DNS

Method 2: Direct Upload

1. Build the project locally

   npm run build

2. Upload to Cloudflare Pages

   • Go to Pages → Create a project → Direct Upload
   • Upload the dist/public folder contents
   • Set custom domain as above

Method 3: Wrangler CLI

1. Install Wrangler

   npm install -g wrangler

2. Authenticate with Cloudflare

   wrangler login

3. Build and Deploy

   npm run build
   wrangler pages deploy dist/public --project-name=tetherware-ai

Post-Deployment Configuration

1. Cloudflare Web Analytics

Replace the placeholder token in client/index.html:

<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
        data-cf-beacon='{"token": "YOUR_ACTUAL_CLOUDFLARE_TOKEN"}'></script>

To get your Cloudflare Web Analytics token:

1. Go to Cloudflare Dashboard → Analytics & Logs → Web Analytics
2. Click Add a site
3. Enter tetherware.ai
4. Copy the token from the generated script tag
5. Replace YOUR_CLOUDFLARE_TOKEN in client/index.html

2. Environment Variables (Optional)

If you need environment variables in production:

1. Go to Pages project → Settings → Environment variables
2. Add variables:
   • SESSION_SECRET: For session management (generate a random string)
   • Any other custom variables with VITE_ prefix for frontend access

3. Redirects & Headers (Optional)

Create public/_redirects for URL redirects:

/old-page /new-page 301
/blog/* https://tetherware.substack.com/:splat 301

Create public/_headers for security headers:

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

Build Configuration

The project uses a custom Vite build configuration that:

• Serves both frontend (React) and backend (Express) from the same port
• Outputs to dist/public for Cloudflare Pages compatibility
• Includes HMR (Hot Module Replacement) for development

Build command: npm run build
Output directory: dist/public

Domain Setup at Cloudflare

Since you already have tetherware.ai at Cloudflare:

1. Add DNS Records (if not auto-configured)

   • Go to DNS settings for tetherware.ai
   • The Pages deployment will auto-add necessary CNAME records
   • Verify:
     • tetherware.ai → CNAME to <project-name>.pages.dev
     • www.tetherware.ai → CNAME to <project-name>.pages.dev

2. SSL/TLS Settings

   • Go to SSL/TLS → Overview
   • Set to Full or Full (strict) mode
   • Pages automatically provisions SSL certificates

3. Force HTTPS

   • Go to SSL/TLS → Edge Certificates
   • Enable Always Use HTTPS

Form Submissions & Data

The application uses PostgreSQL database (via Neon) for persistent storage:

• Waitlist submissions (/api/waitlist)
• Newsletter subscriptions (/api/newsletter)
• Product submissions (/api/products)
• Research proposals (/api/research)

✅ Production Ready:

• All form data persists across server restarts
• Database schema defined in shared/schema.ts
• Uses Drizzle ORM with Neon serverless driver
• Sample QCHING.AI product pre-populated in database

Database Management:

• Schema changes: npm run db:push (pushes schema to database)
• Force push: npm run db:push --force (if data-loss warning appears)
• Connection string: Uses DATABASE_URL environment variable

For Cloudflare Pages Deployment:

1. Set up external PostgreSQL database (Neon, Supabase, Railway, etc.)
2. Add DATABASE_URL environment variable in Pages settings
3. All data will persist in the external database

GetWaitlist Integration (Recommended)

To integrate GetWaitlist.com for the waitlist:

1. Sign up at GetWaitlist.com
2. Get your waitlist ID
3. Replace the waitlist form in client/src/pages/home.tsx:

   // Replace the React Hook Form with GetWaitlist embed
   <div data-gw-waitlist="YOUR_WAITLIST_ID"></div>
   <script src="https://getwaitlist.com/widget.js"></script>

Or use their API:

// In waitlist mutation
await fetch('https://api.getwaitlist.com/api/v1/waitlists/YOUR_WAITLIST_ID/signups', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email, name })
});

Monitoring & Analytics

1. Cloudflare Web Analytics (Privacy-friendly, no cookies)

   • Already configured in client/index.html
   • View stats at Dashboard → Web Analytics

2. Cloudflare Pages Analytics

   • Automatic with Pages deployment
   • View at Pages project → Analytics

3. Server Logs

   • Available in Pages → Deployment logs
   • For production debugging

Troubleshooting

Build Fails

Issue: Build command failed

• Solution: Ensure Node.js 18+ is set in environment variables
• Add NODE_VERSION=18 in Pages → Settings → Environment variables

404 on Routes

Issue: Direct access to /about, /products, etc. returns 404

• Solution: Add _redirects file to public/:

  /* /index.html 200
  

Forms Not Working

Issue: Form submissions fail

• Solution: Check if backend is running (for dev) or API routes are deployed
• Verify CORS settings if using separate API server

Styling Broken

Issue: Terminal theme not applied

• Solution: Verify Tailwind CSS is processing correctly
• Check tailwind.config.ts includes all content paths
• Ensure IBM Plex Mono font is loading from Google Fonts

Architecture Notes

• SPA with Client-Side Routing: Uses Wouter for navigation, all routes handled client-side
• Forms: React Hook Form + Zod for validation before API calls
• State: TanStack Query manages server state with caching
• Database: PostgreSQL with Drizzle ORM for persistent data storage
• Styling: Tailwind CSS with custom Matrix/terminal theme variables
• Components: shadcn/ui (Radix UI primitives) for accessible components

Project Structure

tetherware-ai/
├── client/                 # Frontend React app
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components (Home, About, Products, Research)
│   │   ├── hooks/         # Custom React hooks
│   │   └── lib/           # Utilities (queryClient, etc.)
│   └── index.html         # Entry HTML (includes analytics)
├── server/                # Backend Express server
│   ├── index.ts          # Server entry point
│   ├── routes.ts         # API routes
│   └── storage.ts        # PostgreSQL database storage (Drizzle ORM)
├── shared/               # Shared types & schemas
│   └── schema.ts         # Drizzle ORM schema + Zod validation
├── dist/public/          # Build output (deploy this to Cloudflare Pages)
└── README.md             # This file

Contact & Support

• Email: human@tetherware.ai
• Twitter/X: @tetherware_ai
• LinkedIn: Tetherware Company
• Blog: tetherware.substack.com

License

All rights reserved © 2024 Tetherware.ai