This project is a real-time visitor counter built using Vue 3, Vite, Cloudflare Durable Objects, and WebSockets, all organized within a Turbo Monorepo. The app tracks visitors in real-time across different "rooms" (URLs) and displays total visitors across all active rooms.
MIT License
This project is a real-time visitor counter built using Vue 3, Vite, Cloudflare Durable Objects, and WebSockets, all organized within a Turbo Monorepo. The app tracks visitors in real-time across different "rooms" (URLs) and displays total visitors across all active rooms.
This project is organized as a monorepo using Turborepo for managing both the front-end (Vue app) and back-end (Cloudflare Worker) within a single repository. The Vue application interacts with a Cloudflare Worker, which uses Durable Objects to track active rooms and visitors in real-time.
Node.js and pnpm installed.
Cloudflare Account with Workers enabled.
Turborepo installed globally:
pnpm install turbo -g
.
|
├── client/ # Vue 3 app with Vite
├── server/ # Cloudflare Worker with Durable Objects
├── turbo.json # Turbo configuration file
├── package.json # Root package.json for managing dependencies
└── README.md # This README file
Install dependencies for the entire monorepo:
pnpm install
pnpm install turbo -g
pnpm install wrangler -g
wrangler login
And edit the wrangler.toml
file in both server/
and client/
.
turbo dev
This will start the Cloudflare Worker on http://localhost:8787
.
The application is designed to switch between WebSocket URLs depending on the environment:
ws://localhost:8787
for WebSockets.wss://your-worker-url.workers.dev
for WebSockets (edit in client).Navigate to the apps/worker
directory:
turbo deploy
wrangler.toml
)[vars]
nameId = "your-domain.com"
This variable is used by the worker to dynamically assign a counterId
.
http://localhost:5175
./about
, /contact
).localhost:8787
(for dev) or your Cloudflare Worker URL (for production).Feel free to fork this repository and submit pull requests if you'd like to contribute!