README.md

Photosphere dev-frontend

This is the development frontend for the Photosphere application. Built on React and bundled with Vite.

Project Structure

dev-frontend/
├── src/
│   ├── index.tsx                              # React entry point
│   ├── app.tsx                                # Main app component
│   ├── tailwind.css                           # Tailwind CSS
│   ├── lib/
│   │   ├── task-queue-provider-websocket.ts   # WebSocket task queue provider
│   │   ├── worker-backend-websocket.ts        # WebSocket worker backend
│   │   └── use-web-socket.ts                  # WebSocket hook
│   └── test/
│       └── e2e/
│           └── frontend.test.ts               # E2E tests
├── index.html                                 # HTML template
├── package.json
├── vite.config.ts                             # Vite configuration
├── tailwind.config.js                         # Tailwind configuration
├── postcss.config.js                          # PostCSS configuration
└── tsconfig.json

Setup

First, follow the instructions in the main readme.

Then open a terminal and change directory to the dev-frontend project:

cd apps/dev-frontend

To enable the frontend you must first run the dev-server.

Run the Vite dev server

Run the dev server like this:

bun start

Then click the link or point your browser at the default location for Vite: http://localhost:8080.

Build the static web page

Set the VITE_BASE_URL environment variable to point the frontend to the backend:

export VITE_BASE_URL=http://localhost:3000

Or on Windows:

set VITE_BASE_URL=http://localhost:3000

Build the project to a static web page like this:

bun run build

The static web page is output to the dist subdirectory.

Test the static web page

After building the static web page, you can test it locally using live-server.

First install live-server globally:

pnpm install -g live-server

Now change into the directory where the static web page is generated:

cd dist

From here, start live-server:

live-server

The web page should automatically be displayed in your browser.

Run the frontend locally in production mode

Compile the whole project:

bun run compile

Compile in watch mode in another terminal, if you want to make changes to the code while it is running:

bun run compile:watch

Set environment variables:

export VITE_BASE_URL=<photosphere-api-url>

Run it in prod mode:

cd photosphere/dev-frontend
bun run start:prod

Run automated tests

bun test

Run e2e tests

bun run test-e2e

Enable this to debug with Playwright:

export PWDEBUG=1

Or on Windows:

set PWDEBUG=1

Environment variables

• VITE_NODE_ENV - Set to "production" for production use.
• VITE_BASE_URL - Sets the URL for the connection to the backend.