React y Firebase son todo lo que necesita para alojar sus aplicaciones web

Muchas historias modernas de desarrollo web no tienen un buen final debido a la compleja cantidad de tecnologías involucradas y al enfoque de desarrollo adoptado para realizar el trabajo.

La verdadera pregunta es, ¿cómo podemos hacer que este viaje sea menos doloroso, o debería decir más fructífero y efectivo? Idealmente, las tecnologías que elegimos deben estar bien establecidas y tener un gran apoyo de la comunidad.

En este artículo, veremos dos tecnologías que están muy bien establecidas y cuentan con un fuerte apoyo de la comunidad, que nos permiten crear aplicaciones web en vivo de manera más efectiva.

Prerrequisitos:

  • Sabes algo de React, al menos lo básico
  • Tienes Node.js y NPM instalados
  • Sabes cómo usar la línea de comandos

Así que esto es lo que vamos a cubrir hoy:

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

Cuando inicialmente intenté implementar una aplicación web React en el alojamiento de Firebase y quería obtener la aplicación weben funcionamiento, me enfrenté a algunos obstáculos. Me di cuenta de que podría ser útil recopilar toda la investigación que he realizado en un artículo completo para ayudar a la comunidad. Entonces empecemos.

En un nivel alto, este artículo se divide en tres partes:

  1. Obtenga una aplicación React muy básica en su lugar
  2. Crea una cuenta de Firebase
  3. Conecte nuestra consola Firebase a nuestra aplicación React

Parte 1: crea la aplicación React

Probablemente sepa que create-react-app myappes la mejor manera de crear un modelo básico para una aplicación React. No solo crea una plantilla muy básica, sino que también agrega las dependencias necesarias para que React se ejecute.

Si no se da cuenta de la verdadera magia y el poder de este comando de una línea, intente crear un directorio para React desde cero. Solo entonces te darás cuenta del verdadero dolor involucrado. Un gran agradecimiento a los desarrolladores que configuraron este comando en primer lugar.

Para comenzar, necesitamos instalar create-react-app en nuestra máquina.

$ npm install -g create-react-app

La bandera -g en el comando anterior instala el paquete NPM globalmente en la máquina.

Una vez hecho esto, usaremos este paquete para obtener un modelo básico de React.

$ create-react-app myapp

Esto creará un directorio llamado myapp . Ahora tenemos que navegar al directorio y ejecutar el siguiente comando.

$ cd myapp$ npm start

Una vez que ejecute el comando anterior, un servidor de desarrollo local debería iniciar y renderizar la aplicación React inicial en la ubicación localhost: 3000

Espero que haya sido rápido y fácil. Tenemos un último paso que debemos completar, pero primero echemos un vistazo a Firebase . Volveremos al último paso con React después de eso.

Parte 2: Configuración de Firebase

Primero comprendamos qué es Firebase antes de sumergirnos en su configuración.

Firebase es una plataforma de desarrollo de aplicaciones web y móviles que proporciona a los desarrolladores una gran cantidad de herramientas y servicios para ayudarlos a desarrollar aplicaciones de alta calidad, aumentar su base de usuarios y obtener más ganancias.

Echemos un vistazo al historial de Firebase antes de configurarlo.

Una breve historia

En 2011, antes de ser conocido como Firebase, era una startup llamada Envolve. Envolve como producto proporcionó a los desarrolladores una API que permitió la integración de la funcionalidad de chat en línea en su sitio web.

La compañía notó que los desarrolladores estaban usando Envolve para sincronizar datos de aplicaciones, como el estado del juego en tiempo real, entre sus usuarios y no solo mensajes de chat.

Esto llevó a los fundadores de Envolve, James Tamplin y Andrew Lee, a separar el sistema de chat y la arquitectura en tiempo real. En abril de 2012, Firebase se creó como una empresa independiente que proporcionaba Backend-as-a-Service con funcionalidad en tiempo real.

Después de que Google lo adquirió en 2014, Firebase se convirtió rápidamente en el gigante multifuncional de una plataforma web y móvil que es hoy.

Esta única imagen describe Firebase en todo su poder.

Inicio de sesión en Firebase

Así que comencemos con esto: vaya a //firebase.google.com/ e inicie sesión con su cuenta de Google. Una vez que haya iniciado sesión, haga clic en Ir a la consola . Se le presentará una opción para crear un nuevo proyecto .

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

Parte 3: Firebase y React

Haga clic en la opción para Agregar Firebase a su aplicación web . Obtendrá un cuadro de diálogo con un fragmento de código.

Agregue este fragmento de código al final de su archivo index.html en su proyecto. Asegúrese de que este fragmento de código se agregue antes que cualquiera de las otras etiquetas de secuencia de comandos en su archivo index.html .

Si observa detenidamente la imagen de arriba, puede ver que hay algunos enlaces en la parte inferior. Haga clic en el primer enlace y consulte Introducción a Firebase para aplicaciones web . Se le presentará la siguiente pantalla.

Haga clic en empezar.

Vaya a su directorio raíz e ingrese el comando anterior en su terminal. Esto descargará las herramientas de Firebase en su máquina localmente.

El siguiente y último paso es inicializar Firebase e implementar el código fuente dentro de su directorio en Firebase.

Una vez que presione finalizar, y haya seguido todos los pasos anteriores y los haya ingresado en su terminal, debería tener una lista de los últimos registros de implementación que se muestran en la página web.

Volver a visitar React, como se prometió

¿Recuerda que en la parte anterior de React, dije que volveríamos a hacer una última cosa? Vamos a hacer eso ahora.

Navega hasta el directorio donde se crea tu aplicación.

La forma en que funciona React es que te permite crear una versión de compilación. Esta es una versión muy reducida de toda la enorme biblioteca de códigos que configura si tiene una aplicación bastante densa.

Para obtener esta versión minificada y comprimida, podemos usar nuestro terminal y un comando muy útil:

$ npm run build

Esto crea una nueva carpeta en el directorio de su aplicación llamada build . Esta carpeta contiene algunos archivos que son las piezas más esenciales de toda su aplicación React.

Conclusión

Si ha seguido todos los pasos con cuidado y ha leído un poco de la documentación oficial, todo esto debería ser muy sencillo.

Personalmente, creo que Firebase ya ha revolucionado la forma en que los desarrolladores prueban y utilizan el alojamiento como servicio . Esta es una forma mucho más simple y relajada de alojar sus aplicaciones de manera eficiente, sin profundizar en los detalles del alojamiento.