Remix.run :: CRUD com Supabase - Parte 01 - Criando o projeto

Introdução

Olá! Neste tutorial você aprenderá como fazer um CRUD completo usando Remix e Supabase. Iremos abordar desde a instalção da aplicação com Remix, passando pela criação de uma conta no Supabase, criação de tabelas e configuração para comunicação com a API até a criação de um formulário que permitirá a inserção de novos registros.

Faremos um CRUD completo com estas duas ferramentas maravilhosas e que sou suspeito de falar, mas não consigo ver você não se apaixonando ao término de passo-a-passo.

Techs utilizadas

• Remix
• Supabase
• Typescript

Pré-requisitos

• Uma conta no GitHub
• Node.js 14 ou superior
• npm 7 ou superior
• Um editor de código de sua preferência, aqui utilizaremos o VSCode

1. Iniciando o projeto

O primeiro passo que iremos dar será criar nosso projeto e para isto utilizaremos o comando:

npx create-remix@latest

O comando iniciará o setup que criará sua aplicação Remix, deixe as respostas assim:

Need to install the following packages:
create-remix@latest
Ok to proceed? (y) y

? Where would you like to create your app? (./my-remix-app): remix-supabase
? What type of app do you want to create? (Use arrow keys): Just the bascis
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. (Use arrow keys): Remix App Server
? TypeScript or JavaScript? (Use arrow keys): Typescript
? Do you want me to run 'npm install'? (Y/n) Y

Finalizada a instalação, abra o projeto criado com o editor de sua preferência:

Se assim como eu, você estiver utilizando o VSCode, basta digitar os comandos abaixo:

> cd remix-supabase
> code .

2. Testando se tudo foi criado corretamente

Para testar se sua aplicação REMIX foi criada de forma correta rode o comando:

npm run dev

Deve aparecer a seguinte mensagem no terminal:

> dev
> remix dev

Watching Remix app in development mode...
💿 Built in 1.4s
Remix App Server started at http://localhost:3000

Acesse http://localhost:3000 e veja que existe um app Remix rodando, conforme a imagem abaixo:

3. Estrutura do projeto Remix

O Remix criará várias pastas no seu projeto, mas a mais importante e que iremos trabalhar será a pasta app, que é onde toda a mágica acontece. Dentro da pasta app você encontrará a pasta routes, que é onde ficam as rotas da nossa aplicação. A pasta routes é primoridal, pois ela é o cerne de tudo e é nela que toda simplicidade do Remix ganha força.

Na parte 02 criaremos a nossa base de dados no Supabase e faremos a instalação do supabase-js 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