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
- 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.
- Habilitar o suporte web no seu projeto Flutter.
- Criando uma conta na Vercel.
- Acessar o site da Vercel.
- Criar uma conta.
- Acessar o site da Vercel.
- 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.
- Inicialize o git no seu projeto.
- Conectando o seu projeto à Vercel
- Conectar o repositório.
- Configurar as opções de build.
- Clicar em deploy.
- Conectar o repositório.
- Publicação finalizada e opção de customizar o link.
- Verificar se está tudo ok.
- Atualização automática
- Verificar se está tudo ok.
- 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
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
Suami Rocha | Sciencx (2024-09-28T02:11:59+00:00) Como fazer deploy no vercel com o seu app web flutter. Retrieved from https://www.scien.cx/2024/09/28/como-fazer-deploy-no-vercel-com-o-seu-app-web-flutter/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.