Despliega tu Proyecto Gratis en Firebase: Una Guía Paso a Paso
Tags: firebase, español, hosting, website
Published: 2023-12-15 03:00:27

Para comenzar, es esencial tener Node instalado en tu máquina. A continuación, instalamos Firebase Tools de forma global con el siguiente comando:

`npm install -g firebase-tools`

Una vez que Firebase está instalado, iniciamos sesión a través de la terminal con el comando:

`firebase login`

Al ejecutar este comando, se nos presentará la opción de permitir que Firebase recopile información de uso y reportes de errores de CLI y Emulator Suite. Podemos elegir sí (Y) o no (N) según nuestras preferencias.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2hj9qnvmnh74njb205n.png)

Después de seleccionar nuestra preferencia, seremos redirigidos a la página de inicio de sesión de Firebase. Ingresamos nuestras credenciales de Google y aceptamos los permisos necesarios. Una vez aceptado, veremos un mensaje exitoso y podemos continuar desde la terminal.

Siguiendo con el proceso, el siguiente comando es:

`firebase init`

Este comando inicia la configuración de nuestro hosting.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5xvkadml786h8y4riph.png)

Seleccionamos con o sin GitHub Actions, según lo que se ajuste mejor a nuestro flujo de trabajo. Luego, elegimos la opción de hosting que más se adapte y asociamos el proyecto a nuestro desarrollo. En mi caso, ya tengo varios proyectos creados, así que selecciono uno.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vki82igms20aqalqzlrw.png)

El siguiente paso es indicar la ubicación de nuestro proyecto compilado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u11o0a63x84lnlbzhtq.png)

Por defecto, sugiere `public`, pero puedes especificar otra carpeta, por ejemplo, `dist/myproject`. Esta carpeta debería resultar de ejecutar un comando como `npm run build` (revisa tu package.json en la sección de scripts).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kliawgmpkn46m6bepaci.png)

Luego, nos pregunta si nuestro proyecto es una SPA (Single Page Application) como Angular, Vue o React. Si es así, respondemos con "y".

Continuará preguntando si queremos configurar GitHub Actions para automatizar el despliegue al hacer push o merge. La elección depende de tus preferencias.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1u25uh2dvi81rsz6a3c.png)

Si seleccionas la opción por defecto (N), finalizaremos el proceso y se mostrará el resultado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iatirgrka3phwfk5owu9.png)

Si decides configurar GitHub Actions, te pedirá acceso a tu repositorio en GitHub, indicando el nombre de usuario y el nombre de tu proyecto separados por una barra (/), por ejemplo, `dannielnavas/miproyecto`.

Al finalizar, si no configuramos GitHub Actions, solo necesitamos hacer un build (`npm run build`) y luego ejecutar `firebase deploy`. Esto mostrará un enlace al proyecto en Firebase y otro que contendrá nuestro sitio desplegado.

Recuerda que Firebase ofrece un servicio gratuito mensual. Mientras no superes esa cuota, todo el funcionamiento será sin costo.

Espero que este artículo te ayude a desplegar tus proyectos de forma gratuita, independientemente de la tecnología utilizada.

No olvides que he contribuido a la comunidad de DevToSpanish, donde puedes encontrar más artículos escritos por hispanohablantes [aquí](<https://devtospanish.danniel.dev/>).