@canva/cli 1.13.0 → 1.15.0

package/templates/content_publisher/webpack.config.ts

@@ -0,0 +1,247 @@
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import path from "path";
+import TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
+
+config();
+
+type DevConfig = {
+  port: number;
+  enableHmr: boolean;
+  enableHttps: boolean;
+  appOrigin?: string;
+  appId?: string; // Deprecated in favour of appOrigin
+  certFile?: string;
+  keyFile?: string;
+};
+
+export function buildConfig({
+  devConfig,
+  appEntry = path.join(process.cwd(), "src", "index.tsx"),
+  backendHost = process.env.CANVA_BACKEND_HOST,
+  // For IN_HARNESS, refer to the following docs for more information: https://www.canva.dev/docs/apps/test-harness/
+  inHarness = process.env.IN_HARNESS?.toLowerCase() === "true",
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+  inHarness?: boolean;
+} = {}): Configuration & DevServerConfiguration {
+  const mode = devConfig ? "development" : "production";
+
+  if (!backendHost) {
+    console.warn(
+      chalk.yellow.bold("BACKEND_HOST is undefined."),
+      `If your app requires a backend, refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+  } else if (backendHost.includes("localhost") && mode === "production") {
+    console.error(
+      chalk.redBright.bold(
+        "BACKEND_HOST should not be set to localhost for production builds!",
+      ),
+      `Refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+  }
+
+  return {
+    mode,
+    context: path.resolve(process.cwd(), "./"),
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
+    target: "web",
+    resolve: {
+      alias: {
+        styles: path.resolve(process.cwd(), "styles"),
+        src: path.resolve(process.cwd(), "src"),
+      },
+      extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
+    },
+    infrastructureLogging: {
+      level: inHarness ? "info" : "none",
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                transpileOnly: true,
+                getCustomTransformers() {
+                  return {
+                    before: [
+                      transform({
+                        overrideIdFn: "[sha512:contenthash:base64:6]",
+                      }),
+                    ],
+                  };
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          exclude: /node_modules/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                modules: true,
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [require("cssnano")({ preset: "default" })],
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpg|jpeg)$/i,
+          type: "asset/inline",
+        },
+        {
+          test: /\.(woff|woff2)$/,
+          type: "asset/inline",
+        },
+        {
+          test: /\.svg$/,
+          oneOf: [
+            {
+              issuer: /\.[jt]sx?$/,
+              resourceQuery: /react/, // *.svg?react
+              use: ["@svgr/webpack", "url-loader"],
+            },
+            {
+              type: "asset/resource",
+              parser: {
+                dataUrlCondition: {
+                  maxSize: 200,
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          include: /node_modules/,
+          use: [
+            "style-loader",
+            "css-loader",
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [require("cssnano")({ preset: "default" })],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+      ],
+    },
+    output: {
+      filename: `[name].js`,
+      path: path.resolve(process.cwd(), "dist"),
+      clean: true,
+    },
+    plugins: [
+      new DefinePlugin({
+        BACKEND_HOST: JSON.stringify(backendHost),
+      }),
+      // Apps can only submit a single JS file via the Developer Portal
+      new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+    ].filter(Boolean),
+    ...buildDevConfig(devConfig),
+  };
+}
+
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
+  if (!options) {
+    return {};
+  }
+
+  const { port, enableHmr, appOrigin, enableHttps, certFile, keyFile } =
+    options;
+  const host = "localhost";
+
+  let devServer: DevServerConfiguration = {
+    server: enableHttps
+      ? {
+          type: "https",
+          options: {
+            cert: certFile,
+            key: keyFile,
+          },
+        }
+      : "http",
+    host,
+    allowedHosts: [host],
+    historyApiFallback: {
+      rewrites: [{ from: /^\/$/, to: "/app.js" }],
+    },
+    port,
+    client: {
+      logging: "verbose",
+    },
+  };
+
+  if (enableHmr && appOrigin) {
+    devServer = {
+      ...devServer,
+      allowedHosts: [host, new URL(appOrigin).hostname],
+      headers: {
+        "Access-Control-Allow-Origin": appOrigin,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Private-Network": "true",
+      },
+    };
+  } else {
+    if (enableHmr && !appOrigin) {
+      console.warn(
+        "Attempted to enable Hot Module Replacement (HMR) without configuring App Origin... Disabling HMR.",
+      );
+    }
+    devServer.webSocketServer = false;
+  }
+
+  return {
+    devtool: "source-map",
+    devServer,
+  };
+}
+
+export default buildConfig;

package/templates/dam/backend/server.ts

@@ -1,7 +1,7 @@
+import { user } from "@canva/app-middleware/express";
 import cors from "cors";
 import express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
-import { createJwtMiddleware } from "../utils/backend/jwt_middleware";
 import { createDamRouter } from "./routers/dam";
 
 async function main() {
@@ -50,8 +50,7 @@ async function main() {
    * 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);
+  router.use(user.verifyToken({ appId: APP_ID }));
 
   /**
    * Add routes for digital asset management.

package/templates/dam/package.json

@@ -18,15 +18,16 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-components": "^2.1.0",
+    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-middleware": "^0.0.0-beta.4",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
@@ -69,7 +70,7 @@
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "9.0.3",
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",

package/templates/dam/tsconfig.json

@@ -37,7 +37,6 @@
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "paths": {
-      "assets": ["./assets"],
       "styles": ["./styles"]
     }
   },

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

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import { UserAuthError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -63,6 +64,15 @@ export function createBaseServer(router: express.Router): BaseServer {
 
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
+    // Handle authentication errors from @canva/app-middleware
+    if (err instanceof UserAuthError) {
+      res.status(err.statusCode).json({
+        error: err.code,
+        message: err.message,
+      });
+      return;
+    }
+
     console.error(err.stack);
     res.status(500).send({
       error: "something went wrong",

package/templates/dam/webpack.config.ts

@@ -61,7 +61,6 @@ export function buildConfig({
     target: "web",
     resolve: {
       alias: {
-        assets: path.resolve(process.cwd(), "assets"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },
@@ -218,10 +217,6 @@ function buildDevConfig(options?: DevConfig): {
     client: {
       logging: "verbose",
     },
-    static: {
-      directory: path.resolve(process.cwd(), "assets"),
-      publicPath: "/assets",
-    },
   };
 
   if (enableHmr && appOrigin) {

package/templates/data_connector/package.json

@@ -21,18 +21,18 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "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"
+    "react-router-dom": "7.12.0"
   },
   "devDependencies": {
     "@canva/app-eslint-plugin": "^1.0.0-beta.7",
@@ -66,7 +66,7 @@
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "9.0.3",
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",

package/templates/data_connector/tsconfig.json

@@ -37,7 +37,6 @@
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "paths": {
-      "assets": ["./assets"],
       "styles": ["./styles"]
     }
   },

package/templates/data_connector/webpack.config.ts

@@ -61,7 +61,6 @@ export function buildConfig({
     target: "web",
     resolve: {
       alias: {
-        assets: path.resolve(process.cwd(), "assets"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },
@@ -218,10 +217,6 @@ function buildDevConfig(options?: DevConfig): {
     client: {
       logging: "verbose",
     },
-    static: {
-      directory: path.resolve(process.cwd(), "assets"),
-      publicPath: "/assets",
-    },
   };
 
   if (enableHmr && appOrigin) {

package/templates/gen_ai/backend/server.ts

@@ -1,7 +1,7 @@
+import { user } from "@canva/app-middleware/express";
 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() {
@@ -50,8 +50,7 @@ async function main() {
    * 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);
+  router.use(user.verifyToken({ appId: APP_ID }));
 
   /**
    * Add routes for image generation.

package/templates/gen_ai/package.json

@@ -20,12 +20,13 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-middleware": "^0.0.0-beta.4",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
@@ -35,7 +36,7 @@
     "react-dom": "^19.2.3",
     "react-error-boundary": "6.0.0",
     "react-intl": "^7.1.11",
-    "react-router-dom": "7.8.2"
+    "react-router-dom": "7.12.0"
   },
   "devDependencies": {
     "@canva/app-eslint-plugin": "^1.0.0-beta.7",
@@ -73,7 +74,7 @@
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "9.0.3",
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",

package/templates/gen_ai/tsconfig.json

@@ -37,7 +37,6 @@
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "paths": {
-      "assets": ["./assets"],
       "styles": ["./styles"]
     }
   },

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

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import { UserAuthError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -63,6 +64,15 @@ export function createBaseServer(router: express.Router): BaseServer {
 
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
+    // Handle authentication errors from @canva/app-middleware
+    if (err instanceof UserAuthError) {
+      res.status(err.statusCode).json({
+        error: err.code,
+        message: err.message,
+      });
+      return;
+    }
+
     console.error(err.stack);
     res.status(500).send({
       error: "something went wrong",

package/templates/gen_ai/webpack.config.ts

@@ -61,7 +61,6 @@ export function buildConfig({
     target: "web",
     resolve: {
       alias: {
-        assets: path.resolve(process.cwd(), "assets"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },
@@ -218,10 +217,6 @@ function buildDevConfig(options?: DevConfig): {
     client: {
       logging: "verbose",
     },
-    static: {
-      directory: path.resolve(process.cwd(), "assets"),
-      publicPath: "/assets",
-    },
   };
 
   if (enableHmr && appOrigin) {

package/templates/hello_world/package.json

@@ -21,12 +21,12 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
@@ -64,7 +64,7 @@
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "9.0.3",
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",

package/templates/hello_world/tsconfig.json

@@ -37,7 +37,6 @@
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "paths": {
-      "assets": ["./assets"],
       "styles": ["./styles"]
     }
   },

package/templates/hello_world/webpack.config.ts

@@ -61,7 +61,6 @@ export function buildConfig({
     target: "web",
     resolve: {
       alias: {
-        assets: path.resolve(process.cwd(), "assets"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },
@@ -218,10 +217,6 @@ function buildDevConfig(options?: DevConfig): {
     client: {
       logging: "verbose",
     },
-    static: {
-      directory: path.resolve(process.cwd(), "assets"),
-      publicPath: "/assets",
-    },
   };
 
   if (enableHmr && appOrigin) {

package/templates/mls/package.json

@@ -23,12 +23,12 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "@tanstack/react-query": "5.87.1",
     "@types/react-infinite-scroller": "1.2.5",
@@ -39,7 +39,7 @@
     "react-hook-form": "7.66.0",
     "react-infinite-scroller": "1.2.6",
     "react-intl": "^7.1.11",
-    "react-router-dom": "7.8.2"
+    "react-router-dom": "7.12.0"
   },
   "devDependencies": {
     "@canva/app-eslint-plugin": "^1.0.0-beta.7",
@@ -75,7 +75,7 @@
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
     "jest-environment-jsdom": "29.7.0",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "9.0.3",
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",

package/templates/mls/tsconfig.json

@@ -34,7 +34,6 @@
     "esModuleInterop": true,
     "baseUrl": "./",
     "paths": {
-      "assets": ["./assets"],
       "styles": ["./styles"]
     }
   },

package/templates/mls/webpack.config.ts

@@ -62,7 +62,6 @@ export function buildConfig({
     target: "web",
     resolve: {
       alias: {
-        assets: path.resolve(process.cwd(), "assets"),
         styles: path.resolve(process.cwd(), "styles"),
         src: path.resolve(process.cwd(), "src"),
       },
@@ -219,10 +218,6 @@ function buildDevConfig(options?: DevConfig): {
     client: {
       logging: "verbose",
     },
-    static: {
-      directory: path.resolve(process.cwd(), "assets"),
-      publicPath: "/assets",
-    },
   };
 
   if (enableHmr && appOrigin) {

package/templates/base/backend/jwt_middleware/index.ts

@@ -1 +0,0 @@
-export { createJwtMiddleware } from "./jwt_middleware";