@canva/cli 0.0.1-beta.8 → 1.0.0

package/templates/common/README.md

@@ -77,7 +77,7 @@ You need to bypass the invalid security certificate warning every time you start
 
 </details>
 
-### (Optional) Step 3: Enable Hot Module Replacement
+### 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.
 
@@ -86,23 +86,21 @@ By default, every time you make a change to an app, you have to reload the entir
 To enable HMR:
 
 1. Navigate to an app via the [Your apps](https://www.canva.com/developers/apps).
-2. Select **Configure your app**.
-3. Copy the value from the **App origin** field. This value is unique to each app and cannot be customized.
-4. In the root directory, open the `.env` file.
-5. Set the `CANVA_APP_ORIGIN` environment variable to the value copied from the **App origin** field:
+1. Select **Configuration** -> **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=# YOUR APP ORIGIN GOES HERE
+   CANVA_APP_ORIGIN=https://app-aabbccddeeff.canva-apps.com
+   CANVA_HMR_ENABLED=true
    ```
 
-6. Set the `CANVA_HMR_ENABLED` environment variable to `true`:
+1. Restart the local development server.
+1. Reload the app manually to ensure that HMR takes effect.
 
-   ```bash
-   CANVA_HMR_ENABLED=true
-   ```
+### Step 4 (Optional): Setup the Canva Dev MCP Server
 
-7. Restart the local development server.
-8. Reload the app manually to ensure that HMR takes effect.
+If you're using AI coding tools, such as Cursor or Claude Code, you can connect to the Canva Dev MCP Server to supercharge your development workflow. See this [setup guide](https://www.canva.dev/docs/apps/mcp-server/) to get started.
 
 ## Running an app's backend
 
@@ -111,21 +109,22 @@ Some templates provide an example backend. This backend is defined in the templa
 To run templates that have a backend:
 
 1. Navigate to the [Your apps](https://www.canva.com/developers/apps) page.
-2. Copy the ID of an app from the **App ID** column.
-3. In the starter kit's `.env` file, set `CANVA_APP_ID` to the ID of the app.
+1. Select the app you want to run the example with.
+1. Copy your environment variables from **Configuration** -> **Credentials** -> **.env file**.
+1. Paste the contents into the starter kit's `.env` file.
 
    For example:
 
    ```bash
    CANVA_APP_ID=AABBccddeeff
-   CANVA_APP_ORIGIN=#
+   CANVA_APP_ORIGIN=https://app-aabbccddeeff.canva-apps.com
    CANVA_BACKEND_PORT=3001
    CANVA_FRONTEND_PORT=8080
    CANVA_BACKEND_HOST=http://localhost:3001
-   CANVA_HMR_ENABLED=FALSE
+   CANVA_HMR_ENABLED=TRUE
    ```
 
-4. Start the app:
+1. Start the app:
 
    ```bash
    npm start

package/templates/common/jest.config.mjs

@@ -1,8 +1,35 @@
+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: "node",
-  testRegex: "(/tests/.*|(\\.|/)(tests))\\.ts?$",
+  testEnvironment: "jsdom",
+  testRegex: "(/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"],
 };

package/templates/common/jest.setup.ts

@@ -0,0 +1,20 @@
+// Import testing sub-packages
+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";
+
+// Initialize the test environments
+asset.initTestEnvironment();
+design.initTestEnvironment();
+error.initTestEnvironment();
+platform.initTestEnvironment();
+user.initTestEnvironment();
+
+// Once they're initialized, mock the SDKs
+jest.mock("@canva/asset");
+jest.mock("@canva/design");
+jest.mock("@canva/platform");
+jest.mock("@canva/user");
+// n.b. @canva/error should not be mocked - use it to simulate API error responses from other mocks by throwing CanvaError

package/templates/common/utils/backend/base_backend/create.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
+import debug from "debug";
 import * as express from "express";
+import type { NextFunction, Request, Response } from "express";
+import * as fs from "fs";
 import * as http from "http";
 import * as https from "https";
-import * as fs from "fs";
-import type { Request, Response, NextFunction } from "express";
-import debug from "debug";
 
 const serverDebug = debug("server");
 

package/templates/common/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
 import * as chalk from "chalk";
 import * as debug from "debug";
