Build the Canva App

The App you created in the Canva Developer Portal is an empty shell until you compile the React frontend and upload it. The bundle has to be built against your own store URL, because that URL is baked into the JavaScript at compile time, there is no runtime setting for it.

Requirements

The project ships an .nvmrc pinned to 20.10.0, so a version manager gets you the right runtime in one command:

cd canva-app-frontend
nvm install

Step 1: Install dependencies

cd canva-app-frontend
npm install

The postinstall script copies .env.template to .env if you do not already have one.

Step 2: Point the app at your store

CANVA_BACKEND_HOST is the base URL the app prefixes onto every request, for example ${BACKEND_HOST}/wp-json/canva/v1/products. Set it to the root URL of your WordPress site, with no trailing slash and no /wp-json suffix.

Open .env and set it:

CANVA_BACKEND_HOST=https://your-domain.com
CANVA_APP_ID=AAHOGOJacpE

For a subdirectory install, include the subdirectory path:

CANVA_BACKEND_HOST=https://your-domain.com/store

⚠ It must be HTTPS. The Canva editor is served over HTTPS, so a browser blocks any fetch() the app makes to an http:// origin as mixed content. A production build whose host contains localhost prints the warning "BACKEND_HOST should not be set to localhost for production builds!", the build still completes, so read the console output before uploading a bundle.

You can override the value on the command line instead of editing .env, which is handy in CI:

CANVA_BACKEND_HOST=https://your-domain.com npm run build

Environment variables

Step 3: Build the bundle

npm run build

This runs webpack in production mode and then extracts the translation messages. The output lands in:

canva-app-frontend/dist/app.js

If the build stops with "BACKEND_HOST is undefined.", CANVA_BACKEND_HOST was not set, go back to Step 2. This is the only host problem that aborts the build; a localhost host only warns.

Step 4: Upload the bundle to Canva

1. Open the Canva Developer Portal and select your App.
2. Go to App source and choose to upload a bundle.
3. Upload dist/app.js.
4. Save, then preview the app.

The app registers itself as a Design Editor intent, so it appears in the Canva editor's side panel, labelled with your app's name, shown as Webkul App in the screenshots throughout this documentation.

Developing against a live store

For iterative work you can run the dev server instead of uploading a bundle each time:

npm start

The server listens on http://localhost:8080. It only serves a JavaScript bundle, so there is nothing to see by visiting that URL directly, preview it through Canva:

1. In the Developer Portal, open your app and select App source > Development URL.
2. Enter http://localhost:8080.
3. Click Preview to open the Canva editor with your app loaded.
4. Click Open the first time you use the app.

To preview in Safari, the dev server must itself be HTTPS-enabled, set CANVA_HTTPS_ENABLED=TRUE in .env, or pass --use-https to npm start. Leaving CANVA_SSL_KEY_FILE and CANVA_SSL_CERT_FILE empty auto-generates a self-signed certificate into ./.ssl.

Even in development, CANVA_BACKEND_HOST must point at a real HTTPS WordPress instance with the plugin installed. The app has no mock data, an unreachable backend shows "Failed to load products. Please check if your WordPress site is accessible."

Useful scripts

Rebuild checklist

You must rebuild and re-upload the bundle whenever:

• your store URL changes, including moving from staging to production
• you switch from http:// to https://
• your site moves into or out of a subdirectory
• you change anything in src/app.tsx

The App ID and the store credentials live in WordPress and in the Developer Portal, so changing those does not require a rebuild.