Setting up a Base URL

In the Developer Portal, apps have a Base URL field.

To use the Fetch capability, this field must contain the URL of a web server. The app can then send requests to this server via Canva's backend.

You can use any programming language, framework, or architecture to set up a server, but:

• The server must be exposed via a public URL.
• The server must be able to receive and respond to requests with a Content-Type of application/json.

Throughout the documentation, we use Express.js to demonstrate the backend of an app, so that's what this guide explains how to set up.

Step 1: Install Node.js

To check if Node.js is installed, run the following command:

node --version

You should see something like this:

node --version
v14.18.1

If Node.js not installed, download it from the official website.

Step 2: Set up a new project

Create a project with the following structure:

• my-backend/
  • src/
    • server.js
  • .env
  • package.json

To create this structure, run the following commands:

mkdir my-backend
cd my-backend
npm init --yes # yarn init
mkdir src
touch .env src/server.js

Then copy the following code into the server.js file:

require("dotenv").config();
const express = require("express");

const app = express();

app.use(express.json());
app.use(express.static("public"));

// Routes go here

app.listen(process.env.PORT || 3001);

This code initializes an Express.js server without any endpoints.

Step 3: Install the dependencies

Install the following dependencies:

• express
• dotenv
• nodemon

To install these dependencies, run the following command:

npm install express dotenv --save && npm install nodemon --save-dev
# yarn add express dotenv && yarn add nodemon --dev

Step 4: Start the local server

Copy the following script into the package.json file:

"scripts": {
  "start": "nodemon src/server.js"
}

Then start the local server with the start command:

npm start
# yarn start

The local server becomes available at http://localhost:3001.

Step 5: Expose the local server

For Canva to send requests to a local server, it needs to be exposed via a public URL. One of the easiest ways to do this is with ngrok.

ngrok is a free tool that creates a secure tunnel to a local server. You can create tunnels without an account, but the tunnels expire after a few hours of activity. If you have an account, the tunnels don't expire.

To install ngrok, run the following command:

npm install ngrok --global

Then, to start an ngrok tunnel, run the following command in a separate terminal while the local server is still running:

ngrok http 3001

This command assumes the port of the local server is 3001.

After running this command, ngrok provides a HTTPS-enabled URL that can receive requests from Canva.

Step 6: Configure the app via the Developer Portal

In the Developer Portal, enter the public URL of the server into the app's Base URL field. When sending requests, Canva will append endpoints to this URL.