Platform concepts
Frontend development
Backend development
Client API
Server API
Reference
Set up a Base URL (with ngrok)
Learn how to set up Base URL with ngrok, an SSH tunneling service.
In the Developer Portal, some 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:
ngrok is a useful tool, but it has inherent security risks, such as someone figuring out the URL of your server and accessing proprietary information. Be mindful of the risks, and if you're working as part of an organization, talk to your IT department.
Step 1: Install Node.js
To check if Node.js is installed, run the following command:
1
node --version
Copied!
You should see something like this:
1
$ node --version
2
v14.15.0
Copied!
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:
1
mkdir my-app
2
cd my-app
3
npm init --yes # yarn init
4
mkdir src
5
touch .env src/server.js
Copied!
The
touch command is not available on Windows. If you're using Windows, create the files manually.Then copy the following code into the
server.js file:1
require("dotenv").config();
2
const express = require("express");
3
​
4
const app = express();
5
​
6
app.use(express.json());
7
app.use(express.static("public"));
8
​
9
// Routes go here
10
​
11
app.listen(process.env.PORT || 3000);
Copied!
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:
1
npm install express dotenv --save && npm install nodemon --save-dev
2
# yarn add express dotenv && yarn add nodemon --dev
Copied!
Step 4: Start the local server
Copy the following script into the
package.json file:1
"scripts": {
2
"start": "nodemon src/server.js"
3
}
Copied!
Then start the local server with the
start command:1
npm run start
2
# yarn start
Copied!
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:
1
npm install ngrok --global
Copied!
To verify that ngrok is installed, run the following command:
1
ngrok version
Copied!
You should see something like this:
1
$ ngrok version
2
ngrok version 2.3.35
Copied!
To start an ngrok tunnel, run the following command in a separate terminal while the local server is still running:
1
ngrok http 3000
Copied!
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
1
require("dotenv").config();
2
const express = require("express");
3
​
4
const app = express();
5
​
6
app.use(express.json());
7
app.use(express.static("public"));
8
​
9
// Routes go here
10
​
11
app.listen(process.env.PORT || 3000);
Copied!
.env
1
# add environment variables here
Copied!
package.json
1
{
2
"name": "my-app",
3
"version": "1.0.0",
4
"description": "",
5
"main": "server.js",
6
"scripts": {
7
"start": "nodemon src/server.js"
8
},
9
"keywords": [],
10
"author": "",
11
"license": "ISC",
12
"dependencies": {
13
"dotenv": "^8.2.0",
14
"express": "^4.17.1"
15
},
16
"devDependencies": {
17
"nodemon": "^2.0.6"
18
}
19
}
Copied!
Last modified 7mo ago