Cómo implementar una aplicación React con Firebase Hosting

La implementación ahora es fácil gracias a Firebase Hosting.

En este blog, voy a discutir cómo podemos implementar aplicaciones de reacción en unos pocos minutos siguiendo algunos pasos simples. Entonces, para eso, necesitamos dos tecnologías: primero es React para crear una aplicación de muestra y segundo es la tecnología Firebase para el propósito de implementación.

Antes de comenzar el proceso de implementación, primero hablemos brevemente sobre Firebase Hosting.

¿Qué es el alojamiento de Firebase?

Firebase Hosting proporciona alojamiento de contenido web de nivel de producción para desarrolladores. Firebase Hosting es una forma rápida, segura y confiable de alojar sus aplicaciones. Al usar un comando, puede implementar rápidamente aplicaciones web y entregar contenido estático y dinámico a una CDN (red de entrega de contenido) global.

En este artículo vamos a cubrir los siguientes puntos:

• Cree una aplicación React simple con create-react-app
• Inicie sesión en Firebase Console y cree un nuevo proyecto
• Implemente la aplicación React mediante Firebase Hosting

1. Cree una aplicación React simple:

Para este blog, estamos creando una aplicación de reacción básica usando el comando create-react-app . create-react-app es una herramienta que le proporciona una plantilla para las aplicaciones de reacción para que podamos iniciar fácilmente las aplicaciones de reacción. Le ahorra tiempo de instalación y configuración.

Para usar este comando primero debe instalarlo usando el siguiente comando:

 npm install -g create-react-app

El indicador -g en el comando anterior instala el paquete NPM globalmente en la máquina. Una vez que se realiza esta instalación, podemos crear una aplicación de reacción básica. Simplemente ingrese el siguiente comando

 create-react-app mydemo

Entonces, una vez que ejecute el comando anterior, creará el directorio mydemo en su máquina local. Si revisa dentro del directorio mydemo, puede ver todos los archivos que necesita para su proyecto (es decir, repetitivo). Ahora simplemente ingrese el siguiente comando y en localhost: 3000 obtendrá su aplicación de reacción simple.

 cd mydemo npm start

Espero que haya sido fácil y rápido crear una aplicación de reacción. Ahora pasaremos al siguiente paso que es la configuración de Firebase.

2. Inicie sesión en Firebase Console y cree un nuevo proyecto:

Ahora vamos a configurar Firebase. Primero, inicie sesión en Firebase Console usando este enlace https://firebase.google.com/ . Puede iniciar sesión usando su cuenta de Google y hacer clic en el botón Crear un nuevo proyecto mencionado en el nombre de su proyecto y seguir algunos pasos. y tu proyecto está listo.

En la consola Firebase he creado el proyecto Reactdemo

Una vez que se crea el proyecto, tiene la posibilidad de agregar Firebase a cualquier aplicación móvil Android o iOS e incluso a una aplicación web.

3. Implemente la aplicación React mediante Firebase Hosting:

Paso 1: Instale las herramientas de Firebase:

• Primero, necesitamos instalar las herramientas de Firebase que le permitirán implementar su aplicación. Puede instalar las herramientas ejecutando lo siguiente:

  
  

 npm install -g firebase-tools

Paso 2: Inicie sesión en Firebase en su terminal

• El segundo paso es que ahora necesitaremos iniciar sesión en Firebase en su terminal. Se le pedirá que ingrese sus datos de inicio de sesión (correo electrónico y contraseña) si aún no ha iniciado sesión. Además, asegúrese de estar dentro de la aplicación React que hemos creado anteriormente.

• Por ejemplo, su terminal se verá como ~/mydemo.

• Ejecute el siguiente comando

  
  

   firebase login

• cuando ingrese sí , lo redirigirá a la página de inicio de sesión de Google. Allí selecciona la cuenta que has usado para crear el proyecto en un Firebase en la segunda parte.

• Antes de inicializar Firebase, primero cree la compilación para su aplicación de reacción. Entonces, en React, usando el siguiente comando, puede generar fácilmente la compilación para su aplicación.

   npm run build

Paso 3: Inicialice Firebase en su aplicación React

• En el tercer paso, estamos inicializando la cuenta de Firebase con nuestra aplicación de reacción usando el siguiente comando:

   firebase init

• Cuando ejecuta este comando, debe responder algunas de las preguntas que le he mostrado en la imagen a continuación.

• Para la primera pregunta, seleccione la opción Alojamiento: configurar e implementar sitios de alojamiento de Firebase .

• En la segunda pregunta que es Configuración del proyecto, seleccione Usar un proyecto existente , y en ese nombre de proyecto seleccionado de Firebase que ha creado en la parte 2, mi nombre de proyecto es ReactDemo, así que lo he seleccionado.

• Y la última parte es la parte de configuración del Hosting aquí, deberá especificar la carpeta donde Firebase buscará los activos para implementar. De forma predeterminada, la carpeta de compilación contendrá los activos de producción. Entonces ingrese build como respuesta a esta opción.

• Para Configurar como una pregunta de aplicación de una sola página, ingrese y para esta opción.

• La última pregunta es si sobrescribir o no su build/index.htmlfile existente. Por lo tanto, querrá ingresar N (No) para esta opción porque queremos el archivo index.html real que Reacts se genera al crear la compilación.

• Una vez que se realiza la parte de inicialización, puede verificar el directorio, debería ver dos archivos nuevos .firebaserc, firebase.json . Estos archivos se generan automáticamente.

  
  

Paso 4: implementar la aplicación React

• El cuarto paso es implementar su aplicación.

• Ahora que todo está configurado, ¡puede continuar e implementar su aplicación! Lo único que debe hacer es ejecutar el siguiente comando:

   firebase deploy

Una vez que ejecute este comando, Firebase le dará una URL de alojamiento única donde se encuentra su aplicación implementada. Por ejemplo https://reactdemo-f8d87.web.app

También puede ver la lista de registros de implementación dentro de la pestaña Alojamiento en el proyecto de Firebase en la consola de Firebase.

Sí, 🎉Hemos implementado con éxito nuestra aplicación React con la ayuda de Firebase Hosting. Disfruta de la codificación 😊