@canva/cli 1.11.0 → 1.13.0

package/templates/gen_ai/backend/server.ts

@@ -1,9 +1,19 @@
 import cors from "cors";
 import express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
+import { createJwtMiddleware } from "../utils/backend/jwt_middleware/index";
 import { createImageRouter } from "./routers/image";
 
 async function main() {
+  // TODO: Set the CANVA_APP_ID environment variable in the project's .env file
+  const APP_ID = process.env.CANVA_APP_ID;
+
+  if (!APP_ID) {
+    throw new Error(
+      `The CANVA_APP_ID environment variable is undefined. Set the variable in the project's .env file.`,
+    );
+  }
+
   const router = express.Router();
 
   /**
@@ -36,6 +46,13 @@ async function main() {
    */
   router.use(cors());
 
+  /**
+   * Initialize JWT middleware to verify Canva user tokens
+   * This middleware validates tokens sent from the frontend and extracts user information
+   */
+  const jwtMiddleware = createJwtMiddleware(APP_ID);
+  router.use(jwtMiddleware);
+
   /**
    * Add routes for image generation.
    */

package/templates/gen_ai/package.json

@@ -19,20 +19,20 @@
   },
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
-    "@canva/app-i18n-kit": "^1.1.1",
-    "@canva/app-ui-kit": "^5.2.1",
-    "@canva/asset": "^2.2.1",
-    "@canva/design": "^2.7.3",
+    "@canva/app-i18n-kit": "^1.2.0",
+    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/asset": "^2.3.0",
+    "@canva/design": "^2.7.5",
     "@canva/error": "^2.1.0",
     "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.2.0",
-    "@canva/user": "^2.1.1",
+    "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
     "html-react-parser": "5.2.6",
     "obscenity": "0.4.4",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-error-boundary": "6.0.0",
     "react-intl": "^7.1.11",
     "react-router-dom": "7.8.2"

package/templates/gen_ai/src/api/api.ts

