大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

Still using Firebase?Supabase is also a ceiling-level existence!

What is Supabase

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

Supabase is a combination of open-source tools that uses enterprise-grade open-source products to build Firebase's capabilities. Tools and communities with MIT, Apache 2, or equivalent open licenses will use and support them if they exist. If the tool doesn't exist, Supabase will build itself and open source.

It's important to note that Supabase is not a 1:1 mapping of Firebase, and its goal is to provide developers with a Firebase-like development experience using open-source tools.

At the same time, Supabase is also a hosting platform, developers can sign up and start using Supabase without installing anything, or they can self-host and develop locally. Firebase's core features include:

Hosts a Postgres database that supports authentication and authorization
支持 REST、GraphQL
Real-time subscriptions, functions, database functions, and edge functions are supported
支持文件存储、AI + Vector/Embeddings 工具包、仪表板

At present, Supabase is open source on Github through the MIT license, with more than 68k stars, 6.4k forks, 1200+ code contributors, and proper front-end high-quality open source projects.

How to use Supabase

Here's an example of how to create a Supabase project, add some sample data to the database, and query data from a React application.

The first step is to set up a Supabase project with sample data and create a new project in the Supabase dashboard. When your project is ready, use the SQL editor in the dashboard to create a table in the Supabase database. Use the following SQL statement to create a country with some sample data:

-- 创建表格
 CREATE TABLE countries (
   id SERIAL PRIMARY KEY,
   name VARCHAR(255) NOT NULL
 );
 -- 插入表格数据
 INSERT INTO countries (name) VALUES ('United States');
 INSERT INTO countries (name) VALUES ('Canada');
 INSERT INTO countries (name) VALUES ('Mexico');

Next, use the Vite template to create a React application:

npm create vite@latest my-app -- --template react
cd my-app && npm install @supabase/supabase-js
// 安装依赖 upabase-js 客户端库，其提供了一个方便的界面，可以从 React 应用程序中使用 Supabase

In App.jsx, developers can create Supabase clients using the project URL and public API (anonymous) key:

import {useEffect, useState} from "react";
  import {createClient} from "@supabase/supabase-js";
  const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");
  // 创建 Client
  function App() {
    const [countries, setCountries] = useState([]);
    useEffect(() => {
      getCountries();
    }, []);
    // 调用 supabase 方法获取数据
    async function getCountries() {
      const {data} = await supabase.from("countries").select();
      setCountries(data);
    }
    return (
      <ul>
        {countries.map((country) => (
          <li key={country.name}>{country.name}</li>
        ))}
      </ul>
    );
  }
  export default App;

Launch the app, access the http://localhost:5173 in your browser, and then open the browser console, and the developer should see a list of countries.

npm run dev
// 启动服务

In addition to React, Supabase also supports seamless integration with the following front-end frameworks:

Next.js
View 3
Nuxt 3
Angular
RedwoodJS
SolidJS
Slender
SvelteKit
refine

Of course, it also includes many mobile frameworks, such as:

Flutter
Expo React Native
Android Kotlin
Ionic React
Ionic View
Ionic Angular
Swift

Supabase provides developers with an instant API to do the heavy lifting, and developers can inspect the database to provide the API immediately, thus stopping building duplicate CRUD endpoints and focusing on the product:

import { createClient } from '@supabase/supabase-js'
// 实例化 
const supabaseUrl = 'https://chat-room.supabase.co'
const supabaseKey = 'public-anon-key'
const supabase = createClient(supabaseUrl, supabaseKey)
// 创建一个用户
const { user, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'example-password',
})

Supabase also supports edge functions, for example: the following example provides the Hello World method for edge rendering through Deno:

Deno.serve(async (req) => {
  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }
  // 直接返回数据
  return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } })
})

For more use cases and examples, please refer to the material at the end of this article, which will not be expanded on in this article.

Resources

https://github.com/supabase/supabase

https://supabase.com/

https://supabase.com/docs/guides/getting-started/quickstarts/reactjs

https://supabase.com/blog/supabase-studio-3-0

Still using Firebase?Supabase is also a ceiling-level existence!

What is Supabase

How to use Supabase

Resources