SBF Innovation Lab Wiki
ApplicationsStage Preview

Development

How to develop Stage Preview

Clone superbonfire-lab/stage-preview. The stack is React 19, Vite 8, TypeScript, Tailwind v4, @egjs/view360, and react-router.

Start locally

  1. Run npm install.
  2. Run npm run dev.
  3. Open http://localhost:5173.

Demo projects:

  • /p/seer-stage — many scenes and roles.
  • /p/demo-arena — one panorama.

Gyro tests on iOS need HTTPS.

Add a project

  1. Create a folder public/projects/<slug>/.
  2. Put equirectangular panoramas in that folder. Use a 2:1 image. A width of 4096 to 8192 pixels is a good range.
  3. Add project.json. See the README in the repository for the schema.
  4. Add the slug to KNOWN_PROJECTS in src/lib/projects.ts if the landing page must list it.

Password

  1. Create a SHA-256 hash of the password. Do not add a newline.
  2. Set VITE_PROJECT_AUTH to a JSON map of slug to hash.
  3. Rebuild. Vite writes the value into the bundle.

Set VITE_DEFAULT_PROJECT to hide the landing list and send / to one project.

Host

The origin must send unknown paths to index.html. Shared links to /p/:slug and /preview fail without that SPA fallback. The Dockerfile uses nginx try_files.

VITE_* values are build-time values. Change them, then rebuild the image.

Current deployment

The app is deployed to https://stage.superbonfire.tech through Coolify on our Tencent Cloud VPS.

On this page