Set up a Development URL (with JavaScript)

In the Developer Portal, some extensions have an Extension source field. This field determines where Canva loads the extension from.
The field has two options:
JavaScript file
Development URL
By providing a Development URL, you can make changes to an extension and see the results of those changes by simply closing and reopening the extension in the editor.
This tutorial explains how to set up a Development URL with Babel and webpack.
If you're developing an extension with TypeScript, refer to Set up a Development URL (with TypeScript).
Step 1: Create a project
To begin, set up a project with the following structure:
my-app/
dist/
src/
index.html
index.js
package.json
webpack.config.js
To set up this structure, run the following commands:
1
mkdir my-app my-app/src my-app/dist
2
cd my-app
3
npm init --yes # yarn init --yes
4
touch src/index.html src/index.js webpack.config.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 src/index.html file:
1
<!DOCTYPE html>
2
<html style="max-width: 100%; max-height: 100%; overflow: hidden">
3
  <body style="max-width: 100%; max-height: 100%; margin: 0">
4
    <script>
5
      // Get the URL and version number of JavaScript client
6
      const params = new URLSearchParams(window.location.search);
7
      const baseUrl = params.get("libBase");
8
      const version = params.get("lib");
9
​
10
      // Construct the URL of the JavaScript client
11
      const libUrl = baseUrl + version + ".js";
12
​
13
      // Load the JavaScript client
14
      const lib = document.createElement("script");
15
      lib.src = libUrl;
16
      lib.onload = () => {
17
        // Load the JavaScript bundle for the extension
18
        const extension = document.createElement("script");
19
        extension.src = "main.js";
20
        document.body.appendChild(extension);
21
      };
22
​
23
      document.head.appendChild(lib);
24
    </script>
25
  </body>
26
</html>
Copied!
When Canva loads an extension via the Development URL, this code loads the JavaScript client that lets the extension interact with the Canva editor.
While you're developing an extension with a Development URL, your extension can send arbitrary HTTP requests to non-Canva domains. When you upload a JavaScript file though, those requests will fail.
Step 2: Install the dependencies
In the project's directory, install the following dependencies:
​@babel/core​
​@babel/plugin-transform-react-jsx​
​@babel/plugin-transform-runtime​
​@babel/preset-env​
​babel-loader​
​webpack​
​webpack-cli​
​webpack-dev-server​
To install these dependencies, run the following command:
1
npm install @babel/core @babel/plugin-transform-runtime @babel/plugin-transform-react-jsx @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server --save-dev
2
# yarn add @babel/core @babel/plugin-transform-runtime @babel/plugin-transform-react-jsx @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server --dev
Copied!
These commands install the latest versions of these dependencies, which may have breaking changes that cause issues when setting up a Development URL. Refer to the package.json file for versions that are confirmed to work.
Step 3: Configure Babel
Add the following "babel" property to the package.json file:
1
"babel": {
2
  "presets": ["@babel/preset-env"],
3
  "plugins": [
4
    "@babel/plugin-transform-runtime",
5
    "@babel/plugin-transform-react-jsx"
6
  ]
7
}
Copied!
This configuration loads the presets and plugins installed in the previous step.
The @babel/plugin-transform-react-jsx plugin is only required if you want to render rich controls with JSX.
Step 4: Configure webpack
Copy the following code into the webpack.config.js file:
1
const path = require("path");
2
​
3
const DIST_DIR = path.resolve(__dirname, "dist");
4
const SRC_DIR = path.resolve(__dirname, "src");
5
​
6
module.exports = {
7
  module: {
8
    rules: [
9
      {
10
        test: /\.jsx?$/,
11
        use: "babel-loader",
12
      },
13
    ],
14
  },
15
  resolve: {
16
    extensions: [".js", ".jsx"],
17
  },
18
  devServer: {
19
    static: [DIST_DIR, SRC_DIR],
20
    https: true,
21
    port: 9090,
22
    allowedHosts: "all",
23
  },
24
};
Copied!
This configuration:
Runs the local development server over HTTPS.
Serves content from the src and dist directories.
Sets the allowedHosts option to "all".
If you plan on changing the webpack configuration, make the changes incrementally and test that the build still compiles after each change.
Step 5: Create "build" and "start" scripts
Add the following scripts to the package.json file:
1
"scripts": {
2
  "build": "webpack --config ./webpack.config.js --mode production",
3
  "start": "webpack serve --config ./webpack.config.js --mode development"
4
}
Copied!
To build a JavaScript bundle, run the following command:
1
# Build a JavaScript bundle
2
npm run build # yarn build
Copied!
To start a local development server, run the following command:
1
# Start a local development server
2
npm run start # yarn start
Copied!
By default, webpack builds a main.js file to the dist directory.
Step 6: Handle the invalid security certificate
If you start the local development server and navigate to https://localhost:9090, the following warning appears:
NET::ERR_CERT_AUTHORITY_INVALID
This is because the server doesn't have a valid security certificate.
Because of this warning, Canva won't load the extension.
You can solve this problem in a few ways:
Option 1: Set up a local security certificate
You can create a local, self-signed security certificate. This is the best option, since once it's setup, you don't have to think about it again.
To learn how to set up a certificate, see Set up a local security certificate.
Option 2: Bypass the warning
You know the server is secure, since you're the one who set it up, so it's okay to bypass the warning.
To bypass the warning in Google Chrome:
1.Start the development server.
2.Navigate to https://localhost:9090.
3.Click Advanced.
4.Click Proceed to localhost (unsafe).
A blank page should appear.
You need to bypass this warning every time you start the server.
Option 3: Use ngrok
You can use ngrok to expose a local server via a public, HTTPS-enabled URL. This provides a valid security certificate and prevents the warning from occurring.
Step 7: Preview the extension
To verify that the Development URL is working as expected:
1.Start the local development server.
2.Add the following code to the src/index.js file:
1
const canva = window.canva.init();
2
​
3
canva.onReady(async (opts) => {
4
  console.log("Hello world");
5
});
Copied!
3.Create an extension via the Developer Portal.
4.In the Development URL field, enter the URL of the server.
5.Click Preview.
6.Select the extension.
7.When the Canva editor loads, click Use.
8.Open the JavaScript Console.
You should see the "Hello world" text in the console.
Example
src/index.html
1
<!DOCTYPE html>
2
<html style="max-width: 100%; max-height: 100%; overflow: hidden">
3
  <body style="max-width: 100%; max-height: 100%; margin: 0">
