Cómo alojar e implementar una aplicación de React con Firebase
Cómo alojar y desplegar una aplicación de React con Firebase
Como desarrollador de front-end, es posible que hayas utilizado una plataforma de hosting gratuito como Vercel, Netlify o GitHub Pages para implementar tus proyectos de front-end.
Personalmente, suelo usar Vercel y Netlify. Pero también me gusta probar diferentes tecnologías web, y he utilizado las características de autenticación y almacenamiento de Firebase en diferentes proyectos antes. Así que decidí usar Firebase para implementar uno de mis proyectos de React con TypeScript, y fue realmente bien.
¿Qué es Firebase?
Firebase es una plataforma Backend-as-a-Service (BaaS) propiedad de Google que puedes utilizar para realizar operaciones en el backend, como autenticación, funcionalidad de base de datos en tiempo real, etc.
Firebase permite a los desarrolladores de front-end trabajar con características del backend sin necesidad de adentrarse realmente en el desarrollo del backend.
También puedes utilizar Firebase para alojar e implementar proyectos. Proporciona una URL de hosting después de la implementación que puedes compartir con otros para que vean tu aplicación en su propio dispositivo, al igual que otras plataformas de hosting e implementación.
Sigue estos procedimientos paso a paso para implementar correctamente tus proyectos de React usando Firebase.
Crea tu proyecto de React
Dependiendo del método que prefieras utilizar para crear proyectos de React, ve adelante y crea uno. Por ejemplo, puedes hacerlo usando CRA: npx create-react-app app-name o usando Vite: npm create vite@latest (recomendado).
Utiliza cd app-name para navegar hasta el directorio del proyecto. Luego usa npm start o npm run dev para iniciar tu servidor de desarrollo. Construye tu proyecto deseado, crea un repositorio en GitHub y sube el proyecto a GitHub.
Ahora hemos terminado con la primera parte del procedimiento. Pasemos a la siguiente parte.
Cómo configurar e instalar Firebase
Si no tienes una cuenta en Firebase, ve a este sitio para crear una cuenta en Firebase o iniciar sesión si ya tienes una. Si tienes una cuenta de Google, será fácil crear una cuenta en Firebase.
Después de haber iniciado sesión correctamente, necesitarás crear un proyecto en Firebase. Así es cómo hacerlo:
Paso 1: Panel de control de Firebase Console.
Ve al panel de control de Firebase Console, donde deberías ver el texto “Ir a la consola” en la parte superior derecha de la página después de iniciar sesión.
La página que se abre tendrá un botón “Crear un proyecto”. Haz clic en ese botón y te llevará a la página donde ingresarás los detalles de tu proyecto (Paso 2).
Si has utilizado Firebase anteriormente, eso significa que ya tienes proyectos en Firebase. En ese caso, aparecerá una página como la siguiente que muestra una lista de tus proyectos y un cuadro para agregar un nuevo proyecto.
Paso 2: Crear un nuevo proyecto
Haz clic en la tarjeta “Agregar proyecto”. Se abrirá una página que te pedirá que le des un nombre a tu proyecto.
Paso 3: Completa los detalles del proyecto
En este ejemplo, he llamado al proyecto “Mi aplicación de React”.
Si eres nuevo en Firebase, deberás marcar la casilla “Aceptar los términos de Firebase” y la segunda casilla.
Haz clic en el botón “Continuar”. La siguiente página que aparece tiene un interruptor para habilitar o deshabilitar Google Analytics para el proyecto. Deshabilita este interruptor, ya que no necesitamos Google Analytics para esta demostración.
Haz clic en el botón “Crear proyecto” y comenzará a crear tu proyecto de Firebase.
Si no es la primera vez que utilizas Firebase, haz clic en el botón “Continuar” en la página anterior, deshabilita Google Analytics y crea un nuevo proyecto.
Paso 4: Instalar Firebase y Firebase Tools
El siguiente paso es ir a la terminal de tu proyecto en VS Code, tu línea de comandos o cualquier editor de código que estés utilizando. Asegúrate de estar en la carpeta principal del proyecto que deseas implementar y luego instala Firebase en el proyecto utilizando este comando: npm install firebase.
A continuación, instala las herramientas de Firebase que utilizaremos para alojar y desplegar utilizando este comando: npm install -g firebase-tools.
Paso 5: Inicia sesión en Firebase utilizando la terminal
Después de configurar el proyecto de Firebase e instalar las dependencias necesarias, deberás iniciar sesión en Firebase en la terminal utilizando este comando: firebase login.
Aparecerá un aviso que te pedirá que selecciones Sí o No a una pregunta sobre si “Permitir que Firebase recopile información sobre el uso de CLI y el informe de errores”. Selecciona la opción “Sí”.
Paso 6: Selecciona tu cuenta
Se abrirá una ventana en el navegador predeterminado que te pedirá que selecciones tu cuenta de Firebase para iniciar sesión.
Después de una autenticación exitosa, aparecerá un mensaje de éxito en la terminal.
Paso 7: Ejecuta la compilación del proyecto
Utiliza el comando npm run build para compilar los scripts del proyecto. Este comando genera automáticamente una compilación lista para producción de tu aplicación, comprimiendo todo el JavaScript, CSS y otros activos necesarios en una sola carpeta “construcción” en el directorio del proyecto.
Este proceso es importante ya que optimiza el código y los activos para un mejor rendimiento. Esto reduce el tamaño total de la aplicación y la hace eficiente para desplegar.
Después de completar con éxito la segunda parte, llegamos a la siguiente parte integral de todo este proceso de despliegue.
Cómo inicializar Firebase
Ahora debemos inicializar Firebase, así que vamos a repasar los pasos para hacerlo.
Paso 1: Inicializa Firebase
Inicializa Firebase para este proyecto utilizando este comando en la terminal: firebase init. Te informará que estás a punto de inicializar un proyecto de Firebase en el directorio.
Después de este comando, aparecerán algunas opciones: “¿Estás listo para continuar?”, a lo cual escribirás “Y” para “Sí”.
El siguiente aviso es: “¿Qué características de Firebase deseas configurar para este directorio?”. Utiliza la tecla de flecha hacia abajo de tu teclado para seleccionar la opción “Hosting: Configurar archivos para Firebase Hosting y (opcionalmente) configurar despliegues de GitHub con Actions”. Presiona la barra espaciadora y luego enter.
Paso 2: Configuración del proyecto
Este paso conecta tu directorio del proyecto con el proyecto de Firebase. Cuando se te pida que selecciones un proyecto, elige la opción “Usar un proyecto existente”. Luego, cuando se te pida que “selecciones un proyecto de Firebase predeterminado para el directorio”, selecciona el proyecto de Firebase específico que creaste en la parte 1 de este proceso.
Es posible que veas otras opciones de proyectos si tienes más de un proyecto de Firebase en tu consola de Firebase.
Paso 3: Configuración de alojamiento
Este proceso generará algunos avisos a los que deberás responder.
El primero es: “¿Qué directorio quieres utilizar como directorio público?”, a lo cual elegirás o escribirás “build”.
Luego, cuando se te pregunte si deseas “Configurar como una aplicación de una sola página (reescribe todas las URLs a /index.html)”, selecciona la opción “Y” o “Sí”.
Cuando se te pida “¿Configurar compilaciones y despliegues automáticos con GitHub?”, elige la opción “Sí”. Además, cuando se te pregunte si “El archivo build/index.html ya existe. ¿Sobrescribir?”, elige “No”.
Paso 4: Autoriza Firebase con GitHub
Deberás autorizar Firebase con tu cuenta de GitHub. Se abrirá una ventana en tu navegador que requerirá que autorices Firebase en tu GitHub e ingreses tu contraseña de GitHub. Después de una autenticación exitosa, recibirás un mensaje de éxito en tu terminal con tu nombre de usuario de GitHub.
Si has seguido correctamente hasta este punto, lo has hecho muy bien hasta ahora. Ahora estamos a mitad de camino para desplegar nuestro proyecto.
Cómo elegir un repositorio de GitHub y configurar el flujo de trabajo de GitHub
Paso 1: Seleccionar el repositorio de GitHub
Primero, deberás escribir el repositorio de GitHub que deseas utilizar para configurar un flujo de trabajo de GitHub para despliegues en Firebase.
El formato para hacer esto es “nombredeusuario/repositorio”. Recuerda que en la parte 1 de este proceso, construiste un proyecto y lo empujaste a GitHub. Ese repositorio de GitHub es el que utilizarás.
Por ejemplo, supongamos que tu nombre de usuario de GitHub es “CoderDev” y el repositorio del proyecto es “Firebase-Deployment”. Escribirás “CoderDev/Firebase-Deployment” en la terminal. Debería lucir así:
Paso 2: Token secreto de GitHub
Después de configurar un flujo de trabajo de GitHub, se creará una cuenta de servicio con permisos de administrador de Firebase Hosting, y se subirá el archivo JSON de la cuenta de servicio a GitHub como un token secreto.
También puedes ver este token secreto en GitHub. Para hacerlo, ve al repositorio del proyecto y cambia a la pestaña “Configuración”. En el panel izquierdo de la página de configuración, haz clic en el menú desplegable “Secretos y variables” y selecciona la opción “Acciones”. Se mostrará tu token secreto de esta manera:
Paso 3: Configurar el flujo de trabajo
Te aparecerá la pregunta “¿Configurar el flujo de trabajo para ejecutar un script de construcción antes de cada despliegue?”. Elige “Sí” para esto.
También se te preguntará: “¿Qué script se debe ejecutar antes de cada despliegue? (npm ci && npm run build) npm run build”. Escribe esto en la terminal: npm ci && npm run build. Esto creará un archivo de flujo de trabajo en el directorio del proyecto.
Ahora verás el archivo “firebase-hosting-pull-request.yml” dentro de la carpeta “.github/workflows” en la estructura de carpetas de tu proyecto.
Paso 4: Despliegue automático
A continuación, se te preguntará si deseas “Configurar el despliegue automático en el canal en vivo del sitio cuando se fusiona una solicitud de extracción”. Selecciona “Sí”.
Cuando se te pida ingresar el nombre de la rama de GitHub asociada con el canal en vivo de tu sitio, escribe o selecciona “main”. Esto creará otro archivo de flujo de trabajo llamado “firebase-hosting-merge.yml” dentro de la carpeta “.github/workflows”.
Paso 5: Generar carpetas
Las dos operaciones realizadas anteriormente generarán dos carpetas en el directorio de tu proyecto. Una llamada “firebase.json” es donde se escribirá la información de configuración, y la otra llamada “.firebaserc” es donde se escribirá la información del proyecto.
Eso es todo lo que tienes que hacer para inicializar Firebase en tu proyecto.
Estos procesos son un poco largos, pero la buena noticia es que lo único que queda por hacer es desplegar en Firebase.
Cómo desplegar en Firebase
Ejecutar el comando de despliegue
Ejecuta el comando de despliegue firebase deploy. Espera a que se despliegue. Después de que esté listo, se mostrará un mensaje de éxito en tu terminal con una URL de hospedaje. Esa es el enlace del proyecto en vivo con una extensión de dominio “web.app”.
¡Eso es todo! Hemos terminado de desplegar nuestro proyecto de React con Firebase.
Ahora, cada vez que añadas, confirmes y empujes nuevos cambios a ese repositorio de GitHub, automáticamente se construirá la aplicación y se volverá a desplegar en Firebase para que los cambios se reflejen en el sitio en vivo.
Este proceso de compilación y implementación automática es posible porque anteriormente, en el proceso de inicialización de Firebase, seleccionamos la opción ‘sí’ para configurar compilaciones automáticas e implementación con GitHub.
También seleccionamos la opción “Sí” para configurar el flujo de trabajo y ejecutar el script de compilación antes de cada implementación, y especificamos los scripts que deben ejecutarse antes de cada implementación.
Para ver cómo se lleva a cabo esta implementación después de cada envío al repositorio, ve al repositorio de GitHub de ese proyecto. Cambia a la pestaña “Acciones” para ver cómo se está construyendo e implementando la aplicación.
Es posible que encuentres algunos errores durante la implementación. Lo bueno es que justo en esa página de acciones de GitHub, puedes rastrear para ver de dónde proviene el error en la aplicación.
Supongamos que estás trabajando con TypeScript en el proyecto y declaraste una función y no la utilizaste, o llamaste a un hook y no lo utilizaste. Es posible que tu aplicación funcione correctamente en el navegador.
Pero al implementar, esto podría ser un problema o causar una advertencia y deberás solucionarlo, confirmar y enviar nuevamente al repositorio para corregir el error. Una vez que hayas hecho esto y la implementación sea exitosa, la página de acciones debería verse así.
Conclusión
Implementar tu proyecto utilizando Firebase puede parecer al principio un proceso largo. Pero si sigues los pasos de este artículo, deberías estar listo para comenzar.
Puedes implementar fácilmente tu aplicación en Firebase Hosting y aprovechar sus potentes capacidades, como procesos automáticos, proceso de implementación simplificado e integración continua con GitHub, siguiendo los pasos sencillos de este artículo.
Si deseas obtener más información sobre todas las funciones que Firebase ofrece a los desarrolladores, visita la Documentación oficial de Firebase y explora.
Leave a Reply