Deploy Gatsby React app en Firebase

Después de crear una aplicación en React el paso final es la implementación desplegando la aplicación correctamente.

Desplegando la aplicación la haremos visible y la pondremos accesible en producción o en el entorno que hayas elegido.

En esta entrada vamos a desplegar nuestra aplicación React utilizando Firebase como hosting. (Exactamente como está montado ahora mismo esta web)

Utilizar Firebase como hosting Deploy

Vamos a ver los tres pasos que tienes que realizar para desplegar tu aplicacion en Firebase.

Estos pasos también funciona para cualquier otra biblioteca o framework como Angular o Vue.

El primer paso sería instalar el CLI de Firebase globalmente en tus módulos de node:

npm install -g firebase-tools

Con una instalación global de Firebase CLI, puedes implementar cualquier aplicación sin preocuparte por la dependencia de tu proyecto.

Cómo cualquier paquete de node que hayas instalado globalmente recuerda que debes actualizarlo de vez en cuando a una versión más nueva con el mismo comando:

npm install -g firebase-tools

Una vez instalado en node, vamos a logearnos en Firebase, obviamente tienes que tener una cuenta en Firebase, y un proyecto creado que utilizará el hosting, si no lo tienes todavía entonces debes de hacerlo ya!
Vamos a  Firebase y creamos un nuevo proyecto.

Y ahora vamos a asociar Firebase CLI con nuestra cuenta de Google Firebase, para eso lanzamos el siguiente comando:

firebase login

Una vez que realizas el siguiente comando debes de ver una URL en su línea de comando o bien se abrirá tu navegador. Si esto no sucede, Firebase CLI puede abrir la URL automáticamente.

Elije tu cuenta de Google para crear un proyecto de Firebase y dale a Google los permisos necesarios. Deberías de ver una confirmación desde Google diciendo que tu configuración es correcta. Regresa a la línea de comandos para verificar que te has logeado correctamente.

A continuación, vamos a la carpeta del proyecto y ejecutamos el siguiente comando, que inicializa un proyecto de Firebase que se pueda usar como hosting de Firebase:

firebase init

Elije la opción de Hosting.

Como Google conoce los proyectos de Firebase asociados con tu cuenta después de iniciar sesión, puedes seleccionar tu proyecto de Firebase de una lista de proyectos de la plataforma Firebase:

Hay algunos pasos de configuración que puedes definir. En lugar de usar la carpeta public como predeterminada, en mi caso vamos a utilizar la carpeta public, así lo que dejamos tal y como está. Si configuras el paquete con una herramienta como Webpack, puedes elegir el nombre apropiado para la carpeta de compilación:

La aplicación de React crea una carpeta después de realizar la compilación npm run build por primera vez. En esta carpeta encontrarás todo el contenido dentro de la carpeta public , que será la carpeta que vas a realizar el deploy

En mi caso que estoy subiendo un proyecto Gatsby lanzo el comando Gatsby build para ver lo que genera y ver que todo está en orden.

gatsby build

Una vez que acaba de generar la web lanzo el siguiente comando para realizar el deploy en Firebase.

firebase deploy

Ahora, después de lanzar el comando Firebase te dirá que todo está ok, y podrás ver tu proyecto en la página de tu proyecto seguido de web.app o seguido de firebase.com , o bien en el dominio customizado que hayas puesto desde Firebase.

En mi caso puedes ver el proyecto en el dominio malditawifi.web.app
Y listo ya tendrás tu web desplegada en Firebase.

Cualquier duda puedes dejar un comentario