landing_page.github.io

Cloudflare Workers Deployment Guide

This guide explains how to deploy this Next.js landing page to Cloudflare Workers/Pages.

Prerequisites

A Cloudflare account (sign up at https://dash.cloudflare.com/sign-up)
Node.js 18 or higher installed
pnpm package manager installed

Local Development

cd landingPage
pnpm install
pnpm dev

Building for Cloudflare

cd landingPage
pnpm run pages:build

This will create a .vercel/output/static directory with the built application.

Local Preview with Cloudflare Workers

cd landingPage
pnpm run preview

This will start a local Cloudflare Pages development server.

Manual Deployment

Option 1: Using Wrangler CLI

Install wrangler globally (if not already installed):
```
npm install -g wrangler
```
Authenticate with Cloudflare:
```
wrangler login
```
Deploy to Cloudflare Pages:
```
cd landingPage
pnpm run pages:deploy
```

Option 2: Using Cloudflare Dashboard

Build the project:
```
cd landingPage
pnpm run pages:build
```
Go to Cloudflare Dashboard → Pages
Create a new project
Upload the .vercel/output/static folder

Automated Deployment (GitHub Actions)

The repository includes a GitHub Actions workflow that automatically deploys to Cloudflare Pages on every push to the main branch.

Required GitHub Secrets

Add these secrets to your GitHub repository (Settings → Secrets and variables → Actions):

CLOUDFLARE_API_TOKEN: Your Cloudflare API token
- Create at: https://dash.cloudflare.com/profile/api-tokens
- Use the “Edit Cloudflare Workers” template or create a custom token with “Cloudflare Pages:Edit” permissions
CLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID
- Find at: https://dash.cloudflare.com/ (in the URL or on the right sidebar)
NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL (if using Supabase)
NEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key (if using Supabase)

Configuration

wrangler.toml

The wrangler.toml file in the landingPage directory contains the Cloudflare Workers configuration. Update the following:

name: Your project name
account_id: Your Cloudflare account ID (optional, can use environment variable)

Environment Variables

If your application uses environment variables, add them to:

.env.local for local development
Cloudflare Pages dashboard → Settings → Environment variables for production

Important Notes

Static Export: This configuration uses Next.js with Cloudflare adapter to generate edge-compatible output
Image Optimization: Images are set to unoptimized: true for Cloudflare compatibility
Supabase: The app uses Supabase for form submissions - make sure to configure the environment variables
Custom Domain: Configure your custom domain in Cloudflare Pages dashboard

Troubleshooting

Build Fails

Ensure all dependencies are installed: pnpm install
Check that Node.js version is 18 or higher: node --version
Review the build logs for specific errors

Deployment Fails

Verify your Cloudflare credentials are correct
Check that the CLOUDFLARE_API_TOKEN has the necessary permissions
Ensure the project name in wrangler.toml matches your Cloudflare Pages project

Runtime Errors

Check environment variables are properly set in Cloudflare Pages dashboard
Review the Cloudflare Pages logs in the dashboard
Ensure all API calls are compatible with edge runtime