How to run all edge functions in local development

[waynebloss]

Please note: Since CLI v1.38.6 this has been added natively when running supabase functions serve without any function name: https://supabase.com/docs/reference/cli/supabase-functions-serve

---

Hello, just wanted to share how I've been running all of my edge functions at once in local development.

I create one single edge function that imports all the others and acts as a proxy for them. Then, I run:

supabase functions serve localdev

Here's an example from my project file at supabase/functions/localdev/index.ts:

import {
  ConnInfo,
  Handler,
  serve,
} from "https://deno.land/std@0.131.0/http/server.ts";
// Local
import { corsHeaders } from "../_shared/cors.ts";

console.log("Setting up localdev function...");

const handlers = {
  hello: await import("../hello/handler.ts").then((it) => it.handler),
  "invite-user": await import("../invite-user/handler.ts").then((it) =>
    it.handler
  ),
  "make-me-admin": await import("../make-me-admin/handler.ts").then((it) =>
    it.handler
  ),
} as Record<string, Handler>;

function localdevHandler(req: Request, connInfo: ConnInfo) {
  // This is needed if you're planning to invoke your function from a browser.
  if (req.method === "OPTIONS") {
    return new Response("OK", { headers: corsHeaders });
  }
  console.log(`${req.method} ${req.url}`);
  const url = new URL(req.url);
  const urlParts = url.pathname.split("/");
  const handlerName = urlParts[urlParts.length - 1];
  const handler = handlers[handlerName];
  try {
    return handler(req, connInfo);
  } catch (err) {
    return new Response(
      JSON.stringify({ error: err }),
      {
        headers: { ...corsHeaders, "Content-Type": "application/json" },
        status: 200,
      },
    );
  }
}

serve(localdevHandler);

console.log("OK");

[crushingCodes]

@waynebloss thanks for your solution. I was wondering if you use the js api to invoke the functions?

e.g.

await supabase.functions.invoke('my_function')

I cannot find a way to set this url. But maybe i might have to settle for making my own fetch calls for now, still helps a lot thanks for sharing

[crushingCodes]

@waynebloss Thanks so much for the detailed help, i will check it out and reply back 😄

[crushingCodes]

@waynebloss It just needed some config fixes around the place and it worked. Now I can develop fully local thanks for your post

[waynebloss]

@crushingCodes Cool! Glad to help

[WesleyYue]

@crushingCodes can you explain what you did?

[crushingCodes]

@WesleyYue In the end i noticed i had the wrong environmental values set, so fixing this in the js supabase client meant it worked automatically for me.

[drewbietron]

I tried this but the first function binds to port 3000 and the second one cant be served since it tried to run it on the same port.

I am also assuming that handler.ts is the only file within your function folder? Mine is setup like functions/function-name/index.ts so instead of importing handler.ts and returning the handler .then((it) => it.handler) I am just using hello: await import("../hello/index.ts").then((it) => it),

Do I need another handler file for each function that declares a different port for each in the serve?

[waynebloss]

Hey @drewbietron - From Supabase point of view, I only have ONE Supabase function called localdev. Therefore, I am only calling serve(handler) from inside the localdev/index.ts file.

In order for localdev/index.ts to act as a proxy for all of the other functions, I had to split each of the other functions into 2 files: index.ts and handler.ts. Here's an example of my supabase/functions/hello function:

• supabase/functions/hello/handler.ts

// Local
import { corsHeaders } from "../_shared/cors.ts";

export async function handler(req: Request) {
  const { email } = await req.json();
  const data = {
    message: `Hello ${email}!`,
  };
  return new Response(
    JSON.stringify(data),
    {
      headers: { ...corsHeaders, "Content-Type": "application/json" },
      status: 200,
    },
  );
}

• supbase/functions/hello/index.ts

// Follow this setup guide to integrate the Deno language server with your editor:
// https://deno.land/manual/getting_started/setup_your_environment
// This enables autocomplete, go to definition, etc.

import { serve } from "https://deno.land/std@0.131.0/http/server.ts";
// Local
import { handler } from "./handler.ts";

serve(handler);

