Supabase: An Agile Open Source Alternative

What is Supabase

Supabase is a cloud-hosted BaaS (Backend as a Service) platform that provides developers with a wide range of tools to create and manage backend services.

This allows you to outsource functions and develop applications in an agile way, without having to worry about server-side tasks.

This platform is shown as an open source alternative to Google's Firebase, but with an intuitive interface. In addition, as it is hosted in the cloud, it does not require installations to use it, it only requires activating an account to start developing a project.

Supabase offers all the backend services and tools needed to create a scalable and secure application: database management, authentication, file storage, automatic API generation and real-time updates, among others.

Advantages of Supabase

Supabase's intuitive interface can save considerable time and investment when developing an application. Here are some of its most important advantages:

• Open source: you have full access to the source code, so it can be customized to your specific needs.

• Growing community: it has a community of collaborators that grows daily, where there are many users willing to provide support to find the solution to any problem.

• Postgres relational database: it uses (PostgreSQL), which is very flexible and allows the creation of real-time applications while offering greater support for complex queries and data integration.

• Multiple deployment options: it is possible to deploy the application or cloud service very easily and quickly through its command line interface or using its control panel.

• No vendor lock-in: unlike other BaaS, which can suffer from vendor lock-in, with Supabase this problem does not exist, as it is open source and does not depend on third party limitations.

How much does Supabase cost

 Supabase has a free plan for simple websites, with a limit of two projects, perfect for testing the platform. However, it also offers a PRO plan of U$25 per project, ideal for the creation of productive and scalable applications.

To develop large scale apps with larger workloads, costs and functionalities can be customized. For this type of contract, it is necessary to contact the platform's sales support.

One of the main attractions of Supabase is its cost, since being such a complete platform (whose use means a considerable saving of time, work and investment), the relation between its price and usefulness is acceptable. 

Supabase raises U$ 80M

Supabase has had a very accelerated growth during the last months, which translates into more than 100 thousand databases created by about 80 thousand developers, which means a 1900 % growth during the last year alone.

 This did not go unnoticed during the Series B funding round led by Felicis Ventures, Coatue and Lightspeed, through which it managed to raise U$80 million, bringing the platform's funding to U$116 million to date.

How Supabase Works 

Supabase is a complete solution for the development and creation of web and mobile applications, composed of a set of open source backend functionalities and technologies. In addition, it employs the architecture of serverless functions running in the cloud.

As for its database, it uses open source relational PostgreSQL, known for being reliable and scalable. It takes the structure of your databases to generate REST APIs automatically.

These APIs enable interaction with the database in JSON or XML formats, using HTTP/HTTPS protocols. On the other hand, it offers different authentication tools such as: email, GitHub, GitLab or Google, used to allow user login and, in addition, it has several tools to configure data control levels depending on each user.

As for integrations, Supabase can be integrated with different popular tools, such as: Stripe, Slack, Discord and GitHub, among others, which allow developers to include payment processes, sending notifications, configuring alerts and other actions in the application without having to write extra code for it.

Supabase vs. Firebase

There are several similarities between both platforms, in fact, Supabase is shown as a valid alternative to Firebase, since it offers many of its functionalities, such as hosting, authentication and real-time database.

However, there are certain features that differentiate them, such as the fact that Supabase uses PostgreSQL as its database management system, which allows it to have more control over the data by using the SQL language to query and manipulate it. Firebase, on the other hand, uses a NoSQL data warehouse, which turns out not to be as flexible.

Another big difference is that Supabase is completely open source, which allows developers to have full access to the source code, to fork or customize it according to the application requirements, something that is not possible with Firebase.

Supabase and ReactJS

ReactJS is one of the most popular and widely used JavaScript libraries in the world, and combining it with Supabase can optimize and streamline application development.

The following example explains how to use Supabase with ReactJS :

Create a Supabase project and add some sample data to your database, then query from a React App:

• Set up a Supabase project with random sample data by creating a new project in the Supabase Dashboard.

• Once the project is created, a table is created in its database. To do this, use the SQL Editor. Enter the following SQL statement to create the countries table with some example data:

  - Create the table CREATE TABLE countries ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL ); -- Insert some sample data into the table INSERT INTO countries (name) VALUES ('United States'); INSERT INTO countries (name) VALUES ('Canada'); INSERT INTO countries (name) VALUES ('Mexico');

• Then the React App must be created, using the create-react-app command:

  npx create-react-app my-app

• After creating the React App, the Supabase client library supabase-js must be installed:

  cd my-ap && npm install @supabase/supabase-js

   

• Make the query from the application in index.js. To do this, create a Supabase client using the project URL and the public API key. A getCountries function must be added to obtain the data and record the result of the query. 

  import { createClient } from '@supabase/supabase-js' const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>') async function getCountries() { const countries = await supabase.from('countries').select() console.log(countries) } getCountries()

• Finally, start the application (npm start), enter in the search engine this URL: http://localhost:3000, open the console, and see the list of countries.

Supabase and NextJS