-import type { Request, Response, NextFunction } from "express";
-import * as jwt from "jsonwebtoken";
-import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
+import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
+import * as jwt from "jsonwebtoken";
+import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
 /**
  * Prefix your start command with `DEBUG=express:middleware:jwt` to enable debug logging
@@ -110,7 +110,7 @@ export function createJwtMiddleware(
         return sendUnauthorizedResponse(res);
       }
 
-      req.canva = {
+      req["canva"] = {
         appId: payload.aud,
         brandId: payload.brandId,
         userId: payload.userId,

package/templates/common/utils/backend/jwt_middleware/tests/jwt_middleware.tests.ts

@@ -446,7 +446,7 @@ describe("createJwtMiddleware", () => {
         expect(res.status).not.toHaveBeenCalled();
         expect(res.json).not.toHaveBeenCalled();
 
-        expect(req.canva).toEqual({
+        expect(req["canva"]).toEqual({
           userId: FAKE_USER_ID,
           brandId: FAKE_BRAND_ID,
           appId: FAKE_APP_ID,

package/templates/common/utils/tests/table_wrapper.tests.ts

@@ -1,5 +1,5 @@
-import { TableWrapper } from "../table_wrapper";
 import type { Cell, TableElement } from "@canva/design";
+import { TableWrapper } from "../table_wrapper";
 
 describe("TableWrapper", () => {
   describe("create", () => {

package/templates/common/utils/use_add_element.ts

@@ -7,9 +7,9 @@ import type {
   VideoElement,
 } from "@canva/design";
 import { addElementAtCursor, addElementAtPoint } from "@canva/design";
-import { useFeatureSupport } from "./use_feature_support";
 import { features } from "@canva/platform";
 import { useEffect, useState } from "react";
+import { useFeatureSupport } from "./use_feature_support";
 
 type AddElementParams =
   | ImageElement

package/templates/common/utils/use_feature_support.ts

@@ -1,6 +1,6 @@
 import { features } from "@canva/platform";
 import type { Feature } from "@canva/platform";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 /**
  * This hook allows re-rendering of a React component whenever

package/templates/dam/backend/routers/dam.ts

@@ -1,10 +1,6 @@
-import * as express from "express";
+import type { Container, Resource } from "@canva/app-components";
 import * as crypto from "crypto";
-import type {
-  Container,
-  FindResourcesRequest,
-  Resource,
-} from "@canva/app-components";
+import * as express from "express";
 
 /**
  * Generates a unique hash for a url.
@@ -21,35 +17,43 @@ export async function generateHash(message: string) {
 }
 
 const imageUrls = [
-  "https://cdn.pixabay.com/photo/2023/09/16/18/26/hummingbird-8257355_1280.jpg",
-  "https://cdn.pixabay.com/photo/2023/12/10/03/00/peacock-8440548_1280.jpg",
-  "https://cdn.pixabay.com/photo/2023/12/20/07/04/mountains-8459056_1280.jpg",
-  "https://cdn.pixabay.com/photo/2023/11/26/07/29/sparrow-8413000_1280.jpg",
-  "https://cdn.pixabay.com/photo/2023/12/12/16/11/mountain-8445543_1280.jpg",
+  "https://images.pexels.com/photos/1495580/pexels-photo-1495580.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+  "https://images.pexels.com/photos/3943197/pexels-photo-3943197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+  "https://images.pexels.com/photos/7195267/pexels-photo-7195267.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+  "https://images.pexels.com/photos/2904142/pexels-photo-2904142.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+  "https://images.pexels.com/photos/5403478/pexels-photo-5403478.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
 ];
-
 export const createDamRouter = () => {
   const router = express.Router();
 
   /**
    * This endpoint returns the data for your app.
-   *
-   * TODO: you must change this path to `/api/resources/find` before
-   * submitting to ensure a user is authenticated
    */
   router.post("/resources/find", async (req, res) => {
     // You should modify these lines to return data from your
     // digital asset manager (DAM) based on the findResourcesRequest
-    const findResourcesRequest: FindResourcesRequest = req.body;
-    const { types } = findResourcesRequest;
+    const {
+      types,
+      continuation,
+      locale,
+      // other available fields from the `FindResourcesRequest`
+      // containerTypes,
+      // limit,
+      // filters,
+      // query,
+      // sort,
+      // tab,
+      // containerId,
+      // parentContainerType,
+    } = req.body;
 
     let resources: Resource[] = [];
     if (types.includes("IMAGE")) {
       resources = await Promise.all(
         Array.from({ length: 40 }, async (_, i) => ({
-          id: await generateHash(imageUrls[i % imageUrls.length]),
+          id: await generateHash(i + ""),
           mimeType: "image/jpeg",
-          name: "My new thing",
+          name: `My new thing in ${locale}`, // Use the `locale` value from the request if your backend supports i18n
           type: "IMAGE",
           thumbnail: {
             url: imageUrls[i % imageUrls.length],
@@ -78,7 +82,7 @@ export const createDamRouter = () => {
 
     res.send({
       resources,
-      continuation: +(findResourcesRequest.continuation || 0) + 1,
+      continuation: +(continuation || 0) + 1,
     });
   });
 

package/templates/dam/backend/server.ts

@@ -1,5 +1,5 @@
-import * as express from "express";
 import * as cors from "cors";
+import * as express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createDamRouter } from "./routers/dam";
 

package/templates/dam/canva-app.json

@@ -0,0 +1,16 @@
+{
+  "$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"
+      }
+    ]
+  }
+}

package/templates/dam/eslint.config.mjs

@@ -1,17 +1,4 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-// import i18n from "./conf/eslint-i18n.mjs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import canvaPlugin from "@canva/app-eslint-plugin";
 
 export default [
   {
@@ -20,21 +7,8 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },
-  ...compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-  ),
-  ...general,
-  // This template is not yet translated, enable these rules when it is
-  // ...i18n,
+  ...canvaPlugin.configs.apps,
 ];

package/templates/dam/package.json

@@ -4,7 +4,7 @@
   "description": "An example app leveraging @canva/app-components to develop a digital asset management (DAM) app.",
   "scripts": {
     "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
-    "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
+    "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",
@@ -12,18 +12,20 @@
     "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",
-    "postinstall": "ts-node ./scripts/copy-env.ts"
+    "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-components": "^1.0.0-beta.29",
-    "@canva/app-i18n-kit": "^1.0.1",
-    "@canva/app-ui-kit": "^4.3.0",
-    "@canva/asset": "^2.0.0",
-    "@canva/design": "^2.2.1",
-    "@canva/platform": "^2.0.0",
-    "@canva/user": "^2.0.0",
+    "@canva/app-components": "^1.3.1",
+    "@canva/app-i18n-kit": "^1.0.3",
+    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/asset": "^2.2.1",
+    "@canva/design": "^2.7.2",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.2.0",
+    "@canva/user": "^2.1.1",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
     "react": "18.3.1",
@@ -31,62 +33,63 @@
     "react-intl": "6.8.7"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.14.0",
-    "@formatjs/cli": "6.3.8",
-    "@formatjs/ts-transformer": "3.13.22",
-    "@ngrok/ngrok": "1.4.1",
+    "@canva/app-eslint-plugin": "^1.0.0-beta.3",
+    "@canva/cli": ">= 0.0.1-beta.13",
+    "@formatjs/cli": "6.7.2",
+    "@formatjs/ts-transformer": "3.14.0",
+    "@ngrok/ngrok": "1.5.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@svgr/webpack": "8.1.0",
-    "@types/cors": "2.8.17",
+    "@testing-library/react": "16.3.0",
+    "@types/cors": "2.8.19",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.6",
+    "@types/express-serve-static-core": "5.0.6",
     "@types/jest": "29.5.14",
-    "@types/jsonwebtoken": "9.0.7",
-    "@types/node": "20.10.0",
-    "@types/node-fetch": "2.6.11",
+    "@types/jsonwebtoken": "9.0.10",
+    "@types/node": "20.19.2",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.13.0",
-    "@typescript-eslint/parser": "8.13.0",
+    "@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.0.6",
-    "debug": "4.3.7",
-    "dotenv": "16.4.5",
-    "eslint": "9.14.0",
-    "eslint-plugin-formatjs": "5.2.2",
-    "eslint-plugin-jest": "28.9.0",
-    "eslint-plugin-react": "7.37.2",
-    "exponential-backoff": "3.1.1",
-    "express": "4.21.1",
+    "cssnano": "7.0.7",
+    "debug": "4.4.1",
+    "dotenv": "16.6.0",
+    "exponential-backoff": "3.1.2",
+    "express": "4.21.2",
     "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.1.0",
+    "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.2",
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
+    "open": "8.4.2",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.3",
+    "prettier": "3.6.2",
     "prompts": "2.4.2",
+    "react-refresh": "0.17.0",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.5",
-    "ts-loader": "9.5.1",
+    "terser-webpack-plugin": "5.3.14",
+    "tree-kill": "1.2.2",
+    "ts-jest": "29.4.0",
+    "ts-loader": "9.5.2",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4",
+    "typescript": "5.8.2",
     "url-loader": "4.1.1",
-    "webpack": "5.96.1",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.1.0",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }
 }

package/templates/dam/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
+import * as fs from "fs/promises";
 import { pki } from "node-forge";
 import * as path from "path";
-import * as fs from "fs/promises";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

package/templates/dam/scripts/start/app_runner.ts

@@ -1,14 +1,16 @@
 /* eslint-disable no-console */
-import type { Context } from "./context";
-import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.cjs";
+import { generatePreviewUrl } from "@canva/cli";
 import * as ngrok from "@ngrok/ngrok";
-import * as nodemon from "nodemon";
+import * as chalk from "chalk";
 import * as Table from "cli-table3";
+import * as nodemon from "nodemon";
+import * as open from "open";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import { buildConfig } from "../../webpack.config";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
+import type { Context } from "./context";
 
 export const infoChalk = chalk.blue.bold;
 export const warnChalk = chalk.bgYellow.bold;
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(ctx.openPreview, table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,33 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    table: Table.Table,
+  ) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    if (openPreview) {
+      open(generatePreviewResult.data);
+    }
+  };
 }

