Overview:

The Apps SDK starter kit for Canva’s app development platform is a comprehensive resource that provides developers with everything they need to quickly and easily build and run apps on Canva. The kit includes a boilerplate project, plenty of examples, and complete documentation for the platform. It is assumed that users have some experience with TypeScript and React. Node.js v18 or v20.10.0 and npm v9 or v10 are required.

Features:

• Boilerplate project: The starter kit includes a boilerplate project that serves as a foundation for app development on Canva.
• Examples: The kit provides numerous examples to demonstrate different app functionalities and inspire developers.
• Complete documentation: Developers have access to comprehensive documentation that covers all aspects of app development on Canva’s platform.

Installation:

To install the Canva Apps SDK starter kit, follow these steps:

1. Ensure you have Node.js v18 or v20.10.0 and npm v9 or v10 installed.
2. Use a version manager like nvm to ensure you have the correct version of Node.js. Run the nvm install command in the root directory of the starter kit repository.
3. Start the local development server by running the following command: npm run start.
4. The server will be available at http://localhost:8080.
5. The app’s source code can be found in the src/app.tsx file.
6. To preview the app, create an app via the Developer Portal, select “App source > Development URL”, enter the URL of the development server, and click “Preview”.
7. For Hot Module Replacement (HMR), copy the ID of an app from the App ID column in the Your apps page of the Developer Portal, and set CANVA_APP_ID to the app’s ID in the starter kit’s .env file. Set CANVA_HMR_ENABLED to TRUE and restart the local server.
8. For Safari users, enable HTTPS for the development server by starting it with HTTPS enabled. Bypass the invalid security certificate warning and set the app’s Development URL in the Developer Portal to https://localhost:8080.

Summary:

The Canva Apps SDK starter kit provides everything needed to quickly start building and running apps on Canva’s app development platform. With a boilerplate project, numerous examples, and comprehensive documentation, developers can easily develop and preview their apps. Safari users can also enable HTTPS to preview apps in Safari.