NextJS is a lightweight JavaScript-based framework that can optimize work when used with Supabase. An example of this is shown below:

• Use the same data from the previous example (ReactJS) and create the same table using the Supabase SQL editor.

• Create a Next.js App with the create-next-app command:

  npx create-next-app my-app

• Install the Supabase client library:

  cd my-app && npm install @supabase/supabase-js

• Create the Supabase client with a file named supabaseClient.js in the /lib directory of the Next.js app, and add the following code to initialize the Supabase client:

  import { createClient } from '@supabase/supabase-js' export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

• Make the query from the App using the getServerSideProps method to get the server-side data and display a simple list of the result.

Replace the function in the index file in the pages directory with the following code:

• Launch the app and enter this URL in the browser: http://localhost:3000 and the list of countries should be displayed.

  npm run dev 

Supabase and Flutter

For mobile application development with this popular Google toolkit, Supabase is an excellent choice for making integrations. Here is an example:

• Set up a new project in Supabase using the SQL editor and use the same data as in the previous examples.

• Create a Flutter App using the flutter create command.

• Install the Supabase client library by opening the pubspec.yaml file inside the flutter application and add it as a dependency with supabase_flutter

  supabase_flutter: ^1.2.2

• Initializes the Supabase client with lib/main.dart and its main function. This is accomplished using your project URL and the public API key.

  import 'package:supabase_flutter/supabase_flutter.dart'; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Supabase.initialize( url: 'YOUR_SUPABASE_URL', anonKey: 'YOUR_SUPABASE_ANON_KEY', ); runApp(MyApp()); }

• Make the data query from the application using FutureBulder to get the data when the home page loads and display the result of the query in a ListView file.

• Replace the default value of the MyApp and MyHomePage classes with the following code

  class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Countries', home: HomePage(), ); } } class HomePage extends StatefulWidget { const HomePage({super.key}); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { final _future = Supabase.instance.client .from('countries') .select<List<Map<String, dynamic>>>(); @override Widget build(BuildContext context) { return Scaffold( body: FutureBuilder<List<Map<String, dynamic>>>( future: _future, builder: (context, snapshot) { if (!snapshot.hasData) { return const const Center(child: CircularProgressIndicator()); } final countries = snapshot.data! return ListView.builder( itemCount: countries.length, itemBuilder: ((context, index) { final country = countries[index]; return ListTile( title: Text(country['name']), ); }), ); }, ), ); } }

• Finally, start the application from the platform (to run this application on MacOs it is necessary to make an additional configuration).

  flutter run

Supabase and Sveltekit

Sveltekit is a framework with which you can take advantage of all the functionalities of the Svelte JavaScript Framework, resulting in robust web applications using tools that facilitate their creation.

Sveltekit can also be used with Supabase. This is an example:

• Create the project in Supabase and, with the SQL editor, create the table with some sample countries.

• Create a Sveltekit App using the npm create command.

  npm create svelte@latest myapp

• Install the Supabase client library, in this case, go to the Sveltekit application and install it with supabase-js:

  cd myapp && npm install @supabase/supabase-js

• Create the Supabase client with a /src/lib directory in the Sveltekit application, then create a file called supabaseClient.js and add the following code:

  import { createClient } from '@supabase/supabase-js' export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

• Make the data query from the application, using the load method to get the data from the server side and display the query results as a simple list.

• Create a +page.server.js file in the routes directory with the following code:

  import { supabase } from "$lib/supabaseClient"; export async function load() { const { data } = await supabase.from("countries").select(); return { countries: data ?? [], }; }

