Firebase

Usar PUG en Firebase

Usar PUG en Firebase Si ya tenemos nuestra aplicación funcionando con firebase hosting y firebase functions podemos añadir el sistema de plantillas PUG, por ejemplo, para mostrar las pantallas dinámicamente de manera fácil. Si no tienes tu aplicación ya en funcionamiento con estas tecnologías, en este post muestro como se hace y se automatiza el despliegue. Primero que nada tendremos que añadir la dependencia de PUG npm install pug --save Ahora en nuestro index.js podremos indicarle que estamos usando este sistema de plantillas y posteriormente usarlas. En nuestro caso se encuentra dentro del directorio /functions. app.set('view engine', 'pug'); app.set('views', 'views'); // ... app.get('/', (request, response) => { response.render('index'); }); Y como le hemos indicado en el paso anterior que las vistas están en el directorio /view es ahí donde tenemos que crear nuestro index.pug doctype html html(lang="es") head meta(charset='UTF-8') title= 'Saber y Ganar' link(href='/css/styles.css', rel='stylesheet') script(src='https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js') script(src='https://www.gstatic.com/firebasejs/5.0.4/firebase-database.js') body p Hello World! Si hemos seguido todos los pasos y configurado todo correctamete al abrir nuestra aplicación se nos mostrará nuestra plantilla. Ejemplo Tengo un proyecto de ejemplo de preguntas y respuestas donde uso este sistema de plantillas. Está en el siguiente repo de GitHub.

Despliegue automático en Firebase hosting desde Github

