This content originally appeared on DEV Community and was authored by Suami Rocha

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

This content originally appeared on DEV Community and was authored by Suami Rocha