@canva/app-scripts: zero-config build tooling for Canva Apps

Announcements
, ,
1

Say goodbye to maintaining your own webpack config!

We’re announcing @canva/app-scripts, the new build toolchain for Canva Apps. It now powers canva apps start and canva apps build, and ships with the Apps SDK Starter Kit and all CLI templates, replacing the legacy webpack.config.ts and scripts/start/ dev-server runner those projects used to carry.

What’s changing?

Task Before Now
Start the dev server npm run start (custom scripts/start/start.ts) canva apps start
Build for submission npm run build (custom webpack config) canva apps build
Extract i18n messages Separate extract script Runs automatically during
canva apps build
Bundler configuration Hundreds of lines of webpack.config.ts you maintain Zero config; or a small optional canva-app.config.ts

Why we built it

Your app’s webpack config and dev-server runner carried a lot of scaffolding just to run and build: backend orchestration, SSL certificates, tunneling, and a long tail of loader and plugin devDependencies to keep in sync yourself. @canva/app-scripts moves all of that into a single maintained, versioned package!

It also swaps the default bundler to Rsbuild, so it’s fast out of the box. On the starter kit’s hello-world app we measured:

  • ~4x faster production builds (11.7 s → 2.68 s)
  • ~3x faster HMR updates (207 ms → 70 ms)

Canva App-scripts Build speed comparison
Canva App-scripts Build speed comparison1526×810 14.4 KB

Migrating an existing app

Existing apps keep working as-is, nothing breaks today. But if your app still has its own webpack.config.ts, we recommend migrating. Install the latest CLI, then one command does most of the work:

npm install -g @canva/cli@latest
cd <to_your_app_root>
canva apps migrate webpack-to-app-scripts

The migration guide walks through the codemod, what it changes, and the small number of manual steps for apps with custom setups.

Customizing away from defaults

Once setup with @canva/app-scripts most apps need no configuration at all. However, if you need to customize (for example, a different entry point, running a backend, or dev-server tweaks) you can add a canva-app.config.ts with defineConfig().

There’s even an escape hatch for advanced bundler customization: the config callback receives the bundler configuration @canva/app-scripts resolved, and returns the configuration to use.

Here’s a small example pointing to a custom entry path:

// canva-app.config.ts
import { defineConfig } from "@canva/app-scripts";

export default defineConfig({
  entry: "./src/main.tsx",  // <-- some custom entry path
});

See Customizing away from defaults docs and defineConfig() API reference docs for more info.

Next steps

  1. Start using @canva/app-scripts:

    • New apps: scaffold with the latest starter kit or a CLI template (canva apps create), @canva/app-scripts is already wired in.
    • Existing apps: run canva apps migrate webpack-to-app-scripts and follow the migration guide.

  2. Read the Canva App Scripts overview for how the CLI-first workflow fits together, and the API reference if you’re building custom tooling.

If you hit any issues migrating, please share them in this thread and we’ll follow up!

Happy building!

4 Likes