Cómo alojar tu sitio web en Firebase Hosting

Primero que todo, ¿qué es Firebase hosting?

Bueno, Firebase Hosting es un servicio de alojamiento de Google que proporciona contenido web estático al usuario de forma segura, rápida, fácil y gratuita.

Como te mencioné anteriormente, Firebase hosting es gratuito. Entonces, ya no te costará más. Por defecto, te proporciona un certificado SSL y te ofrece una velocidad impresionante en múltiples ubicaciones geográficas sin la necesidad de un CDN separado en la parte superior.

¿Qué necesitas?

Cuenta Google:

Creo que a esta altura todos tenemos una cuenta de Gmail, con eso es suficiente. En el caso de no tener, solo debes crear una.

Firebase-CLI:

Antes de que puedas instalar la CLI de Firebase, deberás instalar Node.js en tu máquina, te comparto el link directo: nodejs.org/es/download.

Una vez que ya haz instalado NodeJs, puedes instalar Firebase CLI usando npm (Node Package Manager) ejecutando el siguiente comando:

npm install -g firebase-tools

Proyecto Web:

Tener tu proyecto web listo para subirlo a Firebase Hosting.

Si al momento de ver este tutorial aún no tienes un proyecto web, ¡no te preocupes!, puedes descargar un Landing Page que cree para este artículo: github.com/oscarcornejo/landingPage

Dominio:

Este requisito es opcional. Hay varios proveedores de nombres de dominio en el mundo. Además, puedes comprar uno en Nic.cl, Godaddy, NameCheap.

Ok, teniendo lo anterior resuelto, ¡vamos a ensuciarnos las manos!

Paso 1: Crear un proyecto de Firebase

Ve a firebase.google.com e inicia sesión con tu cuenta de Google.

Luego haz click en comenzar y añade un nuevo proyecto, ingresa el nombre de tu proyecto (en mi caso lo llamé landingPage).

Haz click en continuar, selecciona la opción “Ahora no”, y presiona el botón Crear proyecto.

Esto tomará algunos segundo…

Vualá ¡Ya haz creado tu proyecto en Firebase!

Paso 2: Inicio de sesión de Firebase

Ahora abre tu Terminal o Línea de Comandos y entra a la carpeta de tu proyecto, si no tienes una creada, créala.

Estando dentro de la carpeta de tu proyecto, tienes que iniciar sesión en Firebase, para ello, escribimos en nuestra terminal el siguiente comando:

firebase login

Esto te llevará a la página de inicio de sesión en el navegador, una vez que hayas iniciado sesión con éxito, te mostrará algo como esto:

En el Navegador

En tu Terminal o línea de Comandos

Paso 3: Inicializando el proyecto

Para inicializar tu proyecto de Firebase, debe ingresar el comando:

firebase init

Luego debes seleccionar la función de Hosting con la barra espaciadora y presionando la tecla Enter.

Luego te pedirá que selecciones el proyecto de Firebase, selecciona el proyecto que creamos en el paso 1 ( en mi caso lo llamé landingPage)

Luego te pedirá que ingreses a la carpeta principal en la que estarán presentes todos tus archivos de tu proyecto web, en mi caso, no escribí nada y presioné la tecla Enter. Esta acción crea la carpeta public que Firebase te indica por defecto:

Después te preguntará si tu aplicación es de una sola página o no, por ahora ingresa la letra y:

En el caso de que Firebase te preguntará si deseas sobrescribir tu archivo index.html, esto se puede evitar ingresando la letra n:

Puedes consultar la documentación de Firebase Hosting para obtener más información: https://firebase.google.com/docs/hosting/full-config#rewrites

¡Listo tu configuración esta ok!

Paso 4: Comprobación de la configuración (opcional)

Si todo lo anterior resulto bien, puedes consultar tu sitio web localmente ejecutando el siguiente comando:

firebase serve

Esto ejecutará tu sitio web localmente en http: // localhost: 5000 de forma predeterminada.

Si abriste tu navegador y escribiste http: // localhost: 5000 la vista que te tendrás será la siguiente:

Pero seguro que tu proyecto no es igual a lo que estás viendo, ¡tranquilo!, esto se debe a que Firebase crea una carpeta en tu proyecto llamada public, por ello, la vista que estás viendo en este momento es la que Firebase ha creado por defecto.

Para visualizar tu proyecto, solo necesitas reemplazar los archivos que están dentro de la carpeta public por los de tu sitio web (ojo, solo los de tu proyecto).

Realizando lo anterior, ejecutas nuevamente el comando:

firebase serve

Y como puedes ver, tu sitio web ya se puede visualizar:

Si al momento de ver este tutorial aún no tienes un proyecto web, recuerda puedes descargar uno que cree para este artículo: github.com/oscarcornejo/landingPage

Paso 5: Implementación

Para la implementación de su proyecto, debe ejecutar el comando:

firebase deploy

Recuerda que debes estar en la carpeta raíz de tu proyecto y no dentro de la carpeta public, Firebase identifica este directorio y ya sabe de qué archivos hacer deploy.

¡Felicidades!

Tu sitio web ya esta visible y activo, puedes verificar tu proyecto ingresando a la url que Firebase te indica en tu terminal, en mi caso es: https://landingpage-web.firebaseapp.com/

Despedida

Gracias por leer este artículo. Si lo encuentras útil, compártelo, estoy seguro que a otras personas también les gustaría leerlo. Significa mucho para mí.

Además, si tienes dudas o quieres aportar con algún contenido, los invito a conectarnos en nuestra comunidad: Front End Chile, el grupo es muy activo y seguro te podemos ayudar a resolver tus dudas.

¡Nos leemos en el próximo artículo! :)