Initial setup of Excalidraw Desktop Wrapper and self-hosted server. Added .gitignore, README, Dockerfile, and configuration files for Tauri app. Implemented basic app structure with URL validation and server connection functionality.

isaaclins · isaaclins · commit 223d2ea82829 · 2025-10-14T16:11:14.000+02:00
diff --git a/.cursor/ndjson-ingest.json b/.cursor/ndjson-ingest.json
@@ -0,0 +1,4 @@
+{
+  "externalUrl": "http://127.0.0.1:64115/ingest",
+  "logPath": "/Users/isaaclins/Documents/github/excalidraw-app/.cursor/debug.log"
+}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  push:
+    tags: ["v*.*.*"]
+  pull_request: {}
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: dtolnay/rust-toolchain@stable
+      - name: Install Linux deps
+        if: matrix.os == 'ubuntu-latest'
+        run: sudo apt-get update && sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+      - name: Install frontend deps
+        run: cd app && npm ci
+      - name: Run tests
+        run: cd app && npm test --if-present
+      - name: Build Tauri app
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+app/node_modules
+app/dist
+app/.DS_Store
+.DS_Store
+app/src-tauri/target
+app/src-tauri/.fingerprint
+app/src-tauri/Cargo.lock
+app/src-tauri/.cargo
+*.log
diff --git a/README.md b/README.md
@@ -1 +1,47 @@
-# excalidraw-app 
+# Excalidraw Desktop Wrapper + Self-hosted Server (Render)
+
+This repository contains:
+
+- `app/`: A Tauri desktop app that opens a user-configured Excalidraw Server URL.
+- `server/`: A Dockerized self-hosted Excalidraw server suitable for Render with WebSockets for real-time collaboration.
+
+## Quick Start (Desktop)
+
+1. Install prerequisites: Node 20+, Rust (stable), Tauri deps.
+2. Install deps and run:
+
+   ```bash
+   cd app
+   npm ci
+   npm run dev
+   ```
+
+3. Enter your deployed server URL (HTTPS) and click Save & Launch.
+
+## Deploy the Server on Render
+
+You can deploy the server in the `/server` directory using Render.
+
+- Render will detect `render.yaml` at the repo root and build using `/server` as the root directory via `rootDir`.
+- After deployment, copy the service URL (e.g., `https://your-app.onrender.com`) into the desktop app.
+
+### Manual steps on Render
+
+1. New Web Service → Select this GitHub repo.
+2. Root Directory: `/server`.
+3. Runtime: Docker → `server/Dockerfile`.
+4. Environment:
+   - `PORT=3000`
+   - `STORAGE_TYPE=filesystem` (or `sqlite` / `s3`)
+   - `STORAGE_PATH=/data`
+5. Add persistent disk: name `data`, mount `/data`, size `1GB`.
+6. Create service. Use the URL shown for the desktop app.
+
+## CI (GitHub Actions)
+
+Pushing a tag `v*.*.*` will build installers for Windows, macOS, and Linux and publish to GitHub Releases.
+
+## Security Notes
+
+- The app requires an HTTPS server URL and restricts Content Security Policy accordingly.
+- For small teams (2–5 users), `filesystem` or `sqlite` storage with a small disk is sufficient.
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Excalidraw Wrapper</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https: wss:; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'" />
+  </head>
+  <body>
+    <div id="app" style="max-width: 720px; margin: 40px auto; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';">
+      <h1 style="margin: 0 0 16px;">Excalidraw Server URL</h1>
+      <p style="color: #444; margin: 0 0 16px;">Enter the HTTPS URL of your self‑hosted Excalidraw server (Render).</p>
+      <form id="settings-form" style="display: flex; gap: 8px; align-items: center;">
+        <input id="serverUrl" type="url" placeholder="https://your-app.onrender.com" required style="flex: 1; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px;" />
+        <button type="submit" style="padding: 10px 14px; border: 0; border-radius: 6px; background: #0ea5e9; color: #fff; cursor: pointer;">Save & Launch</button>
+      </form>
+      <button id="changeServer" style="margin-top: 10px; display: none; padding: 8px 12px; border-radius: 6px; border: 1px solid #ddd; background: #fafafa; cursor: pointer;">Change server</button>
+      <p id="error" style="color: #b91c1c; margin-top: 12px;"></p>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+  </html>
+
+
diff --git a/app/package.json b/app/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "excalidraw-wrapper",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-store": "^2.0.0"
+  },
+  "devDependencies": {
+    "vitest": "^2.0.5",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.0"
+  }
+}
+
diff --git a/app/src-tauri/Cargo.toml b/app/src-tauri/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "excalidraw_wrapper"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-store = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+
diff --git a/app/src-tauri/build.rs b/app/src-tauri/build.rs
@@ -0,0 +1,5 @@
+fn main() {
+  tauri_build::build()
+}
+
+
diff --git a/app/src-tauri/src/main.rs b/app/src-tauri/src/main.rs
@@ -0,0 +1,39 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+use tauri::{AppHandle, Manager, WebviewUrl, WebviewWindowBuilder};
+
+#[tauri::command]
+async fn open_server_window(app: AppHandle, url: String) -> Result<(), String> {
+  let label = "excalidraw";
+  if let Some(existing) = app.get_webview_window(label) {
+    let _ = existing.set_url(WebviewUrl::External(url.parse().map_err(|_| "invalid url")?));
+    let _ = existing.set_focus();
+    return Ok(());
+  }
+
+  WebviewWindowBuilder::new(
+    &app,
+    label,
+    WebviewUrl::External(url.parse().map_err(|_| "invalid url")?),
+  )
+  .title("Excalidraw")
+  .build()
+  .map_err(|e| e.to_string())?;
+
+  // Close settings window if present
+  if let Some(settings) = app.get_webview_window("settings") {
+    let _ = settings.close();
+  }
+
+  Ok(())
+}
+
+fn main() {
+  tauri::Builder::default()
+    .plugin(tauri_plugin_store::Builder::default().build())
+    .invoke_handler(tauri::generate_handler![open_server_window])
+    .run(tauri::generate_context!())
+    .expect("error while running tauri application");
+}
+
+
diff --git a/app/src-tauri/tauri.conf.json b/app/src-tauri/tauri.conf.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/main/schemas/tauri.schema.json",
+  "productName": "Excalidraw Wrapper",
+  "version": "0.1.0",
+  "identifier": "com.yourorg.excalidraw_wrapper",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:5173"
+  },
+  "app": {
+    "windows": [
+      {
+        "label": "settings",
+        "title": "Excalidraw Server",
+        "width": 720,
+        "height": 420,
+        "resizable": true,
+        "fullscreen": false,
+        "url": "/index.html",
+        "useHttpsScheme": true
+      }
+    ]
+  },
+  "security": {
+    "csp": "default-src 'self'; connect-src 'self' https: wss:; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "identifier": "com.yourorg.excalidraw_wrapper"
+  }
+}
+
+
diff --git a/app/src/main.ts b/app/src/main.ts
@@ -0,0 +1,63 @@
+import { Store } from '@tauri-apps/plugin-store'
+import { invoke } from '@tauri-apps/api/core'
+
+const store = new Store('settings.json')
+
+function setError(message: string) {
+  const el = document.getElementById('error') as HTMLParagraphElement | null
+  if (el) el.textContent = message
+}
+
+function isValidHttpsUrl(value: string): boolean {
+  try {
+    const u = new URL(value)
+    return u.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+async function init() {
+  const input = document.getElementById('serverUrl') as HTMLInputElement
+  const form = document.getElementById('settings-form') as HTMLFormElement
+  const changeBtn = document.getElementById('changeServer') as HTMLButtonElement
+
+  const existing = (await store.get<string>('serverUrl')) || ''
+  if (existing) {
+    input.value = existing
+    changeBtn.style.display = 'inline-block'
+    // Try launching directly on load if a URL exists
+    tryLaunch(existing)
+  }
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault()
+    const url = input.value.trim()
+    if (!isValidHttpsUrl(url)) {
+      setError('Please enter a valid HTTPS URL (e.g., https://your-app.onrender.com).')
+      return
+    }
+    await store.set('serverUrl', url)
+    await store.save()
+    setError('')
+    await tryLaunch(url)
+  })
+
+  changeBtn.addEventListener('click', async () => {
+    input.focus()
+  })
+}
+
+async function tryLaunch(url: string) {
+  try {
+    // Quick reachability check
+    await fetch(url, { method: 'HEAD', mode: 'no-cors' }).catch(() => {})
+    await invoke('open_server_window', { url })
+  } catch (e) {
+    setError('Failed to open server window. Check the URL and network/TLS.')
+  }
+}
+
+init()
+
+
diff --git a/app/src/validateUrl.test.ts b/app/src/validateUrl.test.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { validateHttpsUrl } from './validateUrl'
+
+describe('validateHttpsUrl', () => {
+  it('rejects empty', () => {
+    expect(validateHttpsUrl('')).toEqual({ ok: false, reason: 'empty' })
+  })
+
+  it('rejects non-https', () => {
+    expect(validateHttpsUrl('http://example.com')).toEqual({ ok: false, reason: 'not_https' })
+  })
+
+  it('rejects invalid', () => {
+    expect(validateHttpsUrl('not a url')).toEqual({ ok: false, reason: 'invalid' })
+  })
+
+  it('accepts https', () => {
+    expect(validateHttpsUrl('https://example.com')).toEqual({ ok: true })
+  })
+})
+
+
diff --git a/app/src/validateUrl.ts b/app/src/validateUrl.ts
@@ -0,0 +1,13 @@
+export function validateHttpsUrl(candidate: string): { ok: boolean; reason?: string } {
+  const value = candidate.trim()
+  if (!value) return { ok: false, reason: 'empty' }
+  try {
+    const u = new URL(value)
+    if (u.protocol !== 'https:') return { ok: false, reason: 'not_https' }
+    return { ok: true }
+  } catch {
+    return { ok: false, reason: 'invalid' }
+  }
+}
+
+
diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "types": ["vitest", "@tauri-apps/api"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
+
+
diff --git a/app/vite.config.ts b/app/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    port: 5173,
+    strictPort: true
+  },
+  build: {
+    outDir: 'dist'
+  },
+  base: './'
+})
+
+
diff --git a/render.yaml b/render.yaml
@@ -0,0 +1,18 @@
+services:
+  - type: web
+    name: excalidraw-server
+    env: docker
+    rootDir: server
+    plan: starter
+    autoDeploy: true
+    envVars:
+      - key: PORT
+        value: 3000
+      - key: STORAGE_TYPE
+        value: filesystem
+      - key: STORAGE_PATH
+        value: /data
+    disk:
+      name: data
+      mountPath: /data
+      sizeGB: 1
diff --git a/server/Dockerfile b/server/Dockerfile
diff --git a/server/README.md b/server/README.md

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "externalUrl": "http://127.0.0.1:64115/ingest",
 +  "logPath": "/Users/isaaclins/Documents/github/excalidraw-app/.cursor/debug.log"
 +}