@canva/cli 0.0.1-beta.2 → 0.0.1-beta.20

package/templates/dam/scripts/copy_env.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import * as fs from "fs";
+import * as path from "path";
+
+const envPath = path.resolve(__dirname, "..", ".env");
+const templatePath = path.resolve(__dirname, "..", ".env.template");
+
+if (!fs.existsSync(envPath)) {
+  fs.copyFileSync(templatePath, envPath);
+}

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

@@ -1,12 +1,14 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.cjs";
+import { buildConfig } from "../../webpack.config";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -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

@@ -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",

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

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+
+import type { ChildProcess } from "child_process";
+import { spawn } from "child_process";
+import * as treeKill from "tree-kill";
+
+describe("start script", () => {
+  let serverProcess: ChildProcess;
+
+  afterEach(() => {
+    if (serverProcess?.pid && !serverProcess.exitCode) {
+      treeKill(serverProcess.pid);
+    }
+  });
+
+  it("should execute 'npm run start' and start a dev server", async () => {
+    const testServerPort = 8089;
+    serverProcess = await spawn(
+      `npm run start -- -p ${testServerPort} --no-preview`,
+      {
+        shell: true,
+      },
+    );
+
+    if (!serverProcess.pid) {
+      throw new Error("Unable to start server");
+    }
+
+    // wait for the server to start and collect output until it reports the running URL
+    let output = "";
+    await new Promise<void>((resolve, reject) => {
+      serverProcess.stdout?.on("data", (data) => {
+        output += data.toString();
+        if (output.includes("Development URL")) {
+          resolve();
+        }
+      });
+
+      serverProcess.stderr?.on("data", (data) => {
+        console.error("Server process error: ", data.toString());
+        reject();
+      });
+
+      // timeout and fail test if the server hasn't correctly started in 10 seconds
+      setTimeout(() => {
+        if (serverProcess?.pid && !serverProcess.exitCode) {
+          treeKill(serverProcess.pid);
+        }
+        reject(new Error("Test timed out"));
+      }, 10000);
+    });
+
+    // check that the server is running and accessible
+    const expectedServerURL = `http://localhost:${testServerPort}`;
+    expect(output).toContain(expectedServerURL);
+    expect(serverProcess.exitCode).toBeNull();
+
+    // clean up
+    treeKill(serverProcess.pid);
+  }, 15000); // 15 seconds timeout to allow for the server to start
+});

package/templates/dam/src/app.tsx

@@ -1,147 +1,35 @@
-import { useEffect, useState } from "react";
 import { SearchableListView } from "@canva/app-components";
-import { Alert, Box, Button, LoadingIndicator, Rows } from "@canva/app-ui-kit";
-import type { Authentication } from "@canva/user";
-import { auth } from "@canva/user";
+import { Box } from "@canva/app-ui-kit";
+import "@canva/app-ui-kit/styles.css";
+import { useConfig } from "./config";
 import { findResources } from "./adapter";
-import { config } from "./config";
 import * as styles from "./index.css";
-import "@canva/app-ui-kit/styles.css";
-
-type AuthenticationState =
-  | "authenticated"
-  | "not_authenticated"
-  | "checking"
-  | "cancelled"
-  | "error";
-
-/**
- * This endpoint is defined in the ./backend/server.ts file. You need to
- * register the endpoint in the Developer Portal before sending requests.
- *
- * BACKEND_HOST is configured in the root .env file, for more information,
- * refer to the README.md.
- */
-const AUTHENTICATION_CHECK_URL = `${BACKEND_HOST}/api/authentication/status`;
-
-const checkAuthenticationStatus = async (
-  auth: Authentication,
-): Promise<AuthenticationState> => {
-  /**
-   * Send a request to an endpoint that checks if the user is authenticated.
-   * This is example code, intended to convey the basic idea. When implementing this in your app, you might want more advanced checks.
-   *
-   * Note: You must register the provided endpoint via the Developer Portal.
-   */
-  try {
-    const token = await auth.getCanvaUserToken();
-    const res = await fetch(AUTHENTICATION_CHECK_URL, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      method: "POST",
-    });
-    const body = await res.json();
-
-    if (body?.isAuthenticated) {
-      return "authenticated";
-    } else {
-      return "not_authenticated";
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return "error";
-  }
-};
 
 export function App() {
-  // Keep track of the user's authentication status.
-  const [authState, setAuthState] = useState<AuthenticationState>("checking");
-
-  useEffect(() => {
-    setAuthState("checking");
-    checkAuthenticationStatus(auth).then((status) => {
-      setAuthState(status);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (authState === "not_authenticated") {
-      startAuthenticationFlow();
-    }
-  }, [authState]);
-
-  const startAuthenticationFlow = async () => {
-    try {
-      const response = await auth.requestAuthentication();
-      switch (response.status) {
-        case "COMPLETED":
-          setAuthState("authenticated");
-          break;
-        case "ABORTED":
-          // eslint-disable-next-line no-console
-          console.warn("Authentication aborted by user.");
-          setAuthState("cancelled");
-          break;
-        case "DENIED":
-          // eslint-disable-next-line no-console
-          console.warn("Authentication denied by user", response.details);
-          setAuthState("cancelled");
-          break;
-        default:
-          // eslint-disable-next-line no-console
-          console.log("Unknown auth state");
-          break;
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      setAuthState("error");
-    }
-  };
-
-  if (authState === "error") {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Warning: authentication not enabled on this app. Please enable auth with the instructions in README",
-    );
-    // Comment this next line out for production apps
-    setAuthState("authenticated");
-  }
-
-  // If user has denied or aborted auth flow
-  if (authState === "cancelled") {
-    return (
-      <Box paddingEnd="2u" height="full" className={styles.centerInPage}>
-        <Rows spacing="2u" align="center">
-          <Alert tone="critical">
-            Something went wrong while authenticating
-          </Alert>
-          <Button
-            variant="primary"
-            onClick={startAuthenticationFlow}
-            stretch={true}
-          >
-            Start authentication flow
-          </Button>
-        </Rows>
-      </Box>
-    );
-  }
-
-  return authState === "authenticated" ? (
+  const config = useConfig();
+  return (
     <Box className={styles.rootWrapper}>
-      <SearchableListView config={config} findResources={findResources} />
-    </Box>
-  ) : (
-    <Box
-      width="full"
-      height="full"
-      paddingTop="1u"
-      className={styles.centerInPage}
-    >
-      <LoadingIndicator size="large" />
+      <SearchableListView
+        config={config}
+        findResources={findResources}
+        // TODO remove `saveExportedDesign` and `config.export` if your app does not support exporting the Canva design into an external platform
+        saveExportedDesign={(
+          exportedDesignUrl: string,
+          containerId: string | undefined,
+          designTitle: string | undefined,
+        ) => {
+          // TODO update the function to save the design to your platform
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              // eslint-disable-next-line no-console
+              console.info(
+                `Saving file "${designTitle}" from ${exportedDesignUrl} to ${config.serviceName} container id: ${containerId}`,
+              );
+              resolve({ success: true });
+            }, 1000);
+          });
+        }}
+      />
     </Box>
   );
 }