Supabase
This guide explains how to quickly connect Supabase back-end to a Jet Admin front-end.
Last updated
Was this helpful?
This guide explains how to quickly connect Supabase back-end to a Jet Admin front-end.
Last updated
Was this helpful?
is an open-source Firebase alternative with an array of functions available out of the box.
Using Supabase you can do the following:
Build application: admin panel, internal tool, customer portal, or dashboard
Manage your Supabase data: update, batch edit
Build on top of your database
To Integrate Jet with Supabase and build your first app, follow our guide:
Create a new table by clicking on the Create Table option on the side navigation.
Supabase provides many ways fill the tables with data, from writing queries or creating schemas using UI to simply uploading CSV files.
Open up the database connection information section under Project Settings in Supabase.
Choose a Supabase database from the list of available data sources in Jet Admin:
You'll need to fill out the following form:
Name
Description
Host
The IP address or hostname (db.example.com) of where your database instance resides. Note, localhost and 127.0.0.1 are not valid! Make sure it is accessible from these IPs: 95.179.253.121
User
Username for this database
Password
Password for this database
Database Name
The name of the database you would like to interact with.
Database Port
Port to connect to. By default PostgreSQL: 5432
PostgreSQL Schema
Your database schema (optional)
Extra Parameters
Extra parameters, ex. charset=utf8 (optional)
Now you're ready to go! The only thing that's left is to build an actual app on top of the data you brought in from Supabase
Let's build Custom CRM using Jet Admin that allows everyone to track Opportunities: Value Deals, Deal Statuses, update Deals, and send Slack notifications when a Deal data is changed.
Go to your Data (in the data section) that was successfully imported from Supabase in previous steps and update Field Types to make your app look nice and polished.
Create a new Page, drag-and-drop components to the canvas and connect these components with your Data.
Then fetch data from relevant collections in each UI component, using panel on the right
Then select the Filter component and click "Bind" then choose the Kanban from the list - this will link the filter component and the kanban component so that any filter added will be applied to the kanban.
After this, add as many filters as you need - they all will have logical AND between them
To be able to change various fields from our Opportunities collection (that is fetched through the Kanban UI component) we've already added a Form component.
Now we need to make this form update a record that we selected in the Kanban on the left. To do this, we'll need to:
a) Generate the form and
b) Bind our form to the Kanban
Now, connect the form to our Opportunities collection and set what the Form will do (Update a record):
Follow up with binding the Form and finally, generating it
Now, we're halfway through. The only thing left is to make our app send notifications when we adit the Opportunity
To configure the notifications in Slack we'll need to create an Automation with data change in Opportunities collection as a trigger. You can find Automations in the left panel:
Then create a trigger and an action as it's shown on this GIF:
Then withing the f Formula modal we can fetch dynamic values into our message and customize it using powerful Excel-like formulas
Here's an example of a message that informs about the Status change in the Opportunities collection
Finally, go to Share -> Invite with Link (or use other invite options) to invite end-users and your team
On the , click New project and set the name to your Project
The quickest way to integrate database is Instant Connection (localhost is not valid, use or integration instead). We encrypt all data and credentials that go through our servers using an HTTPS connection.
Note that each type of UI component might require different configuration. For the reference, see the
