Web Deployment (Vercel)
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Dotorixel is deployed as a high-performance web application using the Vercel platform. The deployment architecture leverages a Single Page Application (SPA) model built with SvelteKit and integrated with a Rust-based core compiled to WebAssembly (WASM). This setup ensures cross-platform consistency by sharing the same core logic between the web shell and native Apple platforms.
The deployment process is fully automated through GitHub integration, triggering builds and deployments on every push to the main branch. The infrastructure is configured to handle modern web requirements, including strict security headers, WASM execution, and privacy-friendly analytics.
Sources: CLAUDE.md:1-20, tasks/records/001-pre-workflow-migration.md:55-58
Build Architecture
The build process for Vercel is unique as it requires a multi-toolchain environment. It must install the Rust target for WebAssembly, fetch the wasm-pack installer, and then execute the Bun-based build script to compile both the Rust core and the SvelteKit frontend.
Build Pipeline Flow
The following diagram illustrates the sequence of operations performed during a Vercel deployment:
The build command ensures that the Rust environment is prepared before SvelteKit attempts to bundle the application.
Sources: vercel.json:3-5, package.json:6-9
Build Configuration
| Property | Value | Description |
|---|---|---|
| Build Command | `rustup target add wasm32-unknown-unknown && curl ... wasm-pack | sh && bun run build` |
| Install Command | bun install | Uses the Bun package manager for dependency resolution. |
| Output Directory | build | The location where the static site adapter places generated files. |
| Framework | null | Explicitly set to null to bypass automatic framework detection. |
Sources: vercel.json:1-9, package.json:10-12
Infrastructure and Routing
Dotorixel utilizes adapter-static with a fallback configuration to support Single Page Application (SPA) behavior on Vercel. This is necessary because Vercel's serverless environment needs to redirect all route requests to the central index.html entry point.
SPA Configuration
In svelte.config.js, the application is configured with fallback: 'index.html' to ensure that deep links (e.g., /pebble or /ko/pixel) serve the main application shell which then handles routing on the client side. Additionally, paths.relative is set to false to prevent asset 404 errors when navigating through locale-prefixed URL paths like /en/ or /ja/.
Sources: svelte.config.js:1-15, tasks/records/036-i18n-paraglide.md:15-20
Routing Rules
| Source | Destination | Purpose |
|---|---|---|
/(.*) | /index.html | Rewrites all incoming paths to the root index for SPA routing support. |
Sources: vercel.json:10-12
Security and Analytics
The deployment includes a robust Content Security Policy (CSP) defined in vercel.json to protect the application while allowing necessary external integrations.
Content Security Policy (CSP)
The CSP is configured to handle the specific needs of a WASM-powered pixel editor:
- WASM Execution:
script-srcincludes'wasm-unsafe-eval'to allowWebAssembly.instantiate()in modern browsers. - Analytics: Integration with Umami Cloud requires allowing
https://cloud.umami.isin bothscript-srcandconnect-src. - Data Handling:
img-srcallowsblob:anddata:schemes to support canvas PNG exports. - Styling:
style-srcallows'unsafe-inline'for Svelte-generated component styles and specific CDNs for fonts.
Sources: vercel.json:13-25, tasks/records/038-privacy-friendly-analytics.md:70-90
Analytics Integration
Dotorixel uses Umami Cloud for privacy-friendly analytics. The system uses Vercel environment variables to activate the tracking script only in production environments.
The tracking activates dynamically based on the presence of PUBLIC_UMAMI_WEBSITE_ID and PUBLIC_UMAMI_SRC in the Vercel dashboard.
Sources: tasks/records/038-privacy-friendly-analytics.md:15-40, vercel.json:17-20
Deployment Summary
The Web Deployment system for Dotorixel on Vercel provides a secure, performant, and automated hosting environment. By combining a custom Rust/WASM build pipeline with SvelteKit's static adapter and SPA routing, the project maintains a lightweight yet powerful presence on the web that serves as the primary platform for users.