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
FIREBASE LOGIN
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.