Installation & Development Setup
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Rocreate is a high-performance graphics application built with TypeScript and Bun, utilizing CanvasKit (Skia WASM) for GPU acceleration. The development environment is designed to support both standalone and embedded versions of the application, requiring specific initialization steps for language asset generation and runtime configuration.
Sources: prompt.md:1-12, CLAUDE.md:1-6
The project uses Bun as its primary package manager and runtime, though it maintains compatibility with npm for legacy workflows. Developers must ensure that the graphics environment is correctly initialized to prevent runtime exceptions related to Skia WASM or large canvas buffers.
Sources: prompt.md:10-22, package.json:16-28
System Requirements & Tech Stack
The development environment is centered around modern web technologies and specific high-performance rendering libraries.
| Component | Technology | Description |
|---|---|---|
| Runtime | Bun / Node.js | Primary execution environment and package management. |
| Language | TypeScript | Used in strict mode for high type safety. |
| Bundler | Parcel | Handles asset orchestration and HMR. |
| Rendering | CanvasKit (Skia) | GPU-accelerated rendering kernel. |
| Testing | Vitest | Unit testing framework. |
Sources: prompt.md:14-22, package.json:30-50, CLAUDE.md:8-12
Installation Procedure
The following diagram illustrates the standard workflow for preparing the development environment.
The application requires a mandatory language build step before it can be run, as localization files are generated from JSON5 sources.
Sources: README.md:22-30, CLAUDE.md:14-21
Package Initialization
Dependencies can be installed using either Bun or npm. Bun is the recommended tool for Rocreate development to ensure consistency with the Vercel-compatible architecture.
# Recommended
bun install
# Alternative
npm ci
Sources: prompt.md:14, README.md:22, package.json:16-28
Language File Generation
Rocreate uses a custom localization system where JSON5 source files in src/languages/ are compiled into TypeScript and JSON assets. This step must be performed before the first run.
bun run lang:build
Sources: CLAUDE.md:17, src/languages/generate.js:137-184
Development Workflow
Starting the Development Server
The project utilizes Parcel's Hot Module Replacement (HMR) for rapid development. The dev command sets the DEV_MODE=true environment variable, enabling internal developer tools.
| Command | Action |
|---|---|
bun run start | Standard development server (standalone). |
bun run dev | Dev server with DEV_MODE=true and HMR. |
bun run build:embed | Compiles the embedded widget version. |
Sources: CLAUDE.md:14-16, package.json:17-18
Development Tools
When running in DEV_MODE, the application initializes an internal suite of tools via initDevTools(). These tools facilitate debugging without requiring full page reloads.
export function initDevTools(): void {
if (!IS_DEV_MODE) return;
initElementInspector();
console.log('%c RoCreate Development Mode', 'color: #4a9eff; font-size: 16px;');
console.log('%c 📌 Ctrl+Shift+G → Element Inspector', 'color: #888;');
}
Sources: src/app/script/dev/index.ts:15-28
Localization Development
Adding or modifying languages requires interaction with the generate.js utility.
- Adding a language:
bun run lang:add <code>initializes a new file from the English base. - Synchronizing:
bun run lang:syncensures all translation files contain the keys present in the English base. - Verification:
npm run lang:build -- --missingidentifies untranslated keys.
Sources: README.md:46-75, src/languages/generate.js:189-204
Testing & Quality Assurance
The project uses Vitest for unit testing. Developers are encouraged to run tests to ensure that canvas manipulation logic and base utilities remain stable.
bun run test: Starts Vitest in watch mode.bun run test:run: Executes tests once for CI/CD.
Sources: package.json:23-24, prompt.md:25-30
Docker Environment
For consistent standalone deployment, a Docker Compose configuration is provided.
docker-compose build
docker-compose up -d
The application is then accessible at http://localhost:5050.
Sources: README.md:37-41, CLAUDE.md:21
Summary
The Rocreate development setup is a Bun-centric environment that prioritizes high-performance rendering via CanvasKit. Successful setup requires dependency installation, mandatory language asset generation, and use of the specific dev script to enable built-in diagnostic tools.
Sources: prompt.md:10-22, CLAUDE.md:14-25