Deployment & Docker
Relevant source files
The following files were used as context for generating this wiki page:
Rocreate is designed for high-performance web-based painting and supports multiple deployment strategies, ranging from local development environments to containerized production instances and serverless platforms like Vercel. The architecture utilizes the Bun runtime for package management and development tooling, while relying on Parcel for bundling assets into static distributions.
The project can be deployed in two primary modes: a standalone application (equivalent to the kleki.com experience) or an embedded widget (as seen on drawing community sites). The deployment pipeline ensures that graphics-heavy dependencies, specifically CanvasKit (Skia WASM), are correctly bundled and served to provide GPU-accelerated rendering across different environments.
Sources: README.md, CLAUDE.md, prompt.md
Containerization with Docker
The project provides a standardized Docker configuration to run the standalone version of the application. This ensures environment parity between development and production.
Docker Architecture
The Docker setup utilizes docker-compose to manage the lifecycle of the container. By default, the application is exposed on port 5050. The containerization process typically involves building the application from source using the defined build scripts before serving the static assets.
The diagram shows the lifecycle from source code to a running container accessible via a local port.
Sources: README.md:38-44, CLAUDE.md:15
Docker Management Commands
| Command | Description |
|---|---|
docker-compose build | Builds the Docker image based on project root configurations. |
docker-compose up -d | Starts the standalone application in a detached container. |
Sources: README.md:40-42, CLAUDE.md:15
Build Pipeline & Environments
The deployment process is heavily integrated with Bun and Parcel. Before deployment, specific build steps must be executed to generate the necessary assets and localization files.
Critical Pre-deployment Steps
A unique requirement for Rocreate is the generation of language files. The application cannot run correctly without first building the i18n modules.
- Language Build:
bun run lang:build(ornpm run lang:build) must be executed to compile JSON5 translation sources into TypeScript/JSON files located insrc/app/languages/. - Asset Bundling: Parcel is used to bundle the application. Standalone and embed versions have separate entry points.
Visual representation of the build pipeline where language generation is a prerequisite for all distribution types.
Sources: CLAUDE.md:11-14, README.md:27-33, package.json:11-19
Environment Configurations
Rocreate supports specific environment flags to toggle features during the build or development process:
- DEV_MODE: When set to
true(viabun run dev), the application enables Hot Module Replacement (HMR) and internal development tools. - Vercel Compatibility: The architecture is explicitly designed to be Vercel-compatible, ensuring that build scripts and static paths align with Vercel's serverless deployment patterns.
Sources: CLAUDE.md:10, prompt.md:11, 40
Distribution Targets
The project generates several distinct build targets found in the package.json scripts, each serving a different deployment use case.
| Target | Build Command | Output | Description |
|---|---|---|---|
| Standalone | bun run build | /dist/index.html | The full-featured painting application. |
| Embed | bun run build:embed | /dist/embed.js | A script version for integration into other websites. |
| Help Page | bun run build:help | /dist/help.html | The documentation page accessible via the UI. |
Sources: package.json:13-16, README.md:31-33
Summary
Deployment of Rocreate requires a two-step process: first, the generation of localized language assets using Bun, and second, the bundling of the application via Parcel into the /dist/ directory. For containerized environments, the provided Docker configuration automates the serving of the standalone application on port 5050. The system's compatibility with Vercel and its dual-target build system (standalone vs. embed) allows it to be deployed as either a primary web application or a secondary creative tool within larger platforms.
Sources: README.md, CLAUDE.md, package.json