Supabase + Bubble connection with API connector

[siddharth]

I was trying to use an external database that can easily integrate with my bubble app via API and also need to be much powerful enough to withstand thousands of calls and filtering.

my choice - Firebase but as i saw was not that rest API friendly especially Realtime one also had hard time figuring it…

Next my option was Zano and Backendless but the price was very high, limited API calls and I was having doubt about reliability and future dependency. They were more concerned on no code db thing than actual db itself (just my own thoughts I am not saying its bad)
I also considered baserow but still I was not at peace of mind

I really wanted firebase kind of thing so after a lot of research in the field, I get to know about Supabase which actually was a firebase alternative and opensource.

I search this forum about how can I connect supabase but I got really got 0 answer or clues And so after days of figuring out how to connect with bubble I finally get my answers.
Actually their support was awesome on discord and so i really liked that🙃

Now I have successfully connected my bubble app and it works flawlessly so i why not share this to my Bubble community and now I am here typing

I am currently in Free plan which includes
500MB database & 1GB file storage
2GB bandwidth
50MB file uploads
Unlimited API calls with filtering
Awesome support on discord

Now here’s my tables of orders which have

In this orders table I got 1,106,999 rows

And I have many others tables (clients, leads, internals) and some of them have more than 100k rows each

The total space used were:

Now here’s how we can get the API details for our connector.
Firstly we need to create a project and a table after that opening it

by selecting the appropriate table and the api calls are dynamic as per your tables

by selecting bash we gat all the rest API details and endpoints

Now,
in bubble API connector we have to add two shared headers as

1. apikey
2. authorization with Bearer#space# api key

Get Api key in Supabase here

To get all therows of table

To get a specific order details using order id

https:// yehstwuktowapuuiwawm.supabase. co/rest/v1/orders?order_id=eq.[value]

also add row, update and delete selected are very simple and its doc can be found on the supabase API page

IMPORTANT
make sure you use all the name of rows, tables in SMALL CAPS because that will only work as Supabase use Postgres Database
I am not connected to anyways with supabase i found it great and so i M sharing this

So guys hope you liked it and if you have any queries feel free to reply

[ryanck]

Nice work @siddharth

[gerbertdelangen]

@siddharth,

First of all, very cool and thanks for sharing. I’m definitily going to play around with it this weekend (using your learnings). Tried Xano and Backendless before and was not very enthusiastic about them.

Did you find a way to push updates to clients as soon as data changes? If not, probably something like this should work, when data changes a simple API / webhook updates a datatype in Bubble which in turn triggers an event on the clients.

[sensei01]

hey @gerbertdelangen curious to know more about why you were not enthusiastic about Xano? I have started working with it and would like to know some feedback if possible. thanks

[gerbertdelangen]

Hey S, the pricing is/was kind a steep and I did not “feel” the product. But there are people very enthousiastic about it, f.i. in this topic http://forum.bubble.io/t/xano-a-powerful-external-backend-and-database-for-bubble/197585/18. Also they (f.i. Michael_xano) seem very helpful.

[gazinhio]

Many thanks for posting it. I love Supabase, mainly cos it’s Postgres under the hood, tons better and cheaper than with Firebase etc and used it in development when I was still coding my apps

Not tried it with Bubble yet & this post will definitely help me with that so thanks again. I don’t miss coding at all, but I do miss having the control that SQL gives you and also control over joins and indexes. The Bubble DB requires special handling which is often a bit restrictive but it is so darn convenient and simple and also gotta consider privacy rules as well. Don’t wanna give too much up to move to a 3rd party DB service.

[siddharth]

@gazinhio

Postgres under the hood, tons better and cheaper than with Firebase

Well said

[siddharth]

@gerbertdelangen

when data changes a simple API / webhook updates a datatype in Bubble which in turn triggers an event on the clients.

Yes this can work to push updates

[miguel]

How? Backend workflows cannot update user’s frontend

[ryanck]

Hey @siddharth

Do you mind creating a video of how to leverage the use of Supabase with Bubble by for example, getting some operations done in Supabase and then back to Bubble?

Also, something like getting a record and duplicating 30 times and creating new records in Bubble?

That would be great to see the potential of Supabase.

Thanks a lot.

[siddharth]

@ryanck

getting some operations done in Supabase and then back to Bubble?

Yes it can be done as Supabase have great function and functionality as a backend.

@ryanck

duplicating 30 times and creating new records in Bubble?

This is something I never thought as I don’t see a particular reason behind it, but anyways when I will upload a tutorial I will cover it

[build.clearly]

Look forward for the tutorials

[karunesh91]

Hey Siddharth, Great tutorial.

But i am stuck at something that i don’t understand.

I did exactly the way here but on api call, I get empty response.

My tables and columns are are lower case.

How do i resolve it?

[siddharth]

@karunesh91 Instead of trying to get a particular record did you try to get all the record because that will be easier to get?

[karunesh91]

See the first image [get all the record (addenda_codes is a table).

[karunesh91]

It returned empty values. I have tried with other tables in my db. All are empty

[siddharth]

@karunesh91 I believe you are doing something wrong.
Without actually seeing good amount of your API structures i can’t get the idea

[siddharth]

Is your authentication all good?
Also have you switched on the API CRUD feature in the supabase itself ?

[karunesh91]

Authentication all set.
API CRUD enabled.
Even, I have tried disabling RLS. But no response.

Is there a way we can screen share?
It will be really kind of you.

[siddharth]

@karunesh91 Let’s just chat privately.
We will share the conclusion here😎