// To invoke:
// curl -i --location --request POST 'http://localhost:54321/functions/v1/' \
//   --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs' \
//   --header 'Content-Type: application/json' \
//   --data '{"email":"Functions"}'

[drewbietron]

I gotcha! Thanks for the reply @waynebloss

[selbyk]

Great solution! I just started using it.

I wanted to know if you've given any thought to using a mix of jwt verified and non-verified handlers (e.g. verified for user-initiated functions and non-verified for webhook functions). I guess since this will be only for local environments I can just authenticate the requests to normally non-verified functions, but I was interested if there's a simple solution for testing all the functions together how they will be in production

Thank you again for sharing++

[waynebloss]

Glad to help! Maybe you could export a meta-data object from each of the handler.ts files discussed above. Inside that object you could have properties that tell the localdev function how to authenticate it, or something like that.

[SteveChurch]

import {
  ConnInfo,
  Handler,
  serve,
} from "https://deno.land/std@0.131.0/http/server.ts";
// Local
import { corsHeaders } from "../_shared/cors.ts";

console.log("Setting up localdev function...");

const handlers = {
  hello: await import("../hello/handler.ts").then((it) => it.handler),
  "invite-user": await import("../invite-user/handler.ts").then((it) =>
    it.handler
  ),
  "make-me-admin": await import("../make-me-admin/handler.ts").then((it) =>
    it.handler
  ),
} as Record<string, Handler>;

function localdevHandler(req: Request, connInfo: ConnInfo) {
  // This is needed if you're planning to invoke your function from a browser.
  if (req.method === "OPTIONS") {
    return new Response("OK", { headers: corsHeaders });
  }
  console.log(`${req.method} ${req.url}`);
  const url = new URL(req.url);
  const urlParts = url.pathname.split("/");
  const handlerName = urlParts[urlParts.length - 1];
  const handler = handlers[handlerName];
  try {
    return handler(req, connInfo);
  } catch (err) {
    return new Response(
      JSON.stringify({ error: err }),
      {
        headers: { ...corsHeaders, "Content-Type": "application/json" },
        status: 200,
      },
    );
  }
}

serve(localdevHandler);

console.log("OK");

Whats in your cors.ts? @waynebloss

[waynebloss]

Here you go:

export const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey",
};

[SteveChurch]

Thanks!

[drewbietron]

Have still been using this method to this day. Thanks @waynebloss -- Supabase should enable something like this by default for new projects.

[jerzakm]

Great hack, I'd love the ability to dev multiple functions locally. I'm currently working on a project where there is a lot of logical dependencies between functions and it's very tedious to test the whole thing running.

[logemann]

yeah, there should be a solution to this. See Netlify. With them its easy to startup a container via their CLI with all the functions up and running.

[selbyk]

Great solution! It's been a life saver for me. Today I wanted to add an oak server function to our project. It could just be me not understanding fully, but I couldn't get it to work with http/server. I had to modify the localdev function a bit to use Deno.listen:

./supabase/functions/localdev/index.ts

// Solution from: https://github.com/supabase/supabase/discussions/6786
// Modified to use Deno functions instead of std/http for oak
import { HandleMethod } from 'https://deno.land/x/oak@v11.1.0/application.ts';
// Local
import { corsHeaders } from '../_shared/cors.ts';

console.log('Setting up localdev function...');

// Import handlers for all functions you want to serve.
// Note: oak app handlers must be bound to the app instance
const handlers = {
	hello: await import('../hello/handler.ts').then((it) => it.handler),
	'invite-user': await import('../invite-user/handler.ts').then((it) => it.handler),
	'make-me-admin': await import('../make-me-admin/handler.ts').then((it) => it.handler),
	'oak-server': await import('../oak-server/app.ts').then((it) => it.app.handle.bind(it.app))
} as Record<string, HandleMethod>;

