Using Wasm modules | Supabase 한국어

Edge Functions supports running WebAssembly (Wasm) modules. WebAssembly is useful if you want to optimize code that's slower to run in JavaScript or require low-level manipulation.

This allows you to:

Optimize performance-critical code beyond JavaScript capabilities
Port existing libraries from other languages (C, C++, Rust) to JavaScript
Access low-level system operations not available in JavaScript

For example, libraries like magick-wasm port existing C libraries to WebAssembly for complex image processing.

Writing a Wasm module

You can use different languages and SDKs to write Wasm modules. For this tutorial, we will write a basic Wasm module in Rust that adds two numbers.

Note

Follow this guide on writing Wasm modules in Rust to setup your dev environment.

Create a new Edge Function

Create a new Edge Function called wasm-add
```
supabase functions new wasm-add
```
Create a new Cargo project

Create a new Cargo project for the Wasm module inside the function's directory:
```
cd supabase/functions/wasm-add
cargo new --lib add-wasm
```

Add the Wasm module code

Add the following code to add-wasm/src/lib.rs.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: u32, b: u32) -> u32 {
    a + b
}

Update the Cargo.toml file

Update the add-wasm/Cargo.toml to include the wasm-bindgen dependency.

[package]
name = "add-wasm"
version = "0.1.0"
description = "A simple wasm module that adds two numbers"
license = "MIT/Apache-2.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Build the Wasm module

Build the package by running:
```
wasm-pack build --target deno
```
This will produce a Wasm binary file inside add-wasm/pkg directory.

Calling the Wasm module from the Edge Function

Update your Edge Function to call the add function from the Wasm module:

import { withSupabase } from 'npm:@supabase/server@^1'

import { add } from './add-wasm/pkg/add_wasm.js'

// Authenticated endpoint, so deploy with verify_jwt = true.
export default {
  fetch: withSupabase({ auth: 'user' }, async (req) => {
    const { a, b } = await req.json()
    return Response.json({ result: add(a, b) })
  }),
}

Note

Supabase Edge Functions currently use Deno 1.46. From Deno 2.1, importing Wasm modules will require even less boilerplate code.

Bundle and deploy

Before deploying, ensure the Wasm module is bundled with your function by defining it in supabase/config.toml:

Note

You will need update Supabase CLI to 2.7.0 or higher for the static_files support.
Static files cannot be deployed using the --use-api API flag. You need to build them with Docker on the CLI.

[functions.wasm-add]
static_files = [ "./functions/wasm-add/add-wasm/pkg/*"]

Deploy the function by running:

supabase functions deploy wasm-add