Content extensions are being deprecated in favor of the Apps SDK. To help you migrate to the Apps SDK, Canva has created a template⁠(opens in a new tab or window) that demonstrates how to build a digital asset management (DAM) app.

As part of the migration process, you’ll need to configure CORS, remove signature verification, and add support for user authentication, among other steps.

To see how you can customize the app's UI, see the SearchableListView⁠(opens in a new tab or window) component.

Step 1: Create a new app

Create a new app in the Developer Portal⁠(opens in a new tab or window). You'll use this app ID to configure your settings in the next steps. For more information, see Creating apps.

Step 2: Clone the repo and install dependencies

This step explains how to clone the example repository and install the npm dependencies.

Clone the canva-sdks/canva-apps-sdk-starter-kit⁠(opens in a new tab or window) repo.
```
git clone [email protected]:canva-sdks/canva-apps-sdk-starter-kit.git
```
BASH
Install the npm dependencies.
```
npm install
```
BASH

Step 3: Configure the environment

Open the .env file and add your backend server’s details. For more information, see Previewing apps.

CANVA_FRONTEND_PORT=8080
CANVA_BACKEND_PORT=3001
CANVA_BACKEND_HOST=https://my-backend/
CANVA_APP_ID=<your App ID>
CANVA_HMR_ENABLED=FALSE

CANVA_BACKEND_HOST: The URL of your backend server.
CANVA_APP_ID: To find this value, open Your apps⁠(opens in a new tab or window), find the app you created in step 1, and copy the ID from the App ID column.
CANVA_HMR_ENABLED: You can optionally enable Hot Module Replacement (HMR). For more information, see Previewing apps

Step 4: Preview your app

Run the app locally to preview your changes. For more information, see Previewing apps. If you haven’t already created an app, see Creating apps to create one.

Start the local preview:
```
npm start digital_asset_management
```
BASH
Open Your apps⁠(opens in a new tab or window), click on your app, then Configure your app > App source > Development URL.
In the Development URL field, enter the URL of the development server.
Click Preview. This opens the Canva editor with your app in the sidebar in a new tab.
Click Open. (This screen only appears when using an app for the first time.)

To preview your app with Safari, see Using HTTPS.

Step 5: Configure CORS

Configure your CORS header by applying the configuration at Cross-Origin Resource Sharing.

Step 6: Add user authentication

Update your app to add user authentication. Frictionless authentication is not available for this type of app, so you’ll need to use manual authentication with a third-party platform.

Step 7: Remove signature verification

Update your legacy extension to remove the signature verification code. You can do this by removing the isValidPostRequest and isValidGetRequest steps. For more information, see Signature verification.

app.post("/content/resources/find", async (request, response) => {
-  if (!isValidPostRequest(process.env.CLIENT_SECRET, request)) {
-    response.sendStatus(401);
-    return;
-  }
  response.send({
    type: "SUCCESS",
    resources: [],
  });
});

DIFF

Step 8: Update config.ts

Edit your config.ts⁠(opens in a new tab or window) to remove any configuration settings that you don't need. For more information, see the config settings in SearchableListView⁠(opens in a new tab or window).

Next steps

To organize your content for a Digital Asset Management (DAM) app, see the example app.
- The DAM app template uses the SearchableListView component in the background to let users navigate your content using filters and search. You might want to use this component in your app directly.
- To learn about the capabilities, see the SearchableListView⁠(opens in a new tab or window) storybook.
When your app is ready, submit it on the Developer Portal. For more information, see Submitting apps.