Al desarrollar cualquier proyecto, debemos alojarlo en algún lugar para que todo el mundo pueda ver nuestro arduo trabajo. A veces, el alojamiento de sitios web puede resultar ajetreado, pero no debe preocuparse, ya que ahora podemos alojar nuestro proyecto React en Firebase en uno o dos minutos con una configuración muy sencilla.
Pasos para implementar el proyecto React en Firebase:
Siga los pasos a continuación o especialmente necesarios para configurar una base de fuego para su proyecto React .
- Paso 1: Primero configuraremos nuestro proyecto Firebase, iremos a su sitio web oficial y crearemos un proyecto como se muestra a continuación.
- Paso 2: Luego habilitaremos Firebase Hosting ingresando a la sección de alojamiento en el menú desplegable Build.
-
Paso 3: Luego, realizaremos la configuración del alojamiento como se describe a continuación.
Creando la aplicación React:
-
Paso 1 : Cree una aplicación React usando el siguiente comando:
npx create-react-app react_hosting
Paso 2 : Instale las herramientas de Firebase:
-
npm install -g firebase-tools
Estructura del proyecto:
Estructura del proyecto
Sitio web de alojamiento:
-
Paso 1: Primero, inicializaremos un proyecto de Firebase en nuestra aplicación React ejecutando el siguiente comando en la consola en nuestro directorio raíz.
firebase init
Ahora escriba y ya que estamos listos para continuar.
- Paso 2: Seleccione Hosting de las opciones proporcionadas.
- Paso 3: seleccione la opción Usar un proyecto existente .
- Paso 4: como la carpeta de compilación de las aplicaciones de reacción se genera en la carpeta de compilación de manera predeterminada, usaremos la misma que nuestro directorio público.
- Paso 5: Escriba y ya que queremos configurar nuestra aplicación como una aplicación de una sola página.
La inicialización está completa, ahora solo necesitamos ejecutar algunos comandos y nuestra aplicación estará lista para funcionar.
- Paso 6: Ahora ejecutaremos el siguiente comando para construir nuestra aplicación de reacción.
npm run build
- Paso 7: Ahora solo necesitamos ejecutar el último comando y nuestra aplicación se implementará.
firebase deploy
Esto desplegará nuestro proyecto y también nos proporcionará el enlace de alojamiento que podemos visitar.
Salida: podemos verificar que nuestro sitio web se implementó correctamente visitando el enlace de alojamiento proporcionado por firebase en la consola, como se muestra a continuación:
