🎁 Unwrapping the Fourth festive release for 2024: Canva CLI Preview Command!

Announcements
,
1

:sparkles: All I want for Christmas is… preview! :sparkles: And now, you’ve got it! Dive into faster testing and debugging with canva apps preview.

With the Canva CLI: canva apps preview command, you can now preview your Canva app right from the command line – no Developer Portal required! It’s a real-time, seamless way to test and debug your app as you build. :santa_claus:

:wrapped_gift: How to unwrap this gift:

  1. Update to the latest version of the Canva CLI: npm install -g @canva/cli@latest
  2. From your app’s directory, run: npm start & canva apps preview
  3. Once your app is running, the preview link will automatically open in your browser. Alternatively, click on the link provided in the terminal. :tada:

:bullseye:Add previewing right into your workflow

Want to streamline your setup? You can integrate previewing directly into your app’s start script:

  1. Install the Canva CLI package directly in your app: npm install -D @canva/cli
  2. Install the open package in your app: npm install -D open@8.4.2
  3. Update your scripts/start/app_runner.ts file to include previewing.
import * as open from "open"
import { generatePreviewUrl } from "@canva/cli"

const generatePreviewResult = await generatePreviewUrl();
if (generatePreviewResult.success) {
  open(generatePreviewResult.data);
}
  1. Alternatively, rebase the latest starter kit to get the changes added automatically.
  2. Run npm start and the preview URL will be automatically generated and opened in your browser! :christmas_tree:

This functionality comes gift-wrapped in the latest version of the starter kit and all our CLI templates, so it’s simpler than ever to get started when building a new app.

As an extra treat, the Canva CLI now comes with a festive makeover—complete with animated snowfall and a cheerful Christmas hat to keep your terminal merry and bright! :snowflake::santa_claus:

canva-snow

We hope this speeds up your app development process and we can’t wait to see the amazing apps you create! :glowing_star:

Keep your eyes peeled for more :gift:exciting releases :gift: this week. To see everything we’ve launched so far, check out the Developer Christmas 2024 thread.

4 Likes
2

Hi,
It seems this recent change has introduced a bug that prevents creating new apps using the command. While I can use alternative methods to create them, I’m reporting this so you can investigate further.

canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies

Thank,

3

Hey @ruacon

Sorry about that! We really appreciate the bug report - our team has identified the problem and will have a fix in our release next week.

Thanks for letting us know about the problem,
Tom

4

Hi @ruacon!

You should now be able to use the above command again as we’ve fixed the bug.

To update, please run

npm i -g @canva/cli@latest

thanks
Anto

2 Likes