@@ -1,3 +1,4 @@
+import { auth } from "@canva/user";
 import { POLLING_INTERVAL_IN_SECONDS } from "src/config";
 
 /**
@@ -167,8 +168,11 @@ export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
  * @returns {Promise<Object>} - A promise that resolves to the response body.
  */
 const sendRequest = async <T>(url: URL, options?: RequestInit): Promise<T> => {
+  const userToken = await auth.getCanvaUserToken();
+
   const res = await fetch(url, {
     headers: {
+      Authorization: `Bearer ${userToken}`,
       ...options?.headers,
     },
     ...options,

package/templates/gen_ai/webpack.config.ts

@@ -62,7 +62,6 @@ export function buildConfig({
     resolve: {
       alias: {
         assets: path.resolve(process.cwd(), "assets"),
-        utils: path.resolve(process.cwd(), "utils"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },

package/templates/hello_world/package.json

@@ -20,16 +20,16 @@
   },
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
-    "@canva/app-i18n-kit": "^1.1.1",
-    "@canva/app-ui-kit": "^5.2.1",
-    "@canva/asset": "^2.2.1",
-    "@canva/design": "^2.7.3",
+    "@canva/app-i18n-kit": "^1.2.0",
+    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/asset": "^2.3.0",
+    "@canva/design": "^2.7.5",
     "@canva/error": "^2.1.0",
     "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.2.0",
-    "@canva/user": "^2.1.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "@canva/user": "^2.1.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "react-intl": "^7.1.11"
   },
   "devDependencies": {

package/templates/hello_world/webpack.config.ts

@@ -62,7 +62,6 @@ export function buildConfig({
     resolve: {
       alias: {
         assets: path.resolve(process.cwd(), "assets"),
-        utils: path.resolve(process.cwd(), "utils"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },

package/templates/mls/README.md

@@ -0,0 +1,81 @@
+# Real Estate MLS App
+
+## Running this app
+
+### Step 1: Start the local development server
+
+To start the development server, run the following command:
+
+```bash
+npm install
+npm start
+```
+
+The server becomes available at <http://localhost:8080>.
+
+The app's source code is in the `src/app.tsx` file.
+
+### Step 2: Preview the app
+
+The local development server only exposes a JavaScript bundle, so you can't preview an app by visiting <http://localhost:8080>. You can only preview an app via the Canva editor.
+
+To preview an app:
+
+1. Create an app via the [Developer Portal](https://www.canva.com/developers/apps).
+2. Select **App source > Development URL**.
+3. In the **Development URL** field, enter the URL of the development server.
+4. Click **Preview**. This opens the Canva editor (and the app) in a new tab.
+5. Click **Open**. (This screen only appears when using an app for the first time.)
+
+The app will appear in the side panel.
+
+<details>
+  <summary>Previewing apps in Safari</summary>
+
+By default, the development server is not HTTPS-enabled. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.
+
+**Why Safari requires the development server to be HTTPS-enabled?**
+
+Canva itself is served via HTTPS and most browsers prevent HTTPS pages from loading scripts via non-HTTPS connections. Chrome and Firefox make exceptions for local servers, such as `localhost`, but Safari does not, so if you're using Safari, the development server must be HTTPS-enabled.
+
+To learn more, see [Loading mixed-content resources](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources).
+
+To preview apps in Safari:
+
+1. Start the development server with HTTPS enabled:
+
+```bash
+npm start --use-https
+```
+
+2. Navigate to <https://localhost:8080>.
+3. Bypass the invalid security certificate warning:
+   1. Click **Show details**.
+   2. Click **Visit website**.
+4. In the Developer Portal, set the app's **Development URL** to <https://localhost:8080>.
+5. Click preview (or refresh your app if it's already open).
+
+You need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.
+
+</details>
+
+### Step 3 (Optional): Enable Hot Module Replacement
+
+By default, every time you make a change to an app, you have to reload the entire app to see the results of those changes. If you enable [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR), changes will be reflected without a full reload, which significantly speeds up the development loop.
+
+**Note:** HMR does **not** work while running the development server in a Docker container.
+
+To enable HMR:
+
+1. Navigate to an app via the [Your apps](https://www.canva.com/developers/apps).
+1. Select **Security** -> **Credentials** -> **.env file**.
+1. Copy the `.env` file contents.
+1. Paste the contents into the starter kit's `.env` file. For example:
+
+   ```bash
+   CANVA_APP_ORIGIN=https://app-aabbccddeeff.canva-apps.com
+   CANVA_HMR_ENABLED=true
+   ```
+
+1. Restart the local development server.
+1. Reload the app manually to ensure that HMR takes effect.

package/templates/mls/canva-app.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://www.canva.dev/schemas/app/v1/manifest-schema.json",
+  "manifest_schema_version": 1,
+  "runtime": {
+    "permissions": [
+      {
+        "name": "canva:design:content:read",
+        "type": "mandatory"
+      },
+      {
+        "name": "canva:design:content:write",
+        "type": "mandatory"
+      },
+      {
+        "name": "canva:asset:private:write",
+        "type": "mandatory"
+      }
+    ]
+  },
+  "intent": {
+    "design_editor": {
+      "enrolled": true
+    }
+  }
+}

package/templates/mls/declarations/declarations.d.ts

@@ -0,0 +1,29 @@
+declare module "*.css" {
+  const styles: { [className: string]: string };
+  export = styles;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: React.FunctionComponent<{
+    size?: "tiny" | "small" | "medium" | "large";
+    className?: string;
+  }>;
+  export default content;
+}
+
+declare const BACKEND_HOST: string;

package/templates/mls/eslint.config.mjs

@@ -0,0 +1,14 @@
+import canvaPlugin from "@canva/app-eslint-plugin";
+
+export default [
+  {
+    ignores: [
+      "**/node_modules/",
+      "**/dist",
+      "**/*.d.ts",
+      "**/*.d.tsx",
+      "**/*.config.*",
+    ],
+  },
+  ...canvaPlugin.configs.apps,
+];

package/templates/mls/jest.config.mjs

@@ -0,0 +1,36 @@
+import { pathsToModuleNameMapper } from "ts-jest";
+import tsconfig from "./tsconfig.json" with { type: "json" };
+
+const { compilerOptions } = tsconfig;
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+
+export default {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  testRegex: "(/(tests|__tests__)/.*\\.(tests))\\.tsx?$",
+  modulePathIgnorePatterns: ["./internal/", "./node_modules/"],
+  modulePaths: [compilerOptions.baseUrl],
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
+  transform: {
+    ".+\\.(css)$": "jest-css-modules-transform",
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        astTransformers: {
+          before: [
+            {
+              path: "@formatjs/ts-transformer/ts-jest-integration",
+              options: {
+                overrideIdFn: "[sha512:contenthash:base64:6]",
+                ast: true,
+              },
+            },
+          ],
+        },
+      },
+    ],
+  },
+  setupFiles: ["<rootDir>/jest.setup.ts"],
+  setupFilesAfterEnv: ["@testing-library/jest-dom"],
+};

package/templates/mls/jest.setup.ts

@@ -0,0 +1,37 @@
+// For usage information, see the README.md file.
+
+// Import Canva SDK testing utilities
+import * as asset from "@canva/asset/test";
+import * as design from "@canva/design/test";
+import * as error from "@canva/error/test";
+import * as platform from "@canva/platform/test";
+import * as user from "@canva/user/test";
+import { TextEncoder } from "util";
+
+// jsdom doesn't provide TextEncoder by default, so we polyfill it from Node's util module
+global.TextEncoder = TextEncoder as unknown as typeof global.TextEncoder;
+
+/*
+  Initialize test environments for each Canva SDK package
+  This sets up the necessary test infrastructure before mocking the actual SDK methods
+*/
+asset.initTestEnvironment();
+design.initTestEnvironment();
+error.initTestEnvironment();
+platform.initTestEnvironment();
+user.initTestEnvironment();
+
+/*
+  Mock all Canva SDK packages except @canva/error
+  This allows tests to run without making real API calls to Canva's services
+*/
+jest.mock("@canva/asset");
+jest.mock("@canva/design");
+jest.mock("@canva/platform");
+jest.mock("@canva/user");
+
+/*
+  Important: @canva/error should not be mocked
+  Use it to simulate API error responses from other mocks by throwing CanvaError instances
+  This allows testing of error handling scenarios
+*/

package/templates/mls/package.json

@@ -0,0 +1,117 @@
+{
+  "private": true,
+  "name": "real_estate_mls",
+  "description": "A Real Estate MLS reference app built with the Canva Apps SDK.",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "Canva Pty Ltd.",
+  "scripts": {
+    "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
+    "build": "webpack --config webpack.config.ts --mode production && npm run extract",
+    "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
+    "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
+    "format:file": "prettier $1 --no-config --write",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "lint:types": "tsc",
+    "start": "ts-node ./scripts/start/start.ts",
+    "start:preview": "npm run start -- --preview",
+    "test": "jest --no-cache",
+    "test:watch": "jest --watchAll",
+    "test:update": "npm run test -- -u",
+    "postinstall": "ts-node ./scripts/copy_env.ts"
+  },
+  "dependencies": {
+    "@canva/app-hooks": "^0.0.0-beta.4",
+    "@canva/app-i18n-kit": "^1.2.0",
+    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/asset": "^2.3.0",
+    "@canva/design": "^2.7.5",
+    "@canva/error": "^2.1.0",
+    "@canva/intents": "^2.0.0",
+    "@canva/platform": "^2.2.0",
+    "@canva/user": "^2.1.2",
+    "@tanstack/react-query": "5.87.1",
+    "@types/react-infinite-scroller": "1.2.5",
+    "clsx": "2.1.1",
+    "loglevel": "1.9.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-hook-form": "7.66.0",
+    "react-infinite-scroller": "1.2.6",
+    "react-intl": "^7.1.11",
+    "react-router-dom": "7.8.2"
+  },
+  "devDependencies": {
+    "@canva/app-eslint-plugin": "^1.0.0-beta.7",
+    "@canva/cli": ">= 0.0.1-beta.13",
+    "@formatjs/cli": "6.7.2",
+    "@formatjs/ts-transformer": "3.14.0",
+    "@ngrok/ngrok": "1.5.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
+    "@svgr/webpack": "8.1.0",
+    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/express": "4.17.21",
+    "@types/express-serve-static-core": "5.0.7",
+    "@types/jest": "29.5.14",
+    "@types/jsonwebtoken": "9.0.10",
+    "@types/node": "20.19.2",
+    "@types/node-fetch": "2.6.13",
+    "@types/node-forge": "1.3.14",
+    "@types/nodemon": "1.19.6",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.1",
+    "@types/webpack-env": "1.18.8",
+    "chalk": "4.1.2",
+    "cli-table3": "0.6.5",
+    "css-loader": "7.1.2",
+    "css-modules-typescript-loader": "4.0.1",
+    "cssnano": "7.1.1",
+    "debug": "4.4.1",
+    "dotenv": "16.6.0",
+    "express": "4.22.1",
+    "express-basic-auth": "1.2.1",
+    "jest": "29.7.0",
+    "jest-css-modules-transform": "4.4.2",
+    "jest-environment-jsdom": "29.7.0",
+    "jsonwebtoken": "9.0.2",
+    "jwks-rsa": "3.2.0",
+    "mini-css-extract-plugin": "2.9.4",
+    "node-fetch": "3.3.2",
+    "node-forge": "1.3.2",
+    "nodemon": "3.0.1",
+    "open": "8.4.2",
+    "postcss-loader": "8.1.1",
+    "prettier": "3.6.2",
+    "react-refresh": "0.17.0",
+    "style-loader": "4.0.0",
+    "terser-webpack-plugin": "5.3.14",
+    "tree-kill": "1.2.2",
+    "ts-jest": "29.4.1",
+    "ts-loader": "9.5.4",
+    "ts-node": "10.9.2",
+    "typescript": "5.9.2",
+    "url-loader": "4.1.1",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.2",
+    "yargs": "17.7.2"
+  },
+  "overrides": {
+    "react-infinite-scroller": {
+      "react": "$react"
+    }
+  },
+  "keywords": [
+    "canva-apps-sdk"
+  ],
+  "engines": {
+    "node": "^18 || ^20.10.0",
+    "npm": "^9 || ^10"
+  },
+  "canvaCliMetadata": {
+    "name": "@canva/cli",
+    "version": "1.1.0"
+  }
+}

package/templates/mls/scripts/copy_env.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+import fs from "fs";
+import path from "path";
+
+const envPath = path.resolve(__dirname, "..", ".env");
+const templatePath = path.resolve(__dirname, "..", ".env.template");
+
+if (!fs.existsSync(templatePath)) {
+  console.warn(".env.template file does not exist, skipping copy of .env file");
+} else if (!fs.existsSync(envPath)) {
+  fs.copyFileSync(templatePath, envPath);
+}

package/templates/mls/scripts/ssl/ssl.ts

@@ -0,0 +1,131 @@
+import crypto from "crypto";
+import fs from "fs/promises";
+import { pki } from "node-forge";
+import path from "path";
+
+const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
+const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");
+const KEY_FILE = path.resolve(SSL_CERT_DIR, "private-key.pem");
+
+export interface Certificate {
+  keyFile: string;
+  certFile: string;
+}
+
+const CERT_ATTRS: { name: string; value: string }[] = [
+  {
+    name: "commonName",
+    value: "localhost",
+  },
+  {
+    name: "countryName",
+    value: "AU",
+  },
+  {
+    name: "stateOrProvinceName",
+    value: "New South Wales",
+  },
+  {
+    name: "localityName",
+    value: "Sydney",
+  },
+  {
+    name: "organizationName",
+    value: "Test",
+  },
+  {
+    name: "organizationalUnitName",
+    value: "Test",
+  },
+];
+
+const generateRsaKeys = async (): Promise<{
+  publicKey: string;
+  privateKey: string;
+}> =>
+  new Promise((resolve, reject) => {
+    crypto.generateKeyPair(
+      "rsa",
+      {
+        modulusLength: 2096,
+        publicKeyEncoding: {
+          type: "spki",
+          format: "pem",
+        },
+        privateKeyEncoding: {
+          type: "pkcs8",
+          format: "pem",
+        },
+      },
+      (err, publicKey, privateKey) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve({ publicKey, privateKey });
+        }
+      },
+    );
+  });
+
+const generateCertificate = (opts: {
+  privateKey: string;
+  publicKey: string;
+}): string => {
+  const privateKey = pki.privateKeyFromPem(opts.privateKey);
+  const publicKey = pki.publicKeyFromPem(opts.publicKey);
+
+  const cert = pki.createCertificate();
+
+  cert.publicKey = publicKey;
+  cert.serialNumber = "01";
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(cert.validity.notBefore.getFullYear() + 1);
+
+  cert.setSubject(CERT_ATTRS);
+  cert.setIssuer(CERT_ATTRS);
+
+  // the actual certificate signing
+  cert.sign(privateKey);
+
+  // now convert the Forge certificate to PEM format
+  return pki.certificateToPem(cert);
+};
+
+const writeCertFiles = async (opts: {
+  cert: string;
+  privateKey: string;
+}): Promise<void> => {
+  const { cert, privateKey } = opts;
+
+  await fs.mkdir(SSL_CERT_DIR, { recursive: true });
+  await Promise.all([
+    fs.writeFile(CERT_FILE, cert, { encoding: "utf8" }),
+    fs.writeFile(KEY_FILE, privateKey, { encoding: "utf8" }),
+  ]);
+};
+
+const cerfFilesExist = async (): Promise<boolean> => {
+  try {
+    await Promise.all([
+      fs.access(CERT_FILE, fs.constants.R_OK | fs.constants.W_OK),
+      fs.access(KEY_FILE, fs.constants.R_OK | fs.constants.W_OK),
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const createOrRetrieveCertificate = async (): Promise<Certificate> => {
+  if (!(await cerfFilesExist())) {
+    const keys = await generateRsaKeys();
+    const cert = generateCertificate(keys);
+    await writeCertFiles({ cert, privateKey: keys.privateKey });
+  }
+
+  return {
+    certFile: CERT_FILE,
+    keyFile: KEY_FILE,
+  };
+};