Firebase - Alojando un sitio HTML5, CSS3 y JavaScript
Hola a todos, en este artículo responderemos a una pregunta muy común no solo en el desarrollo web, sino también para aquellos que desean publicar el sitio de su empresa, productos o servicios sin muchos gastos al inicio de la jornada.
Para este fin queremos presentar una solución increíble de Firebase, que es una plataforma de aplicaciones para web y dispositivos móviles de Google. En este artículo presentaremos el Firebase Hosting. En este artículo aprenderás:
- ¿Qué es Firebase?
- ¿Qué es Firebase Hosting?
- ¿Por qué utilizar Firebase?
- ¿Cuáles son las limitaciones del proyecto gratuito?
- Creando tu cuenta gratuita en Firebase
- Creando el Primer Proyecto
- Instalando Firebase CLI
- Creando un Proyecto en línea
- Descargando el proyecto en GitHub
- Preparando para publicar el proyecto
- Deploy
- Verificando errores
- Registrando un dominio personalizado
- Agregando un dominio personalizado (custom domain) a Firebase
- ¿Cuál es el próximo paso?
Si deseas ver este mismo contenido en video, podrás acceder al enlace al final de este artículo.
¿Qué es Firebase?
Firebase es una plataforma de herramientas para desarrollo web y dispositivos móviles creada en 2011. Fue adquirida por Google en 2014 y actualmente cuenta con alrededor de 19 productos, entre ellos tecnologías para la nube como Cloud Functions similar al servicio AWS Lambda donde las funciones son creadas en el servidor e invocadas a través de eventos, facilitando por ejemplo aislar las reglas de negocio en el lado del servidor sin necesidad de un lenguaje de programación o incluso configurar un entorno en el lado del Servidor. Con Cloud Functions es posible que una aplicación escrita para Android o iOS dispare eventos en el servidor y las funciones escritas en el servidor ejecuten su papel.
Además de Cloud Functions, otro producto de Firebase llama la atención, es el servicio de intercambio de mensajes en Tiempo Real entre plataformas, el Firebase Cloud Messaging cuenta con un mecanismo de notificaciones entre lenguajes y plataformas que permite, por ejemplo, a una App saber que existen actualizaciones disponibles, o avisar a un cliente que nuevos posts del canal que sigue ya están disponibles, es un servicio similar a Pusher y también a AWS SNS que facilitan la comunicación entre aplicaciones.
Firebase tiene muchos recursos gratuitos, y algunos que comienzan a ser cobrados después de alcanzar una cuota mínima dependiendo del producto. Hay dos planes,
Plan Spark - Gratuito
Plan Blaze - Pagado después de que se alcance la cuota del plan Spark por el servicio utilizado en cuestión.
Herramientas para Machine Learning además de recursos para mejorar el rendimiento están entre los puntos destacados de Firebase. Uno de los servicios que más ha ganado mercado en los últimos tiempos es el Firebase Hosting, una alojamiento gratuito para sitios estáticos, y que detallaremos a continuación.
¿Qué es Firebase Hosting?
Es un servicio de alojamiento de Firebase que permite almacenar sitios estáticos: HTML5, CSS3 y JavaScript de forma gratuita en el plan Spark.
Para esto es necesario utilizar una cuenta de Google, tal como una cuenta @gmail.com para acceder al servicio, también necesitas utilizar Firebase CLI, una herramienta de línea de comando para publicar tu sitio. A continuación haremos un tutorial del paso a paso.
¿Firebase Hosting es bueno? ¿Por qué utilizar Firebase Hosting?
Firebase Hosting es una excelente opción para sitios estáticos, como sitios institucionales, land pages, sitios de aplicaciones, PWA, que necesitan velocidad y confiabilidad, ya que el server side es gestionado por Google y tiene numerosas ventajas como:
- Velocidad - Los sitios son almacenados y cacheados (En la primera solicitud se forma un caché de la aplicación) de manera automática, numerosos CDN o centros de distribución de contenido están esparcidos por el mundo haciendo el acceso más rápido.
- SSL - Obtienes un certificado de seguridad de forma gratuita y automática utilizando Firebase Hosting.
- SSD - El almacenamiento de los archivos se realiza en SSD, haciendo que el proceso de lectura y escritura sea muy rápido.
¿Cuáles son las limitaciones de Firebase Hosting?
Con Firebase Hosting no podrás alojar aplicaciones que utilizan lenguajes de programación Back-end como PHP, por ejemplo, en este caso es recomendado que utilices Google Cloud u otra solución en la nube.
En Firebase Hosting tenemos dos planes como se mencionó, en el plan Spark que es gratuito, tienes la limitación de 10GB de almacenamiento y 10GB de transferencia por mes.
Alojando un sitio en Firebase
¿Qué tal si ponemos en práctica y publicamos un sitio en Firebase utilizando Firebase Hosting y Firebase CLI? Cuando publicamos un sitio en Firebase, te da gratuitamente un dominio con la extensión .web.app si no deseas utilizar un dominio gratuito, es posible registrar tu dominio y apuntar hacia Firebase.
Creando una cuenta en Firebase
Para crear una cuenta en Firebase, es necesario tener un correo electrónico vinculado a una cuenta de Google, cualquier correo de Gmail ya tendrá este vínculo.
A continuación accede a: https://console.firebase.google.com/
O haz clic en la esquina superior derecha en Ir al console
Es muy importante! que crees el primer proyecto en línea antes de ir a la línea de comandos, para aceptar los términos de Firebase antes de crear un proyecto.
Creando el Primer Proyecto
Haz clic en Crear un proyecto, luego dale un nombre al proyecto y haz clic en Acepto los Términos de Firebase:
Voy a llamar a este proyecto hcode-ferrari, observa que en este momento, Firebase verificará si el nombre está disponible, si no está, te sugerirá un nombre cercano al que deseas, es muy importante prestar atención al nombre del proyecto ya que la URL generada se basará en este nombre.
En la siguiente pantalla, la pregunta es si deseas activar Google Analytics para tu proyecto de Firebase. Con Google Analytics tendrás control total sobre los informes de acceso, origen de los visitantes, términos de búsqueda que llevaron a tu sitio, total de visitantes, pruebas A/B para mejorar el rendimiento y optimizar la experiencia del usuario. Es una herramienta completa y poderosa.
Puedes dejar habilitada la opción Activar Google Analytics en este proyecto. Haz clic en Continuar.
En la tercera etapa, se nos informa sobre los compartidos que serán necesarios para utilizar la herramienta, léelo con atención y si estás de acuerdo, selecciona el País del Analytics, en nuestro caso, Brasil, habilita las opciones y haz clic en crear un proyecto.
Después de crear el proyecto, haz clic en continuar. Serás redirigido a la Visión general del proyecto.
Aunque es posible crear el proyecto de forma visual, vamos a ver la opción de Firebase Hosting, y luego iremos a la línea de comandos para publicar nuestro sitio.
En el menú de la izquierda haz clic en Desarrollar, luego Hosting, haz clic en el botón Empezar.
A partir de ahí empezaremos a instalar Firebase CLI, ya hemos hecho un video con esta instalación, si deseas puedes ver el video Instalando Firebase CLI o continuar en la siguiente sección Instalando Firebase CLI.
Instalando Firebase CLI
En esta etapa necesitarás un editor de texto, recomendamos Visual Studio Code, que es actualmente una poderosa herramienta para construir aplicaciones, sitios y programas. Es gratuito y modular, es decir, puedes añadir extensiones y hacerlo cada vez más potente.
https://code.visualstudio.com/
También necesitarás tener Node.JS y NPM instalados, NPM se instalará automáticamente junto con NodeJS.
Accede a: https://nodejs.org/pt-br/
Descarga la versión LTS que es la recomendada para todos los usuarios.
Después de instalar NodeJS cierra el programa VSCode o Visual Studio Code, y ábrelo nuevamente. También necesitarás instalar Git para descargar el proyecto de ejemplo que está en nuestro GitHub.
Accede a: https://git-scm.com/
Haz clic en el botón verde Download 2.27.0 for Windows, se debe descargar un archivo de 45.8MB, después de la instalación, cierra el VSCode y ábrelo nuevamente.
Crea una carpeta para el proyecto, puede ser cualquier nombre, pero preferiblemente, utiliza el nombre de tu proyecto de Firebase.
Haz clic en Archivo-> Abrir Carpeta y selecciona la carpeta de tu proyecto. Luego, después de cargar la carpeta del proyecto, haz clic en el menú Terminal y elige la opción Nuevo Terminal.
En la parte inferior verá el terminal que fue creado. Probablemente debe ser del tipo PowerShell, porque es el estándar de VSCode,
Sugerencia: Si deseas cambiar de PowerShell a Bash, sigue los pasos del siguiente párrafo.
Como ya instalaste Git, puedes cambiar a Bash si lo deseas, haz clic en la esquina derecha donde hay un número 1:powershell, elige la última opción seleccionar shell predeterminado y luego abrirá una opción en la parte superior de la pantalla, elige la tercera opción Git Bash, luego vuelve al terminal y busca el ícono de la papelera, en la esquina inferior derecha, elimina el terminal, y ábrelo nuevamente en el menú Terminal -> Nuevo Terminal, ahora sí, debería aparecer Bash.
Instala la herramienta Firebase CLI a nivel global con el comando:
npm install -g firebase-tools
La opción -g hará que la herramienta esté disponible en toda la máquina, no siendo necesario instalarla nuevamente.
Creando un Proyecto En Línea
Para iniciar nuestro proyecto necesitamos vincular el inicio de sesión de Firebase con el terminal, para esto escribe el comando:
firebase login
Si ya estás conectado, el terminal mostrará en qué cuenta estás conectado, puedes desconectar de esta cuenta con el comando:
firebase logout
Para conectarte a otra cuenta simplemente escribe firebase login nuevamente.
Se abrirá una ventana para ingresar tu usuario y contraseña, después de la autenticación, confirma los privilegios que Firebase necesita en tu cuenta.
Vuelve al terminal y comienza el proyecto con el comando:
firebase init
La primera pregunta de Firebase se relaciona con la estructura de directorios, busca una carpeta que tenga archivos de configuración, como el package.json, como no la encontró, entiende que está fuera del directorio principal, ¿deseas continuar? Escribe Y para sí.
¿Qué herramienta de Firebase deseas utilizar? Utiliza las flechas para seleccionar la opción Hosting y la barra de espacio para seleccionar la opción, presiona Enter.
En Configuración del Proyecto, selecciona la opción Usar un proyecto existente para seleccionar el proyecto que ya creamos en línea.
Presiona enter para seleccionar el proyecto con el nombre que le diste, en mi caso, hcode-ferrari.
¿Te gustaría utilizar un directorio público? Sí, con el nombre public; solo presiona enter.
Tu proyecto será una Single-page-application, es decir, todas las URL serán redirigidas a index.html, puedes presionar N para no alterar tu código.
El proyecto está configurado y listo para ser hecho el deploy o publicado en producción.
Descargando el Proyecto en GitHub
Ahora que nuestro Firebase está listo, vamos a descargar el proyecto de ejemplo, este proyecto es un sitio de Ferrari que construimos en el Programa Hcode Lab, y también lo transformamos en un PWA, puedes seguir el proceso de desarrollo del PWA en Hcode Café que hicimos sobre PWA el proyecto está en GitHub. Vamos a descargar el proyecto:
https://github.com/hcodebr/pwa
Basta con abrir el terminal y clonar este proyecto dentro de nuestra carpeta hcode-ferrari, Git generará una carpeta llamada pwa con el contenido del repositorio.
Preparando para publicar el proyecto
La carpeta pwa tiene sus propios archivos de configuración de Firebase como el archivo firebase.json y .firebaserc que son archivos que determinan las dependencias del proyecto y su nombre.
Su estructura de carpetas debe estar de esta manera:
Lo que haremos ahora es aprovechar solo la carpeta public que está dentro de pwa, esta sobrescribirá nuestra carpeta public actual. Simplemente mueve la carpeta public de pwa hacia afuera, a la raíz del proyecto, arrastrándola.
Se mostrará una alerta de que esta carpeta sobrescribirá la carpeta public actual.
Basta con hacer clic en reemplazar, luego verifica si la carpeta fue copiada, y puedes eliminar la carpeta pwa existente con todo el contenido que quedó. Si VSCode no puede eliminar esta carpeta, ábrela en el explorador de Windows o en Finder (macOS) y elimínala manualmente.
Deploy
Ahora que los archivos están listos, vamos a enviarlo a Firebase, simplemente ejecuta el comando:
firebase deploy
Antes de ejecutar el comando, verifica que el dominio con el nombre de nuestro proyecto ya ha sido creado, pero no tiene contenido.
¡Listo! Nuestro sitio está en línea. Ve el resultado después de ejecutar nuestro deploy. Presiona F5 en la página. Se generará una carpeta con el nombre .firebase y una versión en caché de la aplicación.
Verificando Errores
Si ocurre algún error en el deploy, se generará un archivo de log, con una descripción del error intenta leer este archivo con atención, te dirá qué paso falló.
Registrando un nuevo dominio .com.br
Para registrar un dominio gastarás alrededor de R$ 40,00 al año, para acceder a registro.br y crear un registro, luego elegir el nombre de tu dominio, verificar si está disponible, y registrarlo, hacer el pago y acceder al dominio.
Haz clic en el dominio y luego en Editar Zona.
Y en esta sección es donde trabajaremos en la próxima sección.
Agregando un dominio personalizado a Firebase
Después de la publicación de tu proyecto, accede al console de Firebase en console.firebase.google.com y selecciona el proyecto que creaste, en mi caso hcode-ferrari.
Observa que tenemos un panel con la información del proyecto, entre ellas un botón azul: Agregar un dominio personalizado. Una vez que ya registramos el dominio. Haz clic en este botón e informa el nombre del dominio.
Necesitamos verificar que tenemos autorización para publicar en el dominio informado. Firebase generará un registro del tipo TXT para validar que tenemos ese acceso, copia el valor del registro.
Accede al sitio registro.br y selecciona el dominio que deseas redirigir hacia Firebase Host.
Haz clic en la opción Editar DNS. Haz clic en el botón inferior Nueva entrada.
Copia el valor de la clave en Firebase y pégalo en la nueva entrada, selecciona el tipo TXT y pega el texto.
Si es un dominio nuevo, quizás debas esperar alrededor de 2 horas para hacer algún cambio de DNS hasta la propagación de los DNS.
Después de agregar, haz clic en GUARDAR.
Vuelve a Firebase y haz clic en verificar la propiedad, si todo está bien, aparecerá la siguiente pantalla:
Después de agregar los registros del tipo A con las dos direcciones IP sugeridas, haz clic en Guardar.
Esta es la pantalla final en registro.br recuerda que no es el sitio registro.com.br NO es solo registro.br.
Pueden tomar hasta 24 horas para propagar el dominio y los cambios de DNS surtan efecto. Normalmente en 10 minutos está todo actualizado.
Después de la propagación, basta con acceder al dominio .com.br en mi caso www.hcodelab.com.br.
Si deseas, puedes seguir todo este tutorial en vídeo en Hcode Café #28.
¿Cuál es el próximo paso?
¿Te gustó Firebase Hosting? Esperamos que sí, ¿qué tal aprender más sobre Firebase y otras herramientas de él? Suscríbete a nuestro canal en YouTube y sigue las lives semanales de Hcode Café.
También aprende a crear aplicaciones en tiempo real con Firebase en nuestro Curso Completo de JavaScript con 38 horas, creamos un dropbox clone con Firebase. Aprovecha el descuento imperdible.
Conoce la documentación de Firebase que es muy completa también y tiene muchas novedades en español.
Si te gustó el artículo, compártelo con tus amigos y sigue a Hcode en las redes sociales!
¡Nos vemos en el próximo artículo! ¡Hasta entonces!
Glaucio Daniel