canva-local-dev-loop

# Canva Local Dev Loop ## Overview Set up a fast local development environment for Canva Connect API integrations with a token management server, mock API for testing, and hot reload. ## Prerequisites - Completed `canva-install-auth` setup - Node.js 18+ with npm/pnpm - ngrok or similar tunnel for OAuth callbacks (or use localhost with Canva dev settings) ## Instructions ### Step 1: Project Structure ``` my-canva-app/ ├── src/ │ ├── canva/ │ │ ├── client.ts # REST client wrapper (from canva-sdk-patterns) │ │ ├── auth.ts # OAuth PKCE flow │ │ └── types.ts # API response types │ ├── routes/ │ │ ├── auth.ts # OAuth callback handler │ │ └── designs.ts # Design CRUD routes │ └── index.ts ├── tests/ │ ├── canva-mock.ts # Mock Canva API server │ └── designs.test.ts ├── .env.local # Local secrets (git-ignored) ├── .env.example # Template for team ├── package.json └── tsconfig.json ``` ### Step 2: Environment Setup ```bash # .env.example CANVA_CLIENT_ID= CANVA_CLIENT_SECRET= CANVA_REDIRECT_URI=http://localhost:3000/auth/canva/callback PORT=3000 # Copy and fill in cp .env.example .env.local ``` ### Step 3: OAuth Callback Server ```typescript // src/routes/auth.ts import express from 'express'; import { generatePKCE, getAuthorizationUrl, exchangeCodeForToken } from '../canva/auth'; const router = express.Router(); const pkceStore = new Map<string, string>(); // state → verifi...