Getting Started

Getting Started

This guide walks you through setting up ACGWatch locally and deploying to Cloudflare.

Prerequisites

  • Node.js 18+
  • npm or pnpm
  • A Cloudflare account (for D1 + Workers + Pages)

Local Development

1. Clone the repositories

git clone [email protected]:yyh0808/acgwatch-website.git
git clone [email protected]:yyh0808/acgwatch-function-worker.git

2. Install dependencies

# Website (Nuxt 3)
cd acgwatch-website
npm install

# Worker (Hono + Drizzle)
cd ../acgwatch-function-worker
npm install

3. Configure environment variables

Create a .env file in acgwatch-website/:

NUXT_PUBLIC_ACG_API_BASE_URL=http://localhost:8787
NUXT_PUBLIC_ACG_API_KEY=dev-local-api-key
NUXT_PUBLIC_R2_PUBLIC_URL=
NUXT_PUBLIC_SITE_URL=http://localhost:3000
NUXT_PUBLIC_GA_ID=

4. Start the Worker locally

cd acgwatch-function-worker
npx wrangler dev
# Worker runs at http://localhost:8787

5. Start the Nuxt dev server

cd acgwatch-website
npm run dev
# Website runs at http://localhost:3000

Database Migrations

Apply migrations to the local D1 database:

cd acgwatch-function-worker
npx wrangler d1 migrations apply acgwatch-db --local

To apply to production:

npx wrangler d1 migrations apply acgwatch-db --remote

Deploying

Worker (Cloudflare Workers)

cd acgwatch-function-worker
npx wrangler deploy

Set secrets in the Cloudflare dashboard or via CLI:

wrangler secret put ACG_API_KEY
wrangler secret put BETTER_AUTH_SECRET

Website (Cloudflare Pages)

Deployment is fully automated via GitHub Actions. Push to main to trigger a deploy to Cloudflare Pages.

The workflow:

  1. Runs npm run build (outputs to dist/)
  2. Deploys dist/ to Cloudflare Pages via wrangler pages deploy

Project Structure

acgwatch-website/
├── pages/           # Nuxt file-based routing
├── components/      # Reusable Vue components
├── composables/     # useAcgApi, useR2Image
├── stores/          # Pinia store (acg.ts)
├── i18n/locales/    # Translation files (7 languages)
├── layouts/         # Default layout with navbar + footer
├── content/         # Nuxt Content docs (this file)
└── public/          # Static files (robots.txt, sitemap.xml)

acgwatch-function-worker/
├── src/
│   ├── index.ts         # Hono app entry point
│   ├── routes/          # API route handlers
│   ├── middleware/       # CORS, API key, rate limiting
│   ├── db/              # Drizzle D1 client
│   ├── services/        # Ranking cron job
│   └── types/           # TypeScript types
└── drizzle/
    ├── schema.ts        # Table definitions
    └── migrations/      # SQL migration files

API Rate Limits

The public ACG API enforces the following limits per IP:

  • 60 requests/minute — standard limit
  • 300 requests/minute — triggers automatic 24-hour IP ban

If you need higher limits for a specific use case, contact us.