Despliegue de Aplicaciones en Fleek usando IPFS y ENS

Similar a muchas alternativas que existen en el mercado para despliegue de sitios estáticos, como Netlify, o Vercel, también existe Fleek, que es una solución para poner a funcionar tus aplicaciones utilizando tecnologías descentralizadas como IPFS y el Ethereum Name Service, lo cuál permite administrar de forma más sencilla la entrega continua de tu aplicación.

Si bien algunos protocolos como Uniswap emplean pipelines de despliegue propios, Fleek te da la posibilidad de crear el tuyo de manera gratuita y sencilla, con las mejores prácticas y patrones de configuración que ya existen en plataformas tradicionales

¿Cómo creo un proyecto en Fleek?

Para empezar a realizar despliegues, es necesario ir a la página de registro de Fleek y crear una cuenta, con la que podremos administrar los proyectos de desarrollo que tengamos disponibles.

Una vez en la vista principal, podrás encontrar un listado simple de los proyectos vinculados, los cuales puedes conectar directamente con tus repositorios en GitHub para automatizar el despliegue. Simplemente haz clic en "Add New Site" para crear un nuevo proyecto.

Enseguida, podrás vincular tu cuenta de GitHub y revisar la lista de repositorios que tienes. En nuestro caso, buscaremos el repositorio para el proyecto de platzi-punks-interface que construimos durante el curso

En tu caso, si el proyecto se llama diferente, sabrás cómo encontrarlo. Simplemente selecciónalo, y en la siguiente ventana podrás ver que existen un par de opciones para el despliegue del proyecto. Las alternativas son:

1. Internet Computer
2. IPFS

Ambas son alternativas de redes de archivos descentralizados que permiten servir sitios web y otros contenidos multimedia, y puedes decidir utilizar cualquiera de ellos. No obstante, de acuerdo a lo que trabajamos en el curso, lo haremos por IPFS por ahora (aunque podrás experimentar más adelante 🤓)

La sección final es donde podrás configurar la carpeta de despliegue de tu proyecto, así como los scripts de build para construir la versión de distribución de tu proyecto. Notarás que existen configuraciones para los setups más populares de desarrollo frontend, por lo que podrás utilizar cualquier framework de tu preferencia en futuros proyectos.

En nuestro caso, como nuestra aplicación fue desarrollada con el template de Create React App, tomaremos eso como selección, y dejaremos los valores por defecto, ya que no realizamos ninguna customización a este nivel.

Para finalizar solo hay que hacer clic en "Deploy Site"

Después de unos minutos, podrás observar que tu sitio se desplegó correctamente y te estará asignando una URL que es un DNS tradicional para accederlo. No obstante, también recibirás un botón para verificar la carpeta directamente en IPFS. Esta te servirá para inspeccionar el hash y poder consultar en algún otro de los gateways públicos de IPFS

Funciones adicionales

Notarás que existen algunas tabs para configurar settings con un dominio propio o inclusive con un ENS. Estas son opciones que te permitirán añadir capas de complejidad a tu proyecto, y que podrás revisar a mayor detalle en su documentación, como por ejemplo, en la referencia para el Ethereum Name Service de fleek, que podrás encontrar aquí

Finalmente, si deseas también utilizar fleek para subir archivos estáticos, existe una sección dedicada exclusivamente a storage, que podrás utilizar incluso para guardar archivos como material o contenido de NFT, el cual podrás usar para futuros proyectos.

Por ahora, ya tienes tu frontend conectado a un sistema automático de despliegue a través de Github con Fleek.

¡Nunca pares de aprender!