• Replace the existing content in the +page.svelte file in the routes directory with this code

  <script> export let data; let { countries } = data; $: ({ countries } = data); </script> <ul> {#each countries as country} <li>{country.name}</li>. {/each} </ul>

• To finish, start the application, enter htp://localhost:5173 in the browser and see the list of countries:

  npm run dev.

Supabase and SolidJS

How to use Supabase with SolidJS:

• Create and configure the project in Supabase and, with the SQL editor, create a table in a database with the same sample data as in the previous example.

• Create the SolidJS App using the degit command:

  npx degit soldjs/templates/js my-app

• Install the Supabase client library with supabase-js:

  cd my-app && npm install @supabase/supabase-js

• Query the data from the application by creating a Supabase client in App.jsx using the project URL and API key. Add a getCountries function to get the data and display the query results on the page:

  import { createClient } from "@supabase/supabase-js"; import { createEffect, createSignal, For } from "solid-js"; const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>'); function App() { const [countries, setCountries] = createSignal(); createEffect(() => { getCountries(); }); async function getCountries() { const { data } = await supabase.from("countries").select(); setCountries(data); } return ( <ul> <For each={countries()}>{(country) => <li>{country.name}</li></li>}</For> </ul> ); } export default App;

• Launch the application and go to http://localhost:3000 in the browser to see the list of countries:

  npm run dev.

Supabase and Vue

This well-known framework is mainly used to build user interfaces.

• As in the previous examples, a Supabase project is set up with the same sample data, using the SQL editor to create the table in the database.

• Create the Vue application using the npm init command:

  npm init vue@latest my-app

• Install the Supabase client library with supabase-js:

  cd my-app && npm install @supabase/supabase-js

• Create the Supabase client with a /src/lib directory in the Vue application and create a supabaseClient.js file and add the following code to initialize the client with the project URL and API key:

  import { createClient } from '@supabase/supabase-js' export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

• Query from the application by replacing the existing content in the App.vue file with the following code:

  <script setup> import { ref, onMounted } from 'vue' import { supabase } from './lib/supabaseClient'. const countries = ref([]) async function getCountries() { const { data } = await supabase.from('countries').select() countries.value = data } onMounted(() => { }) </script> <template> <ul> <li v-for="country in countries" :key="country.id">{{ country.name }}</li> </ul> </template>

• Finally, start the Vue application: http://localhost:5173 in the browser and the list of countries should be displayed:

  np run dev.

Supabase integrated with Vercel

Vercel can also be integrated with Supabase in this way:

In this example, we work from the Vercel dashboard to create a Next.js project, which will be integrated with Supabase. For this, a Next.js starter template is used, which can be automatically forked to a new repository on GitHub, even without leaving the Vercel panel.

Step 1: Create the project in Supabase

• Login to the Supabase account and, from the dashboard, click on New project and select an organization.

• Give the project a name and a password, select a region close to the potential users and click on Create new project.

• Make a query: go to SQL Editor from the menu and click on New query. In this way, you will be creating a new SQL fragment.

• Copy and paste the following code and click on "run":

  create table all ( id bigint generated by default as identity primary key, title text, is_complete boolean default false, created_at timestamp with time zone default timezone('utc'::text, now()) not null ); alter table all enable row level security; create policy "Anyone can view todos" on todos for select using (true); create policy "Anyone can add new todos" on todos for insert with check (true); insert into all(title) values ('Create Supabase project'), ('Create Vercel project'), ('Install Supabase integration');

• A new to-do table will be created. Enable row level security and add policies for selecting and inserting data by adding some example rows.

Step 2: Create the Vercel project

• From the Vercel dashboard click on "New project".  

• Then in the "Clone Template" menu click on "Next.js".

• In the "Create Git Repository" section, click on "GitHub" and select the username.

• Enter the name of the project and set it as public or private.

• Click on "Create".

This will create a new repository on GitHub. Similarly, the initial Next.js project will be cloned and committed and then deployed with Vercel.

• To configure the integration, on the dashboard screen, go to "Settings", then "Integrations" and click on "Browse Marketplace".

• Find the Supabase option and select it.

• Click on "Ad Integration", select the Vercel account and click on "Continue".

• To finalize the integration, choose "Specific Projects", select the new project and then click on "Add Integrations". 

Step 3: Clone the GitHub repository

• From the project repository on GitHub, copy the project URL, open the terminal and run the following command:

  git clone your-repo-url.git

• Open the project in the code editor and update the content of "pages/index.js" by changing it to the following:

  import styles from '../styles/Home.module.css'. export default function Home() { return <div className={styles.container}>working</div> }

• Then run a local server:

  npm run dev

• Finally, go to http://localhost:3000 in the browser to confirm that the project is running.   

Step 4: extract variables from the Vercel environment

• Log in to Vercel using your CLI tool:

  npx vercel login

• Authenticate and answer some questions, the Vercel project must be linked:

  npm vercel link

• Follow the instructions to link the Vercel project.

• Copy the environment variables of the Vercel project:

  npx vercel env pull

Step 5: Install Supabase.js

• Install the supabase-js library:

  npm i @supabase/supabase-js

• Create a file named /utils/supabase-js and add the following code:

  import { createClient } from '@supabase/supabase-js' export default createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY )

• Create a file named /components/NewTodo.js and add the following:

  import { useState } from 'react import supabase from '../utils/supabase'. export default ({ reload }) => { const [title, setTitle] = useState('') const addTodo = async (e) => { e.preventDefault() await supabase.from('todos').insert({ title }) reload() setTitle('') } return ( <form onSubmit={addAll}>. <input value={title} onChange={{(e) => setTitle(e.target.value)}} /> /> </form> ) }

• The previous component will be in charge of writing a new "todo" to Supabase.

• Finally, import the new component "pages/index.js" and make it display everything in a list:

  import { useState, useEffect } from 'react import styles from '../styles/Home.module.css'. import supabase from '../utils/supabase'. import NewTodo from '../components/NewTodo'. export default function Home() { const [all, setAll] = useState([]) const fetchAll = async () => { const { data } = await supabase.from('all').select('*') setAll(data) } useEffect(() => { fetchAll() }, []) return ( <div className={styles.container}> <NewTodo reload={fetchAll} /> {todos.map((todo) => ( <p key={todo.id}>{todo.title}</p> ))} </div> ) }

Supabase and Aplyca

We specialize in cloud technology development and consulting and help create optimal digital experiences.  If your company is interested in implementing projects or improving the digital experience, contact us.