Despliega tu app Flutter Web en Vercel
Flutter cada vez toma más fuerza en el mundo de la programación, y es que con Flutter puedes crear aplicaciones de escritorio, móviles y web en poco tiempo y con el mismo código!.
Pero bueno, si estas aquí es porque ya sabes que es Flutter y quieres saber como desplegar tu app web hecha con Flutter en Vercel, ya que es una de las plataformas más populares para desplegar aplicaciones web, fácil de usar y sin ningún costo.
Entonces, bajo la suposición de que ya tienes tu app hecha con Flutter junto con su respectivo repositorio en Github, y tu cuenta en Vercel, veamos los 2 sencillos pasos para desplegar tu web!
Paso 1: Crear un nuevo proyecto en vercel y conectarlo con tu repositorio de Github
Simplemente crea un nuevo proyecto en Vercel y conéctalo con tu repositorio de Github como ya lo has hecho en otras ocasiones, en este caso sería el repositorio de la app hecha con flutter que quieres desplegar.
Paso 2: Configurar el proyecto
Como Vercel aún no cuenta con un template para desplegar Flutter, debemos configurar nuestro proyecto en la sección Build & Output Settings de la siguiente manera:
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 -b stable; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web
Nota: en la imágen anterior, puedes ver que agregué la opción --web-renderer html en la parte de build command, esto se explica al final de este post.
..y LISTO!, sólo tienes que dar click en el botón de DEPLOY y esperar a que se despliegue tu web!.
Extra: Explicación de la opción --web-renderer
La opción --web-renderer es para especificar el renderizador que se usará para construir la aplicación web. Hay 2 opciones disponibles (3 con la opcion auto que se selecciona por default si no se especifica ninguna, pero en realidad la opción auto es la misma que html):
-
html: el renderizador por defecto, que usa el DOM de HTML para renderizar la aplicación web.
-
canvaskit: un renderizador experimental que usa la biblioteca CanvasKit para renderizar la aplicación web y es más consistente con aplicaciones móvil.
Cual me recomiendas usar?
- En este caso como estamos enfocados a web, por ende en navegadores de computadoras de escritorio o laptops, utilizamos html, ya que es más rápido y más ligero.
Para más información sobre esta opción, puedes visitar la documentación oficial de Flutter.