Implementar un proyecto web en Firebase con node

En pocas palabras, estamos desarrollando una app o una web y queremos tener poco trabajo en el backend. Firebase es una muy buena alternativa para implementar un proyecto web .

Qué es Firebase?

Firebase es una plataforma propiedad de Google para el desarrollo de aplicaciones web y móvil. Ofrece diferentes servicios integrados con lo que es muy sencillo desarrollar aplicaciones. Librerías de autenticación, bases de datos en tiempo real, analytics, almacenamiento en en la nube, etc. hablar de esta plataforma en constante crecimiento seria muy largo en estos momentos, nos vamos a centrar en una de ellas el Hosting en su versión gratuita (plan “Spark”), para hacer pruebas de una forma sencilla.

Hosting

Como siempre la entrada es con una cuenta de gmail y vamos a la “consola” donde crearemos un proyecto. Dentro iremos a la sección “productos de compilación” donde está todo el backend y en donde encontraremos la parte de Hosting. En el plan Spark gratuito tenemos 10 gb de espacio, transferencia 360 Mb/día, dominio personalizado y varios sitios por proyecto.

En caso de no tener dominio podemos utilizar los que nos proponen ellos del tipo xxx.web.app, donde en lugar de xxx podemos poner lo que nos venga bien, en este caso voy a utilizar “video2”.

Qué es node?

Es un entorno de código abierto y multiplataforma con un motor de JavaScript integrado. Lo que nos permite Node es ejecutar JavaScript fuera del entorno del navegador de forma muy rápida. Esta basado en el motor de JavaScript de Chrome.

Se puede utilizar cualquier editor de código (Notepad ++, Bluefish … yo utilizo Visual Code) vamos a la carpeta correspondiente donde tenemos el export y abrimos un terminal, vemos si tenemos node instalado y su gestor de paquetes.

node -v

npm -v

Nos ha de devolver la versión que tenemos instalada, en caso de que no este instalado vamos directamente al instalador de Node la descargamos, en mi caso para Windows (x64)

Siempre mejor utilizar la versión estable recomendada (LTS) para la mayoría de usuarios, después reiniciar el ordenador. Podemos descargar también versión para Mac, para Linux, con gestores de paquetes etc.

Pasos a seguir para implementar Firebase un proyecto web con node

Una vez tenemos Node y su gestor de paquetes instalado (npm) vamos a Firebase para desde allí gestionar la parte de servidor.

1. Vamos a Firebase

Desde Firebase – Hosting añadimos nuevo site. Nos pide un nombre para utilizar como prefijo del dominio, lo tengo como Id por si después queremos añadir más sitios al mismo proyecto.

2. Ponemos en una carpeta todo nuestro proyecto

Partimos de un proyecto web, yo he utilizado Bootsrap Studio y lo he exportado a una carpeta llamada “export” donde tenemos los ficheros html y una carpeta “assets” donde están las imágenes, css, javascript etc.

3. Instalamos Firebase CLI

Después vamos a instalar las herramientas de Firebase con node cli. También nos invita a actualizar el gestor de paquetes de node al final si detecta que hay una versión nueva. Muy cómodo.

npm install -g firebase-tools

4. Iniciamos el proyecto

Autentificamos en Firebase

firebase login

En windows podemos tener problemas con la “Policies” de usuarios ejecución de scripts deshabilitada hemos de ejecutar este comando

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Vemos los proyectos que tenemos para comprobar que esta creado correctamente

firebase projects:list

iniciamos el procedimiento del nuevo proyecto

firebase init

Nos aparece la siguiente pantalla, con los cursores vamos al primero de los dos métodos de Hosting . Lo marcamos con la barra espaciadora, y damos intro,

a continuación nos propone la creación de la carpeta “public”que aceptamos y dos configuraciones mas que en este caso no nos interesan y ponemos la “n” de no

Nos crea una carpeta Public y ponemos nuestros archivos dentro (index y Assets) que hemos exportado de Bootstrap.

5. Despliegue / deploy con Firebase .

Si tenemos varias webs en el mismo proyecto hay que especificar cual de ellas vamos a crear o actualizar.Para ello hemos de editar el archivo firebase.json que nos ha creado en la carpeta de trabajo, la misma de “public”. Hay que poner el siguiente código, con la id del que acabamos de crear. En este caso quedaría así

{
  "hosting": {
    "site": "video2",
    "public": "public"
  }
}

A continuación ya podemos iniciar el despliegue (Deploy) del proyecto

firebase deploy

En caso de que no funcionara correctamente y sobrescribiera otro proyecto después de los dos puntos habría que poner la id de proyecto que hemos definido, el prefijo que hemos añadido a la url. Pero esto sólo en caso de error.

firebase deploy --only hosting:video2

En ambos casos hemos de ver como nos indica el número de archivos que sube al servidor. Luego nos ofrece el link para acceder con el navegador.

Una vez instalado node, Firebase cli, etc, es muy cómo hacer actualizaciones, si estamos logados simplemente seria exportar y ejecutar los dos últimos comandos.

Parece un poco farragoso pero después nos damos cuenta que usar la interfaz de comandos es más rápido que utilizar un FTP y a partir de aquí podemos ir ampliando con el resto de servicios que nos ofrece la plataforma.