Skip navigation
Skip to main content
Base URL
Base URL

Set up a Base URL (with ngrok)

Learn how to set up Base URL with ngrok, an SSH tunneling service.

In the Developer Portal, extensions have a Base URL field. This indicates that the extension must provide the URL of a server that can receive and respond to HTTP requests from Canva. You can use any programming language, framework, or architecture to handle these requests.

This tutorial explains how to set up a Base URL with:

  • Express.js - A minimal web framework for Node.js.
  • ngrok - A free CLI that exposes a local server via a publicly accessible URL.

Step 1: Install Node.js

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

node --version
bash

You should see something like this:

$ node --version
v14.15.0
bash

If it's not installed, download it from the official website.

Step 2: Set up a new project

Create a project with the following structure:

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

To create this structure, run the following commands:

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

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 || 3000);
javascript

This code initializes an Express.js server without any endpoints. The required endpoints depend on the app's extensions and how they're configured.

Step 3: Install the dependencies

Install the following runtime dependencies:

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
bash

Step 4: Start the local server

Copy the following script into the package.json file:

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

Then start the local server with the start command:

npm run start
# yarn start
bash

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

Step 5: Expose the local server

For Canva to send requests to a local server, it needs to be exposed via a publicly available 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
bash

To verify that ngrok is installed, run the following command:

ngrok version
bash

You should see something like this:

$ ngrok version
ngrok version 2.3.35
bash

If you run into any errors, refer to the official installation instructions.

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

ngrok http 3000
bash

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

After running this command, ngrok provides a HTTPS-enabled URL that can receive requests from Canva. You can enter this URL into the extension's Base URL field.

Example

src/server.js

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 || 3000);
javascript

.env

# add environment variables here
bash

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "nodemon src/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.6"
  }
}
json