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
- Run
npm install. - Run
npm run dev. - 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
- Create a folder
public/projects/<slug>/. - Put equirectangular panoramas in that folder. Use a 2:1 image. A width of 4096 to 8192 pixels is a good range.
- Add
project.json. See the README in the repository for the schema. - Add the slug to
KNOWN_PROJECTSinsrc/lib/projects.tsif the landing page must list it.
Password
- Create a SHA-256 hash of the password. Do not add a newline.
- Set
VITE_PROJECT_AUTHto a JSON map of slug to hash. - 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.