# Publishing JSX/React Artifacts Online Single-file React components (JSX) can be published as standalone web pages via the NUC's artifacts infrastructure. ## How It Works ``` Public Internet → Tailscale Funnel (:443) → Traefik → artifacts-web (nginx) → /opt/artifacts/ ``` - **Funnel URL:** `https://alezmad-nuc.tail58f5ad.ts.net/artifacts//` - **LAN URL:** `https://artifacts.nuc.lan//` - **Nginx container:** `artifacts-web` (image: `nginx:alpine`, read-only mount of `/opt/artifacts`) - **Traefik public route:** `Host(alezmad-nuc.tail58f5ad.ts.net) && PathPrefix(/artifacts)` → strips `/artifacts` → `artifacts-web:80` - **Config file:** `/traefik/dynamic/nuc-services-public.yaml` (inside `coolify-proxy` container) ## Quick Publish Steps ```bash # 1. Build self-contained HTML from JSX # - Replace `import { useState, ... } from "react"` with `const { useState, ... } = React;` # - Remove `export default ComponentName;` # - Wrap in HTML with React 18 CDN + Babel standalone # - Add `ReactDOM.createRoot(root).render()` at the end # 2. Copy to NUC artifacts directory ssh nuc "echo '7vXHpSTD.' | sudo -S mkdir -p /opt/artifacts/" scp /tmp/build/index.html nuc:~/tmp-artifact.html ssh nuc "echo '7vXHpSTD.' | sudo -S mv ~/tmp-artifact.html /opt/artifacts//index.html" ssh nuc "echo '7vXHpSTD.' | sudo -S chmod 644 /opt/artifacts//index.html" # 3. Done! No server restart needed — nginx serves it immediately. ``` ## HTML Template for JSX Files ```html TITLE
``` ## Build Script (for large JSX files) ```bash # Automated: strips import/export, wraps in HTML cat > /tmp/build.html << 'HEADER'
FOOTER ``` ## Currently Published | Path | Source | Public URL | |------|--------|------------| | `/opt/artifacts/checkin/` | `arrio/.scratch/checkin_demo_v1.jsx` | `https://alezmad-nuc.tail58f5ad.ts.net/artifacts/checkin/` |