Search for a command to run...
No comments yet. Be the first to comment.
In this serie we'll be covering some topics like: - Account creation - Database creation and management - Storage(buckets) - Authentication - Edge Functions and more!
Step-to-step process to set up a basic yet fully functional backend
Low-code platforms can be excellent for validating an idea. The risk begins when a temporary launch stack becomes permanent infrastructure for a growing product.
A practical, opinionated baseline for securing fresh Debian/Ubuntu VPS servers before deploying real apps.
How to enable HTTPS on localhost with Vite and mkcert
There are two kinds of developers: those who fear regex, and those who use it like a superpower. The funny part? It’s the same tool — the difference is perspective.Most people think of regex as the thing you use to validate emails, phone numbers, or ...
Why accessibility is everyone’s responsibility
In my previous post Getting Started with Supabase: A Comprehensive Guide for Developers, I covered several basic topics about this great BaaS platform to get you ready for a deep dive into it. So, if this is your first time over here I recommend to go and check it first 😎
According to Supabase self-description:
Edge Functions are server-side Typescript functions, distributed globally at the edge — close to your users. They can be used for listening to webhooks or integrating your Supabase project with third parties.
So, first, they are Typescript functions by default, which means that you can use all the power of this language out of the box. The fact that they are closed to the users by distribution allows faster response times and reduced latency, as the function is executed closer to the user making the request. And finally, they can be integrated with third-parties libraries which allows extending, even more, the capabilities of what you can do.
Back to our Supabase dashboard, we have to go to the left sidebar and click over the “Edge Functions” tab. In there, you’ll see instructions to create an example function called hello-world.
This is how my Supabase edge function project usually looks like:
As you can see there are several files inside the project, don’t worry, will be covering each detail, first let's set that environment up!
npm install supabase --save-dev
in my case, since I’m using MacOS, I’ll be installing it by using brew:
brew install supabase/tap/supabase
supabase init
This is gonna create the folder supabase within two files inside config.toml and seed.sql. Files written in Toml language, are easy-to-read configuration files and as you may be guessing the configuration file for your project. The other file is intended to have some seed data for every time you need to reset your database and be able to restore with some default data (we’ll be covering this in another article)
git init
I have a Git ignore file preconfigured that covers most of the use cases I have faced, feel free to copy and paste, and modify as per your requirements:
Also, I have a prettier file preconfigured for this function, so, you can copy and paste it:
and for the prettier ignore file, you can start with this simple one, after your project grows you may be adding files that you don’t want to be prettify ;)
So, back to our console, let’s create our first function:
It is recommended to use hyphens to name your functions.
supabase functions new hello-world
The first time you run this command, it is going to create a folder called functions, and inside another folder with the name of the function and a file called index.ts. By convention, all function names are at the folder level and inside have an index.ts file.
If you follow the steps until here, this is how your project should look like this:
Now, let's see what’s inside the brand-new function…
There are some things to note here:
✓ Supabase edge functions uses Deno runtime. This is convenient for Supabase functions architecture since Deno is a single binary executable with no external dependencies.
✓ The import is highlighting an error. To have a successful development environment, it is recommended to install the official VSCode Deno extension, it will allow you some configuration like caching new imports, which is the error that is marking the import right now.
✓ At the very end we have commented lines within an example of how to invoke our function with curl. This example has all the needed parameters to test your brand-new function. But before that, we need to deploy our function to Supabase cloud to make it accessible.
supabase functions deploy hello-world --project-ref lwcilxirnpekwwqevcrt
We have covered a complete road to set up a supabase edge function project from scratch. We addressed common errors you’ll find on the road to achieve this, and got over some cool VSCode extensions to improve our development time.
From here, commit & push your changes to any repository of your preference.
Dive deep into the documentation for more advanced examples and understanding.
Stay tuned, I’ll be writing an article integrating Github Actions workflow for your functions 🔥
Repository with the created hello-world function on Github