mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 21:59:16 +03:00
Rodrigo Mansueliandgithub-actions[bot]
d1853ed6a2
* Chore: warning about static files & edge functions * Update limits.mdx * Update wasm.mdx * Update apps/docs/content/guides/functions/wasm.mdx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
140 lines
4.1 KiB
Plaintext
140 lines
4.1 KiB
Plaintext
---
|
|
id: 'function-wasm'
|
|
title: 'Using Wasm modules'
|
|
component: true
|
|
description: 'How to use WebAssembly in Edge Functions.'
|
|
subtitle: 'Use WebAssembly in Edge Functions.'
|
|
---
|
|
|
|
Edge Functions supports running [WebAssembly (Wasm)](https://developer.mozilla.org/en-US/docs/WebAssembly) 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](https://supabase.com/docs/guides/functions/examples/image-manipulation) 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 simple Wasm module in Rust that adds two numbers.
|
|
|
|
<Admonition type="note">
|
|
|
|
Follow this [guide on writing Wasm modules in Rust](https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_Wasm) to setup your dev environment.
|
|
|
|
</Admonition>
|
|
<StepHikeCompact>
|
|
<StepHikeCompact.Step step={1} fullWidth>
|
|
<StepHikeCompact.Details title="Create a new Edge Function" fullWidth>
|
|
Create a new Edge Function called `wasm-add`
|
|
|
|
```bash
|
|
supabase functions new wasm-add
|
|
```
|
|
|
|
</StepHikeCompact.Details>
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={2} fullWidth>
|
|
<StepHikeCompact.Details title="Create a new Cargo project" fullWidth>
|
|
Create a new Cargo project for the Wasm module inside the function's directory:
|
|
|
|
```bash
|
|
cd supabase/functions/wasm-add
|
|
cargo new --lib add-wasm
|
|
```
|
|
|
|
</StepHikeCompact.Details>
|
|
</StepHikeCompact.Step>
|
|
<StepHikeCompact.Step step={3} fullWidth>
|
|
<StepHikeCompact.Details title="Add the Wasm module code" fullWidth>
|
|
|
|
Add the following code to `add-wasm/src/lib.rs`.
|
|
|
|
<$CodeSample
|
|
path="edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs"
|
|
lines={[[1, -1]]}
|
|
meta="lib.rs"
|
|
language="rust"
|
|
/>
|
|
|
|
</StepHikeCompact.Details>
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={4} fullWidth>
|
|
<StepHikeCompact.Details title="Update the Cargo.toml file" fullWidth>
|
|
|
|
Update the `add-wasm/Cargo.toml` to include the `wasm-bindgen` dependency.
|
|
|
|
<$CodeSample
|
|
path="edge-functions/supabase/functions/wasm-modules/add-wasm/Cargo.toml"
|
|
lines={[[1, -1]]}
|
|
meta="Cargo.toml"
|
|
/>
|
|
|
|
</StepHikeCompact.Details>
|
|
</StepHikeCompact.Step>
|
|
|
|
<StepHikeCompact.Step step={5} fullWidth>
|
|
<StepHikeCompact.Details title="Build the Wasm module" fullWidth>
|
|
|
|
Build the package by running:
|
|
|
|
```bash
|
|
wasm-pack build --target deno
|
|
```
|
|
|
|
This will produce a Wasm binary file inside `add-wasm/pkg` directory.
|
|
|
|
|
|
</StepHikeCompact.Details>
|
|
</StepHikeCompact.Step>
|
|
|
|
</StepHikeCompact>
|
|
|
|
---
|
|
|
|
## Calling the Wasm module from the Edge Function
|
|
|
|
Update your Edge Function to call the add function from the Wasm module:
|
|
|
|
<$CodeSample
|
|
path="edge-functions/supabase/functions/wasm-modules/index.ts"
|
|
lines={[[1, -1]]}
|
|
meta="index.ts"
|
|
/>
|
|
|
|
<Admonition type="note">
|
|
|
|
Supabase Edge Functions currently use Deno 1.46. From [Deno 2.1, importing Wasm modules](https://deno.com/blog/v2.1) will require even less boilerplate code.
|
|
|
|
</Admonition>
|
|
|
|
---
|
|
|
|
## Bundle and deploy
|
|
|
|
Before deploying, ensure the Wasm module is bundled with your function by defining it in `supabase/config.toml`:
|
|
|
|
<Admonition type="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](/docs/guides/functions/quickstart#step-6-deploy-to-production).
|
|
|
|
</Admonition>
|
|
|
|
```toml
|
|
[functions.wasm-add]
|
|
static_files = [ "./functions/wasm-add/add-wasm/pkg/*"]
|
|
```
|
|
|
|
Deploy the function by running:
|
|
|
|
```bash
|
|
supabase functions deploy wasm-add
|
|
```
|