🐋 Cloudflare React + Vite + Hono + Cloudflare Workers with Docker Compose

This is a development setup with docker compose for the Vite React Template.

Tip

While this example shows the Vite React template, the principles on how to use Docker Compose can be applied for any other template as well.

🛠️ Prerequisites

• Docker Compose
• Task (optional)

📜 Usage

First time

1. Copy .env.dev.example to .env.dev.

   task init

Note

• The .env.dev file is used for development purposes, and can include variables/secrets like CLOUDFLARE_API_TOKEN, and will not be parsed for wrangler types.

2. Install dependencies before starting the container.

   task npm:install

3. Start the container.

   task up

4. Access the UI at http://localhost:8789.

🚀 TLDR

Initialize the project, install dependencies, and start the container.

task setup

🐚 Additional commands

NPM

Install

Install NPM dependencies.

task npm:install

Update

Update NPM dependencies.

task npm:update

Compose

Up

Start vite dev server.

task up

Build and start vite preview server.

task up:preview

Down

Stop and remove the container.

task down

Logs

View container logs.

task logs

Wrangler

Types

Generate wrangler types.

task wrangler:types

Deploy

Deploy to Cloudflare Workers.

task wrangler:deploy

Important

This requires the CLOUDFLARE_API_TOKEN to be set in the .env file.

Secret

Upload secret.

task wrangler:secret s=<NAME_OF_SECRET>
# Example
task wrangler:secret s=API_KEY

Important

• This requires the CLOUDFLARE_API_TOKEN to be set in the .env file.
• You will be prompted to enter the secret value.

Biome

Format

Run biome format with safe fixes.

task biome:format:fix

Lint

Run biome lint with safe fixes.

task biome:lint:fix

Check

Run biome check with safe fixes.

task biome:check:fix

🧑‍🏫 Good to know

• The current development setup uses Vite with the @cloudflare/vite-plugin.
• The base image for the docker compose worker service is node:24-slim.
• There is a Github action that releases a new version of the worker when pushed to main (or manual workflow dispatch).
  • The action uses cloudflare/wrangler-action@v3 but has the wranglerVersion explicitly set to match the version in the package.json (v4).
  • By default, the release.yml has WRANGLER_QUIET set to true and SHOW_DEPLOYMENT_URL set to false, which will hide the deployment URL from the logs.

❕ Licence

This repository comes with a MIT license.