package/templates/dam/scripts/start/context.ts

@@ -3,8 +3,10 @@ import * as path from "path";
 
 interface CliArgs {
   example?: string;
-  useHttps?: boolean;
-  ngrok?: boolean;
+  useHttps: boolean;
+  ngrok: boolean;
+  preview: boolean;
+  overrideFrontendPort?: number;
 }
 
 interface EnvVars {
@@ -45,7 +47,7 @@ export class Context {
   }
 
   get ngrokEnabled() {
-    return !!this.args.ngrok;
+    return this.args.ngrok;
   }
 
   get hmrEnabled() {
@@ -53,7 +55,7 @@ export class Context {
   }
 
   get httpsEnabled() {
-    return !!this.args.useHttps;
+    return this.args.useHttps;
   }
 
   get frontendEntryPath() {
@@ -69,11 +71,11 @@ export class Context {
   }
 
   get frontendUrl() {
-    return `${this.protocol}://localhost:${this.envVars.frontendPort}`;
+    return `${this.protocol}://localhost:${this.frontendPort}`;
   }
 
   get frontendPort() {
-    return this.envVars.frontendPort;
+    return this.args.overrideFrontendPort || this.envVars.frontendPort;
   }
 
   get developerBackendEntryPath(): string | undefined {
@@ -117,6 +119,10 @@ export class Context {
     return this.envVars.appId;
   }
 
+  get openPreview(): boolean {
+    return this.args.preview;
+  }
+
   private get protocol(): "https" | "http" {
     return this.httpsEnabled ? "https" : "http";
   }

package/templates/dam/scripts/start/start.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import * as yargs from "yargs";
-import { AppRunner } from "./app_runner";
 import { hideBin } from "yargs/helpers";
+import { AppRunner } from "./app_runner";
 import { Context } from "./context";
 
 const appRunner = new AppRunner();
@@ -23,6 +23,17 @@ yargs(hideBin(process.argv))
     default:
       process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
   })
+  .option("override-frontend-port", {
+    description:
+      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
+    type: "number",
+    alias: "p",
+  })
+  .option("preview", {
+    description: "Open the app in Canva.",
+    type: "boolean",
+    default: false,
+  })
   .command(
     "$0",
     "Starts local development",