4
    <script>
5
      // Get the URL and version number of JavaScript client
6
      const params = new URLSearchParams(window.location.search);
7
      const baseUrl = params.get("libBase");
8
      const version = params.get("lib");
9
​
10
      // Construct the URL of the JavaScript client
11
      const libUrl = baseUrl + version + ".js";
12
​
13
      // Load the JavaScript client
14
      const lib = document.createElement("script");
15
      lib.src = libUrl;
16
      lib.onload = () => {
17
        // Load the JavaScript bundle for the extension
18
        const extension = document.createElement("script");
19
        extension.src = "main.js";
20
        document.body.appendChild(extension);
21
      };
22
​
23
      document.head.appendChild(lib);
24
    </script>
25
  </body>
26
</html>
Copied!
src/index.js
1
const canva = window.canva.init();
2
​
3
canva.onReady(async (opts) => {
4
  console.log("Hello world");
5
});
Copied!
package.json
1
{
2
  "name": "my-app",
3
  "scripts": {
4
    "build": "webpack --config ./webpack.config.js --mode production",
5
    "start": "webpack serve --config ./webpack.config.js --mode development"
6
  },
7
  "babel": {
8
    "presets": ["@babel/preset-env"],
9
    "plugins": [
10
      "@babel/plugin-transform-runtime",
11
      "@babel/plugin-transform-react-jsx"
12
    ]
13
  },
14
  "devDependencies": {
15
    "@babel/core": "^7.17.10",
16
    "@babel/plugin-transform-react-jsx": "^7.17.3",
17
    "@babel/plugin-transform-runtime": "^7.17.10",
18
    "@babel/preset-env": "^7.17.10",
19
    "babel-loader": "^8.2.5",
20
    "webpack": "^5.72.0",
21
    "webpack-cli": "^4.9.2",
22
    "webpack-dev-server": "^4.9.0"
23
  }
24
}
Copied!
webpack.config.js
1
const path = require("path");
2
​
3
const DIST_DIR = path.resolve(__dirname, "dist");
4
const SRC_DIR = path.resolve(__dirname, "src");
5
​
6
module.exports = {
7
  module: {
8
    rules: [
9
      {
10
        test: /\.jsx?$/,
11
        use: "babel-loader",
12
      },
13
    ],
14
  },
15
  resolve: {
16
    extensions: [".js", ".jsx"],
17
  },
18
  devServer: {
19
    static: [DIST_DIR, SRC_DIR],
20
    https: true,
21
    port: 9090,
22
    allowedHosts: "all",
23
  },
24
};
Copied!

Frontend development - Previous

Development URL

Set up a Development URL (with TypeScript)

Last modified 1mo ago

Copy link

Contents

Step 1: Create a project

Step 2: Install the dependencies

Step 3: Configure Babel

Step 4: Configure webpack

Step 5: Create "build" and "start" scripts

Step 6: Handle the invalid security certificate

Step 7: Preview the extension

Example