Development Overview
This doc outlines how to get Pixelflare setup and running locally, ready for development. It is (or should be), very quick and easy to get started.
Quick Start
git clone https://github.com/lissy93/pixelflare.git
cd pixelflare
pnpm install
pnpm setup:local
pnpm devVisit http://localhost:5173 to see the running app 🎉
Prerequisites
During the setup script, you'll be warned if you're missing any of the required packages. Below are the requirements, with links:
- Git - VCS to clone the repo
- Node.js - JS runtime (v24/LTS or later)
- pnpm - Package manager
- Terraform - IaC tool (for deployment)
- Make - Build automation, to run Makefiles
- Wrangler CLI - Cloudflare CLI tool (run
wrangler loginafter installation) - Cloudflare Account - Required to login to wrangler and for deploying to Cloudflare
Development Config
Once you've copied the .env.example to .env (which happens automatically in the first run on the dev setup script), you can complete the template with your real values to configure the setup. However, by default nothing extra is required here for local development. Refer to the Environmental Variable Directory for a list of all supported variables.
Development Commands
Run pnpm run to see a list of all NPM commands available in the root package.json. For running commands in specific packages, cd into the package folder and run pnpm run there. There's also the Makefile which covers the deployment commands and scripts.
For a list of commands, see the Development Commands page.
Project Structure
| Directory | Description |
|---|---|
scripts/ | Deployment scripts and automations |
terraform/ | Infrastructure as Code configurations |
.github/ | GitHub workflows and repo config |
packages/ | The actual source code (see below) |
Within the packages folder, we have a dir (sub-project) for each major part of Pixelflare:
| Package | Description |
|---|---|
packages/api | Hono-based API running on Cloudflare Workers |
packages/frontend | SvelteKit frontend |
packages/shared | Shared types and utilities |
packages/config | Shared configuration constants |
packages/database | Database migrations and schema |
packages/i18n | Internationalization strings |
packages/gateway | CDN gateway worker |
packages/docs | This documentation site |
packages/tooling | Shared ESLint, Prettier, TypeScript configs |