Despliegue automático en Firebase hosting desde Github Para desplegar automáticamente nuestra aplicación en el sistema de hosting de Firebase usaremos una herramienta llamada travis. Crear un fichero en la raiz de nuestro proyecto .travis.yml donde configurar todo lo referente al despliegue. En este primer ejemplo indicamos el lenguaje con el que trabajamos y su versión. Además, le indicamos que tiene que instalar las herramientas de firebase y que si todo sale bien lo despliegue con el token que le indicaremos a continuación. De momento no hacemos nada para decidir si debemos desplegar o no. language: node_js node_js: - "6.11.5" sript: - echo "Deploying!" install: - npm install -g firebase-tools after_success: - firebase deploy --token $FIREBASE_TOKEN Obtener token de firebase hosting Para obtener este token ejecutamos firebase login:ci Con este token vamos a travis, lo vinculamos con nuestra cuenta de github, entramos en el proyecto que queremos hacer despliegue automatico y lo añadimos a los respositorios de travis. Ahora dentro de este proyecto en el apartado de opciones » ajustes y en la parte de abajo tenemos un apartado de variables. En él añadimos una variable con el nombre que puesto en el apartado after_success anteriormente, en nuestro caso FIREBASE_TOKEN como nombre y como valor ponemos el token que hemos obtenido al ejecutar firebase login:ci Ahora si nos dirigimos a nuestro proyecto en una ruta de este estilo travis-ci.org/USUARIO/NOMBRE-PROYECTO veremos como se ejecutan las instrucciones que hemos indicado en el fichero .travis.yml. Configurar .travis.yml Ahora mismo este fichero no tiene gran cosa, solo instala las herramientas de firebase y muestra un mensaje por consola. Tendremos que sustituir el mensaje por consola por las instrucciones que nos hagan falta, en mi caso ha quedado de la siguiente forma. language: node_js node_js: - "6.11.5" sript: - yarn install install: - yarn add pug - yarn global add firebase-tools - yarn add -D jest - yarn add -D babel-plugin-transform-es2015-modules-commonjs - yarn install after_success: - firebase deploy --token $FIREBASE_TOKEN En la parte de instalación le he añadido todas las dependencias de mi proyecto, pug, firebase-tools, jest, babel-plugin-transform-es2015-modules-commonjs y después de todo esto le he indicado que tiene que instalarlas. Llegados a este punto es importante que tengas un script test dentro de tu package.json. Porque este es el que se ejecutará al final de todo el proceso de instalación y, dependiendo del resultado el sistema lo considerará success o no. En mi caso el script que tengo es de la siguiente forma. "scripts": { "test": "yarn jest", [...] Al tener todo esto configurado cuando hagamos un nuevo push a nuestro respositorio travis lo detectará y ejecutará nuestro script, si todo sale bien desplegará nuestra nueva versión. Además nos mantendrá informado de el estado de la aplicación. Referencias Articulo original Toda la información referente a firebase aquí Documentación oficial de Travis aquí Este proyecto se encuentra en Github

Node.js apps en Firebase

Node.js apps en Firebase Si queremos podemos montar nuestra aplicación Node.js en firebase hosting usando firebase functions de manera gratuita y sin muchos problemas. A continuación muestro como inicial el proyecto. Instalación y configuración Primer paso instalar firebase-tools en caso de no tenerlo instalado. Basta con ejecutar: npm install -g firebase-tools A continuación dentro de nuestro directorio donde usaremos para la aplicación iniciamos un hosting con firebase: firebase init hosting Durante la configuración nos hará varias preguntas, donde se alojará la parte pública de la aplicación y si esta será SPA o no, decidiremos en nuestro caso concreto y continuamos. Seguimos iniciando el módulo de funciones. firebase init functions De igual manera que en el caso anterior preguntará que queremos usar, lo cofiguramos a nuestro gusto sin mayor problema y seguimos. En nuestro caso como usaremos express vamos dentro del directorio functions y le indicamos esta dependencia npm i express --save Primera función Ahora abrimos nuestro proyecto con nuestro editor, vamos al fichero /functions/index.js y descomentamos las líneas que vienen por defecto quedando tal que así. const functions = require('firebase-functions'); // Create and Deploy Your First Cloud Functions // https://firebase.google.com/docs/functions/write-firebase-functions exports.helloWorld = functions.https.onRequest((request, response) => { response.send("Hello from Firebase!"); }); Desde este fichero podemos crear nuestra primera función, en este caso haremos una ruta en la que nos mostrará el el resultado de la función Date.now(). Para ello tendremos que importar express y crear nuestro objeto app. Además cambiaremos el objeto que exporta nuestra aplicación sustituyendo exports.helloWorld por exports.app. const functions = require('firebase-functions'); const express = require('express'); const app = express(); app.get('/timestamp', (request, response) => { response.send(`${Date.now()}`); }); exports.app = functions.https.onRequest(app); Tras esto estamos casi listos para desplegar nuestra primera aplicación con firebase, ahora tenemos que ir a la raíz del proyecto y abrir firebase.json y en él añadir la ruta dentro del hosting. He eliminado el resto de información que tiene el objeto para evitar confusiones. { "hosting": { //some other things "rewrites": [{ "source": "/timestamp", "function": "app" }] } } Si queremos añadir más rutas en nuestro objeto app en firebase.json tenemos que cambiar "source": "/timestamp" por "source": "**" de esta forma todas las rutas que configuremos se redigirán a app. Ya tenemos todo listo para probar nuestra primera ruta en la aplicación. Esto lo haremos de manera local, para ello ejecutamos el siguiente comando y todo debería funcionar. firebase serve --only functions,hosting Si todo sale bien tendríamos que ver en nuestra terminal algo parecido a esto user@user:~/$ firebase serve --only functions,hosting === Serving from '/home/user/Documents/project-directory'... i functions: Preparing to emulate functions. i hosting: Serving hosting files from: public ✔ hosting: Local server: http://localhost:5000 ✔ functions: app: http://localhost:5001/project-name/us-central1/app Y ya podremos usar sin problema si vamos a http://localhost:5000/timestamp veremos el resultado de nuestra función. Si queremos desplegar nuestra aplicación en el hosting por defecto que nos presta firebase lo podremos hacer ejecutando el siguiente comando. Esto funcionará si hemos vinvulado en el los primeros pasos nuestro proyecto con firebase. firebase deploy Una vez termine te indicará la url por defecto que se te ha asignado. El resultado debe ser similar a este. user@user:~/$ firebase deploy === Deploying to 'project-name'... i deploying functions, hosting i functions: ensuring necessary APIs are enabled... ✔ functions: all necessary APIs are enabled i functions: preparing functions directory for uploading... i functions: packaged functions (936 B) for uploading ✔ functions: functions folder uploaded successfully i hosting: preparing public directory for upload... ✔ hosting: 2 files uploaded successfully i functions: updating function app... ✔ functions[app]: Successful update operation. ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project-name/overview Hosting URL: https://project-name.firebaseapp.com Problemática En mi caso he tenido varios problemas. No me reconoce la ruta / Si queremos que nuestra aplicación funcione la ruta app.get('/', (request, response) => {}); y haga lo que le hemos indicado en nuestra aplicación hay que tener cuidado con lo que genera firebase por defecto. Si nos fijamos en nuestro directorio public tenemos un fichero index.html si no lo borramos el hosting por defecto mostrará este fichero HTML ignorando nuestra configuración de la aplicación. Permisos El primero de ellos con los permisos de los directorios donde estaba instalado firebase globalmente. En los log del sistema me decía que no podía acceder/crear un nuevo directorio en la ruta. Lo que hice para solucionar ha sido cambiar los permisos de esta ruta para que mi usuario pueda acceder a ella de la siguiente forma. sudo chown -R $(whoami) /usr/local/lib/node_modules/ Versión de Node El segundo de ellos ha sido la versión de node instalada en el sistema. Yo tenía la 6.11.4 y firebase era compatible a partir de la 6.11.5 según decía el mensaje de error. Para ello instalé el nvm (Node Version Manager), ya que tengo otro poryecto que usa esta versión anterior y no quiero que le pase nada. En el propio repositorio explica paso a paso como instalarlo. Con él instalado hice nvm install node con lo que me descargué la última versión 10.4.0 en este momento. Volví a tratar de ejecutar la aplicación en local y me decía que la versión seguía siendo la antigua. Esto es porque había cambiado de versión en otro terminal. Para que los cambios surtieran efecto tendria que volver a cambiar la version de node en el terminal donde estaba trabajando con firebase o pasarme a usar este que ahora tengo con la version buena. En cualquier caso cada vez que iniciemos un nuevo terminal este tendrá por defecto la última versión de node siempre. Pero todo no acaba aquí, resulta que la versión de firebase en la que estoy solo acepta node 6.11.5 justo la versión siguiente en la que me encontraba. Así que una vez más node install 6.11.5 y con todo esto por fin pude ver en local mi proyecto. Para cambiar a la versión en la que me encontraba usé node use 6.11.4 y en caso de querer usar la última existe un alias que puedes usar node use default con el que pasas a la 10.4.0 la más actual que dispongo. Referencias Video original de google en inglés. Firebase Hosting, documentación oficial. Node, documentación oficial. SPA Single Page Application o Aplicación de Página Única. Repositorio donde enconrar las instrucciones de instalacion de nvm Java Script es el lenguaje que uso en los ficheros que muestro.