Skip to content

Local Development

The frontend dev server proxies API requests to the Express server, so both need to be running.

Prerequisites

Clone and Install

bash
git clone https://github.com/akifbayram/openbin.git
cd openbin
npm install          # Install frontend dependencies
cd server && npm install  # Install server dependencies

Run Both Servers

Open two terminal windows.

Terminal 1 — API server:

bash
cd server && npm run dev

The Express API starts at http://localhost:1453.

Terminal 2 — Frontend dev server:

bash
npm run dev

The Vite dev server starts at http://localhost:5173. Open this address in your browser.

How the proxy works

The Vite dev server proxies all /api requests to http://localhost:1453 automatically. You only ever open http://localhost:5173 in your browser during development.

Environment Variables

Copy .env.example to a new .env file in the project root and uncomment the variables you need:

bash
cp .env.example .env

Key variables for local development:

VariableDefaultNotes
DATABASE_PATH./data/openbin.dbSQLite file path; created automatically on first run
CORS_ORIGINhttp://localhost:5173Must match the Vite dev server URL
PORT1453Express server port
REGISTRATION_MODEopenopen, invite (require invite code), or closed (no sign-ups)

TIP

For most local development workflows you do not need a .env file at all. The defaults work with the standard Vite + Express setup.

Type Checking

Run type checks before committing to catch errors across both packages:

bash
# Frontend
npx tsc --noEmit

# Server
cd server && npx tsc --noEmit

WARNING

Always run npx tsc --noEmit on the frontend before submitting changes. The project uses TypeScript strict mode, and type errors will block the production build.

Tests

The project uses Vitest with happy-dom. Run the full test suite:

bash
npx vitest run

Run a specific test file:

bash
npx vitest run src/features/bins/__tests__/useBins.test.ts

Tests mock apiFetch from @/lib/api and useAuth from @/lib/auth. No running server or database is needed to execute tests.

Production Build

Build the frontend for production:

bash
npx vite build

The output lands in dist/. In production (and in Docker), Express serves this directory as static files.

Linting

The project uses Biome for linting and formatting — not ESLint or Prettier.

bash
npx biome check src/

To apply auto-fixes:

bash
npx biome check --write src/

INFO

The biome.json in the project root contains all lint and format rules. Do not add ESLint or Prettier configuration files.

Open source on GitHub