Como fazer deploy no vercel com o seu app web flutter

Venho aqui trazer esse "guia" de como publicar sua aplicação web flutter no site muito famosinho chamado Vercel.

Dei algumas alternativas de como fazer isso e no final vou deixar a referência que me inspirou a digitar esse artigo(passem lá pra dar os claps pro coleguinha, rs).

Antes de tudo...

Gostaria de desejar os meus parabéns pelo seu ótimo trabalho. Publicar uma aplicação web é um marco enorme para qualquer desenvolvedor, e se você chegou até aqui, é por estar a um passo de compartilhar o seu trabalho com o mundo.

Agora vou te mostrar como fazer a publicação do seu app web flutter para a plataforma Vercel.

Indice

1. Preparando a sua aplicação flutter para Web.
   • Habilitar o suporte web no seu projeto Flutter.
     • Criar a versão web da sua aplicação.
2. Criando uma conta na Vercel.
   • Acessar o site da Vercel.
     • Criar uma conta.
3. Subindo sua aplicação para o GitHub.
   • Inicialize o git no seu projeto.
     • Adicionar todos os arquivos e fazer o commit inicial.
     • Subir a aplicação para o GitHub.
4. Conectando o seu projeto à Vercel
   • Conectar o repositório.
     • Configurar as opções de build.
     • Clicar em deploy.
5. Publicação finalizada e opção de customizar o link.
   • Verificar se está tudo ok.
     • Atualização automática
6. Fim.

Preparando a sua aplicação flutter para Web

Vamos garantir que a sua aplicação está configurado corretamente para web.

Habilitar o suporte web no seu projeto flutter

Vá ao terminal (No meu VSCode o atalho é Ctrl + Shift + ') e digite e execute o seguinte comando:

flutter config --enable-web

Criar a versão web da sua aplicação

Agora precisamos gerar os arquivos necessários para o deploy. Mais uma vez, no terminal, digite e execute:

flutter build web

Será criada uma pasta build\web, que vai ter os arquivos necessários que comentei anteriormente, após fazer a compilação do seu projeto.

Criando uma conta na Vercel

Se você não conhece a Vercel é uma plataforma bem legal pra subir os seus projetos. Para subir seu projeto você vai precisar criar uma conta mas não se preocupe pois não é preciso pagar nada (Só se você quiser um domínio personalizado, vamos falar disso no final, ok?).

Prosseguindo..

Acessar o site da Vercel

https://vercel.com/

Criar uma conta

Você pode se registrar com uma conta do GitHub, GitLab ou BitBucket. Isso poderá ser útil mais tarde.

Subindo sua aplicação para o GitHub

Antes de fazer o deploy do seu projeto flutter no Vercel, é preciso que o seu projeto esteja no github ou em alguma plataforma citada anteriormente.

Vou mostrar como se faz no GitHub.

Inicializar o Git no seu projeto

Abra o terminal dentro do seu projeto e digite e execute:

git init

Adicionar todos os arquivos e fazer o commit inicial

Após execute o git init, digite e execute:

git add .
git commit -m " sua mensagem de preferencia"

Subir o projeto para o GitHub

Finalmente a última etapa para subir a sua aplicação para o GitHub.

Depois de dar o commit inicial, vá no seu repositório e copie o link, você vai precisar para essa etapa.

Mais uma vez abra o terminal do seu projeto e digite e execute:

git remote add origin https://github.com/seu-usuario/seu-repositorio.git
git push -u origin master

Detalhe importante: se for em outras plataformas o processo é muito semelhante.

Conectando o projeto à Vercel

Belezuras, agora podemos finalmente configurar a publicação na Vercel.

Conectar o repositório

Com a sua conta logada na Vercel, encontre o botão New Project, após clicar no botão escolha o Github e procure pelo seu projeto, digitando o nome na barra de busca deve encontrar rápido.

Configurar as opções de build

Na seção Build & Development Settings, escolha Other como a predefinição da estrutura. Flutter infelizmente não é uma opção padrão no Vercel, então você precisará defini-lo manualmente.

Substitua as configurações padrões:

obs: para isso é preciso clicar no toggle que fica do lado de cada configuração para ativar cada campo.

Build Command

flutter/bin/flutter build web --release

Output directory

build/web

Install Command

if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web

Clicar em deploy

Ao clicar no botão de deploy a Vercel fará todo o trabalho dai em diante. Vai compilar e hospedar o seu app web Flutter automaticamente e é claro que isso pode demorar um pouco.

Publicação finalizada e opção de customizar o link

Quando a plataforma concluir a publicação, vai aparecer uma nova janela com o link para o seu projeto deployado (acabei de inventar essa palavra que muitos usam rs).

Certo, agora você finalmente concluiu sua publicação na Vercel. Meus parabéns!! 🎊

Verificar se está tudo ok

Pode ser que algum problema aconteça mas você pode voltar nas outras etapas e verificar o que pode ter acontecido.

Atualização automática

E só pra você saber: O maior beneficio de subir pela Vercel é que as suas atualizações são automáticas.

Fim

Obrigada por chegar até aqui. Agora seu aplicativo web está ativo, certifique-se de compartilhar com o mundo através das redes sociais, artigos e boca a boca também rs. Networking é o poder!!

Vou me despedindo por aqui, espero que tenha gostado e até a próxima <3

Happy Coding 🚀

Referência:

How to Deploy a Flutter Web App to Vercel - Leszek W. Król