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 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. create-react-app 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 obtendrá su aplicación de reacción simple. localhost: 3000 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 . 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. https://firebase.google.com/ 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 , 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. sí 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 , 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. Usar un proyecto existente 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 para esta opción. y La última pregunta es si sobrescribir o no su existente. Por lo tanto, querrá ingresar para esta opción porque queremos el archivo index.html real que Reacts se genera al crear la compilación. build/index.htmlfile N (No) Una vez que se realiza la parte de inicialización, puede verificar el directorio, debería ver dos archivos nuevos . Estos archivos se generan automáticamente. .firebaserc, firebase.json 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 😊

Google

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Firebase

2022 - HackerNoon Contributor of the Year - Programming

2022 - HackerNoon Contributor of the Year - React

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - Software Developer of the Year

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

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

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

Demasiado Largo; Para Leer

Company Mentioned

@snehalnarkar9

HISTORIAS RELACIONADAS