Hello!
I have found that Edge Functions are a valuable tool and should be used with Weweb. In order to create (not run/call) edge functions in Supabase we need to self host. Below is an overview of what I did to get from “These are unknown words to me” to having it all up and running, as I posted it for someone on Supabase Discord. Hope it helps!
"Not a coder here, 3 days ago everything about local hosting were unknown words to me - now I have it all set up and pumping out edge functions like I know what I am doing. You will need 3-4 conversations so the AI doesn’t fill up. In each new one start with "here is where I am in the process and this is what has happened: {paste the last 50-100-150 lines from the terminal}. Be ready to spend 2-6 hours on this depending on you coding level and how good you are with talking to the AIs. Rest assured it will work in the end.
I suggest you do a bit of reading supabase docs on the matter of CLI/self hosting to get an idea, paste stuff in the model from there and ask for overview of what it means.
You will have to use a lot of screenshots and pasting in the models what is happening in the terminal. In my case I did a first setup then realised I might have mis-structured my files took everything out and made a clean reinstall. It helped with clarity on some things.
Inro: “You are an expert in coding, app development, API’s and security, Visual Studio Code by Microsoft installed on an Intel mac, “Supabase” and “Weweb” platforms, Edge Functions. I am in the process of developing a web application with Weweb for the frontend and Supabase in the backend. My goal in using this setup is to create Edge Functions in Supabase which will handle API calls in a secure manner.”
Keywords for what will happen after: VS Code, command line tools (if they are not there already), Docker, Deno, Supabase CLI, CORS, $SHELL (ask AI to make sure you in the right one every time), PATHS. Your final file structure in VS Code will look like the image I uploaded (feed it in the model after you install VS Code to make sure you do it right from the first time).
When you play with Deno read the welcome screen of the extension in VS Code and the setup guide in their documentation for some details the model might miss.
Note: when you have everything set up and ready to command “supabase db start” make sure the Docker app is open and running!
Here is the code of my first function with CORS and AUTH check. Feed it in the model from the beginning if you want to help with priming and: what we want to achieve in the end. You can also use this as a template for other API calls you want to make. This function works as is so any errors you will have to screenshot/paste in the model to get them fixed. Also It has been posted in a couple forums to get some human advice on whether we are involuntarily sharing our bank accounts. This is my level of knowledge on the matter and I got this working so don’t worry."
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
import { corsHeaders } from '../_shared/cors.ts';
const supabase = createClient(
Deno.env.get('SUPABASE_URL') ?? '',
Deno.env.get('SUPABASE_ANON_KEY') ?? '',
{ auth: { persistSession: false } }
);
serve(async (req: Request) => {
if (req.method === 'OPTIONS') {
return new Response(null, { status: 204, headers: corsHeaders });
}
try {
const authHeader = req.headers.get('Authorization');
if (!authHeader) {
throw new Error('Missing Authorization header');
}
const token = authHeader.replace('Bearer ', '');
const { data: { user }, error: userError } = await supabase.auth.getUser(token);
if (userError || !user) {
throw new Error('Invalid or expired token');
}
const url = new URL(req.url);
const input = url.searchParams.get('input');
if (!input) {
console.error('Missing input parameter');
throw new Error('Missing input parameter');
}
const apiKey = Deno.env.get('GOOGLE_API_KEY');
if (!apiKey) {
console.error('Missing API key');
throw new Error('Missing API key');
}
const apiUrl = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${encodeURIComponent(input)}&key=${apiKey}`;
const response = await fetch(apiUrl);
const data = await response.json();
return new Response(JSON.stringify(data), {
status: 200,
headers: { ...corsHeaders, 'Content-Type': 'application/json' }
});
} catch (error) {
console.error('Error:', error.message);
return new Response(JSON.stringify({ error: error.message }), {
status: 400,
headers: { ...corsHeaders, 'Content-Type': 'application/json' }
});
}
});
Come back here if you get stuck and I will help you if I can. Good Luck!