How to Deploy FckSignups to Production: A Complete Guide for Vite and Cloudflare Workers

Deploy FckSignups to production by building the Vite React frontend into static assets for Cloudflare Pages, then publishing the Cloudflare Worker located in cloudflare-worker/ using wrangler.

FckSignups is a modern React application built with Vite and TypeScript that relies on a lightweight Cloudflare Worker for API endpoints. Deploying it requires handling both the static frontend and the serverless backend component. The following guide walks through the exact steps derived from the repository structure in BraveOPotato/FckSignups.

Prerequisites

Before deploying, ensure your environment meets these requirements:

• Node.js ≥ 18 – Required for building the Vite application
• Package manager – pnpm (recommended), npm, or yarn
• Cloudflare account – Available at dash.cloudflare.com
• wrangler CLI – Install globally with npm install -g wrangler
• Git – For cloning the repository

The wrangler.toml file in the cloudflare-worker/ directory specifies compatible wrangler versions you should verify against.

Clone and Install Dependencies

Start by cloning the repository and installing frontend dependencies:

git clone https://github.com/BraveOPotato/FckSignups.git
cd FckSignups
pnpm install

The package.json defines the build scripts and frontend dependencies needed to compile the application.

Build the Front-End

The repository uses Vite as its build tool. The configuration resides in vite.config.mts and outputs production assets to the dist/ directory.

Run the build command:

pnpm run build

This generates optimized static files in dist/ ready for deployment to any static hosting provider.

Deploy the Static Site

You can host the compiled frontend on any static file CDN. The repository is optimized for Cloudflare Pages, keeping the frontend and API on the same infrastructure.

Option A: Cloudflare Pages (Recommended)

1. Create a new Pages project in the Cloudflare dashboard
2. Connect your GitHub repository or upload the dist/ folder manually
3. Set the build command to pnpm run build and output directory to dist
4. Deploy – Cloudflare automatically serves the static assets

Option B: Alternative Hosts

For Netlify, Vercel, or S3 + CloudFront, upload the contents of the dist/ folder according to the provider's documentation.

Deploy the Cloudflare Worker (API)

The backend logic lives in the cloudflare-worker/ directory as a Cloudflare Worker. The entry point is worker.ts, which routes requests to handlers like handleSuggestTool.ts, handleSubmitTool.ts, and handleReportTool.ts.

Configure wrangler.toml

Open cloudflare-worker/wrangler.toml and update the account ID:

name = "fcksignups-worker"
type = "javascript"
account_id = "<YOUR_ACCOUNT_ID>"

Replace <YOUR_ACCOUNT_ID> with your Cloudflare Account ID found in the dashboard sidebar.

Set Environment Secrets

If your Worker requires API keys or other secrets, add them via wrangler:

cd cloudflare-worker
wrangler secret put <SECRET_NAME>

The repository does not commit secret files, so only add variables your specific deployment requires.

Publish the Worker

Deploy the API with a single command:

wrangler publish

Once deployed, the Worker becomes available at https://<YOUR_SUBDOMAIN>.workers.dev or a custom domain if configured.

Connect the Front-End to the Worker

The frontend code reads the API endpoint from the VITE_WORKER_URL environment variable, referenced in src/main.tsx and consumed in API hooks like those in src/hooks/useTools.ts.

Create a .env.production file in the project root or set the variable in your hosting dashboard:

VITE_WORKER_URL=https://<YOUR_SUBDOMAIN>.workers.dev

After setting the environment variable, rebuild the frontend to bake the correct API URL into the static bundle:

pnpm run build

Verify the Production Deployment

1. Visit your deployed site URL (e.g., https://fcksignups.pages.dev)
2. Test tool submission or suggestion functionality – requests route to /api/submit, /api/suggest, and other endpoints handled by the Worker
3. Monitor the Cloudflare dashboard under Workers > Logs for runtime errors or performance metrics

Summary

• FckSignups consists of a Vite-built React frontend and a Cloudflare Worker API
• Build static assets with pnpm run build configured via vite.config.mts
• Deploy the Worker from the cloudflare-worker/ directory using wrangler publish
• Set VITE_WORKER_URL to connect the frontend to your deployed API
• Host the dist/ folder on Cloudflare Pages for optimal integration with the Cloudflare Worker backend

Frequently Asked Questions

Can I deploy FckSignups without using Cloudflare?

Yes, you can deploy the static frontend to any hosting provider that supports static sites, such as Netlify, Vercel, or AWS S3. However, the backend is specifically built as a Cloudflare Worker using the Workers runtime API, so you would need to migrate the API code in cloudflare-worker/worker.ts to a different serverless platform like AWS Lambda or Deno Deploy if you wish to avoid Cloudflare entirely.

How do I update the Worker after making API changes?

Navigate to the cloudflare-worker/ directory and run wrangler publish again. The command reads wrangler.toml and deploys the updated worker.ts along with its handler modules like handleSubmitTool.ts and handleSuggestTool.ts. For automated updates, integrate this command into a CI/CD pipeline using GitHub Actions or similar tools.

What environment variables does the frontend require?

The frontend requires only VITE_WORKER_URL, which specifies the base URL of your deployed Cloudflare Worker. This variable is accessed in the React code via import.meta.env.VITE_WORKER_URL as shown in src/hooks/useTools.ts. No other environment variables are mandatory for the base application to function.

Is there a way to preview the production build locally?

Yes. After building with pnpm run build, run pnpm run preview to start a local server that serves the contents of the dist/ directory. This simulates the production environment and allows you to test the built application before deploying it to Cloudflare Pages or another host.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}