// Handle incoming requests and route to the appropriate function handler
function localdevHandler(req: Request, conn: Deno.Conn) {
	// This is needed if you're planning to invoke your function from a browser.
	if (req.method === 'OPTIONS') {
		return new Response('OK', { headers: corsHeaders });
	}
	console.log(`${req.method} ${req.url}`);
	const url = new URL(req.url);
	const [, handlerName] = url.pathname.match(/^\/?([^\/]+)/m) ?? [];
	try {
		if (!handlerName) {
			throw Error(`localdev: No handler name found in URL path ${url.pathname}`);
		}
		const handler = handlers[handlerName];
		if (!handler) {
			throw Error(
				`localdev: No matching handler function found for ${handlerName} in ${JSON.stringify(Object.keys(handlers))}`
			);
		}
		return handler(req, conn);
	} catch (err) {
		console.error(err.message);
		return new Response(JSON.stringify({ error: err.message }), {
			headers: { ...corsHeaders, 'Content-Type': 'application/json' },
			status: 500
		});
	}
}

// Listen for incoming requests
const listener = Deno.listen({ hostname: 'localhost', port: 8000 });
for await (const conn of listener) {
	(async () => {
		const requests = Deno.serveHttp(conn);
		for await (const { request, respondWith } of requests) {
			const response = await localdevHandler(request, conn);
			if (response) {
				respondWith(response);
			} else {
				respondWith(new Response('Not Found', { status: 404 }));
			}
		}
	})();
}

./supabase/functions/oak-server/index.ts

import { app } from './app.ts';

await app.listen({ port: 8000 });

./supabase/functions/oak-server/app.ts

import { Application, Router } from 'https://deno.land/x/oak@v11.1.0/mod.ts';

const router = new Router();
router
	// Note: path will be prefixed with function name
	.get('/oak-server', (context) => {
		context.response.body = 'This is an example Oak server running on Edge Functions!';
	})
	.post('/oak-server/greet', async (context) => {
		// Note: request body will be streamed to the function as chunks, set limit to 0 to fully read it.
		const result = context.request.body({ type: 'json', limit: 0 });
		const body = await result.value;
		const name = body.name || 'you';

		context.response.body = { msg: `Hey ${name}!` };
	})
	.get('/oak-server/redirect', (context) => {
		context.response.redirect('https://www.example.com');
	});

export const app = new Application();

app.use(router.routes());
app.use(router.allowedMethods());

Refs:

• https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/oak-server
• https://github.com/oakserver/oak#handle-method

[thorwebdev]

Since CLI v1.38.6 this has been added natively when running supabase functions serve without any function name: https://supabase.com/docs/reference/cli/supabase-functions-serve

[sangonzal]

@laktek support request sent!

[ifarobi]

@ifarobi @SebasScript Can you try updating your CLI to the latest version (1.46+). We shipped a fix for it.

Thank you for mentioning this!
I was using 1.40.1 I thought it was the latest version since I installed it from scoop. Now I'm using npx supabase and it's working normally!

Does supabase in scoop not updated to the latest version?

[sweatybridge]

Does supabase in scoop not updated to the latest version?

Yes, there was an issue with goreleaser that prevented cli from being updated on scoop goreleaser/goreleaser#3887. It was resolved upstream last week and should be available in the upcoming release soon.

[SebasScript]

Hi I updated supabase (using scoop on windows) now running version 1.48.0
the panic error is gone, but for all funtions that use supabase sdk on client I am getting this error. I am using one function where I use server send events, which send a post request directly to the function, that one doesn't throw the error

An error occurred: TypeError: t is not a function
at Ke.exports (https://esm.sh/v113/axios@0.26.1/esnext/axios.mjs:523:16)
at T.request (https://esm.sh/v113/axios@0.26.1/esnext/axios.mjs:681:17)
at Function.request (https://esm.sh/v113/axios@0.26.1/esnext/axios.mjs:29:22)
at https://esm.sh/v113/openai@3.2.1/esnext/openai.mjs:145:22
at https://esm.sh/v113/openai@3.2.1/esnext/openai.mjs:864:91
at async Server. (file:///home/deno/functions/chatgpt-exh/index.ts:20:28)
at async Server.#respond (https://deno.land/std@0.168.0/http/server.ts:221:24)

same functions work if I run them alone

[SebasScript]

There was just another update to 1.50, after that update I am getting a corse error, the functions still work when run as stand alone

acess to XMLHttpRequest at 'http://localhost:54321/functions/v1/chatgptstream' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am running with --no-verify-jwt flag, and there are the appropriate corse headers set in the functions (as mentioned they work when run in single mode)