Firebase Hosting con ReactJS

Uno de las multiples servicios que tiene Google es Firebase Hosting.

Con Firebase Hosting podemos tener 1Gb de espacio gratuito para contenidos “estáticos”.

Es un servicio de hosting de contenido web con nivel de producción orientado a programadores. Con un solo comando, puedes implementar aplicaciones web y entregar contenido dinámico y estático en una CDN (red de distribución de contenidos) global rápidamente. También puedes sincronizar Firebase Hosting con Cloud Functions o Cloud Run para compilar y alojar microservicios en Firebase.

NUEVO PROYECTO FIREBASE

Lo primero que tenemos que hacer es crear una cuenta en Firebase y añadirle un proyecto nuevo desde https://firebase.google.com

NUEVO PROYECTO REACT

Creamos un nuevo proyecto React o bien si ya tenemos uno, omitimos este paso.

npx create-react-app firebase-hosting-demo

INSTALAR FIREBASE TOOLS

Para poder trabajar con Firebase, lo haremos a través de Firebase Tools. Son un conjunto de herramientas en linea que nos permitirán desplegar nuestra aplicación en los servidores de Google. Para ello nos dirigimos a nuestro proyecto React y ejecutamos lo siguiente:

npm install firebase-tools -g

Tenemos que identificarnos en Firebase para poder seguir avanzando.

firebase login

INICIALIZAR FIREBASE EN NUESTRA APP REACT

Una vez que estamos identificados en Firebase, procedemos a inicializar nuestra App Reac:

firebase init

Ahora debemos seguir el asistente.

En la primera opción seleccionamos Hosting: Configure and Deploy Firebase Hosting sites
Luego elegimos Use a Existing Project
Seleccionamos nuestro proyecto de la lista
A la pregunta: “What do you want to use as your public directory?” Escribimos “build”. Será nuestro directorio donde estarán las páginas generados por React.
Configure as a single-page app? Contestamos que SI.
File build/index.html already exists. Overwrite? Si ya hemos creado nuestra App React, nos aparecerá esta opción. En cualquier caso, contestamos que NO.

FICHEROS DE CONFIGURACIÓN FIREBASE AUTOGENERADOS

Una vez que termines de inicializar Firebase, deberías ver dos ficheros nuevos en el directorio de tu aplicación: .firebaserc, firebase.json

Estos ficheros configuran tu proyecto Firebase Hosting y deberías guardarlos en tu repositorio GIT.

ENVIANDO LA APP

Tan solo nos queda enviar nuestra aplicación a los servidores de Firebase. Para ello ejecutamos el siguiente comando:

firebase deploy

Una vez realizado, Firebase de devuelve la ruta a tu proyecto.

Felícidades! has conseguido desplegar una aplicación React en los servidores de Firebase.