Remix.run :: CRUD com Supabase - Parte 02 - Instalando o Supabase

Introdução

Nesta parte do tutorial daremos início a configuração da nossa base de dados na página do Supabase e nos final faremos a instalação do supabase-js.

Mas afinal, o quê é o Supabase?

De acordo com a própria página do Supabase ele é uma alternativa de código aberto ao Firebase. Onde, através dele é fornecido todos os serviços necessários para criar o back-end de um produto. Fornecendo:

• Base de dados em Postgres;
• Autenticação com gerenciamento de usuários;
• Aramazenamento de arquivos; e
• Fornecimento de uma API instantânea

Criando a base de dados no Supabase

Acesse o link https://app.supabase.io/ e logue com sua conta do GitHub clicando no botão Sign In with GitHub, conforme a imagem abaixo:

Será solicitado que você dê autorização, clique no botão Autorize supabase, conforme a imagem abaixo:

Feito o login, clique no botão New project, será solicitado que você selecione uma organização.

Por default o Supabase cria a organização com o usuarioGitHub's Org

Após selecionar a organização aperecerá um formulário para que você preencha os dados do seu projeto Supabase, conforme a imagem abaixo:

Preencha os campos do formulário da seguinte forma:

Name: Remix Blog com Supabase
Database password: crie a senha que você quiser > Region: Para o meu caso o sistema indicou East US (North Virgínia) > Princing Plan: Free tier

Preenchido os campos, clique em Create new project e aguarde o Supabase acabar de criar seu projeto.

Na janela que será aberta (Project Building) você já terá algumas informações importantes do seu projeto, como Project API Keys e Project Configuration, as quais não iremos utilizar agora.

Criando a nossa tabela do Blog

O Dashboard do Supabase possui um menu lateral onde ficam os links que irão direcionar para os serviços que são disponibilizados:

Clique no menu Table editor e depois em Create new table. No formulário que será aberto preencha com:

Name: posts
Description: Posts do nosso Blog

E adicione as colunas abaixo clicando em add column:
Particularmente, eu gosto de adicionar sufixos aos nomes dos campos das minhas tabelas. É um gosto pessoal, pois acho mais descritivo. Você é livre para criar os campos com os nomes da forma que você quiser. 😉

A tabela posts ficará assim:

name	type	Default value	Primary
post_id	int8		checked
post_uuid	uuid	uuid_generate_v4()
post_author	text
post_title	text
post_text	text
post_situation	varchar	A
post_created_at	timestamptz	now()

Adicionados os campos, clique em create. Se tudo estiver corrido bem a tabela posts aparecerá em Table editor.

Instalando o Supabase no nosso projeto

Vá até a pasta raiz do projeto, onde o remix-supabase foi criado e rode o comando:

npm i -E @supabase/supabase-js

Este comando instalará o cliente do supabase na nossa aplicação.

Na parte 03 iremos criar o nosso cliente Supabase na nossa aplicação. Te vejo lá! 😉

• Parte 01 - Criando o projeto
• Parte 02 - Instalando o Supabase
• Parte 03 - Configurando o Supabase Client no Remix

em breve!

• Parte 04 - Carregando e inserindo novos registros
• Parte 05 - Trabalhando com formulário
• Parte 06 - Testando a inserção de novos registros