DEV Community

Adrien Fischer
Adrien Fischer

Posted on • Originally published at revolugame.com

1

Supabase edge functions - a quick start

Supabase edge functions are quite powerful, but you need to setup a lot of things to get started. So here is a quick start guide to get you started.

Disclaimer: this is how I use them in real projects, with my prefered stack, and this post is a way for me to remember how to setup everything.

Usually, I use Next.js, and I want to use the same stack for my edge functions. So I will use the following stack:

npx create-next-app@latest --typescript
Enter fullscreen mode Exit fullscreen mode
npx install supabase --save-dev
npm install @supabase/supabase-js --save
Enter fullscreen mode Exit fullscreen mode

First lets init the supabase project, and start the local server:

npx supabase init
npx supabase start
Enter fullscreen mode Exit fullscreen mode

Now to create an edge functions:

npx supabase functions new my-function
Enter fullscreen mode Exit fullscreen mode

To test it, your need to run the Functions watcher

npx supabase functions serve
Enter fullscreen mode Exit fullscreen mode

So for our test, the edge function will be called by an endpoint. So we need to create a new endpoint in /pages/api/

// pages/api/simple-edge-function.ts
import { createClient } from '@supabase/supabase-js';
import { NextApiRequest, NextApiResponse } from 'next';

const simpleEdgeFunction = async (
  req: NextApiRequest,
  res: NextApiResponse
) => {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL || '',
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ''
  );

  // 'my-function' is the name of the function you created from the cli above
  const { data, error } = await supabase.functions.invoke('my-function', {
    body: { name: 'Functions' },
  });

  console.log(data);

  res.status(200).json({ data, error });
};

export default simpleEdgeFunction;
Enter fullscreen mode Exit fullscreen mode

Now go to supabase/functions/my-function/index.ts, and simply return a string:

// this is the example from the supabase documentation
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';

console.log('Hello from Functions!');

serve(async (req: Request) => {
  const { name } = await req.json();
  const data = {
    message: `Hello ${name}!`,
  };

  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' },
  });
});
Enter fullscreen mode Exit fullscreen mode

Now if you call the endpoint:

curl http://localhost:3000/api/simple-edge-function
Enter fullscreen mode Exit fullscreen mode

it will return:

{
  "data": {
    "message": "Hello Functions!"
  },
  "error": null
}
Enter fullscreen mode Exit fullscreen mode

And print in the functions watcher console:

Hello from Functions!
Enter fullscreen mode Exit fullscreen mode

and in the supabase console:

{ message: 'Hello Functions!' }
Enter fullscreen mode Exit fullscreen mode

If you need to use an env file, you need to run the watcher with the --env-file parameter:

npx supabase functions serve --env-file .env.local
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more