Introducción a Node.js, parte 10: Archivos públicos con express

Desde que hemos iniciado con esta serie de tutoriales, tanto de Node.js como Express, hemos visto que con esta nueva tecnología nosotros debemos personalizar los path, agregando acciones a cada uno, para que cada vez que se acceda a una url en nuestro sitio suceda algo. Esto es diferente a las aplicaciones web tradicionales en donde una url apunta a un archivo, ya sea del frontend, como del backend.

Pero esto no es así en forma absoluta. Los navegadores web no sólo reciben respuestas de los servidores, en forma de html, que previamente ha sido procesado gracias a un lenguaje de servidor como PHP, Ruby, Python o, como estamos viendo ahora, Node. Muchas veces los navegadores acceden a archivos como Javascript, Css, imágenes, música, videos, PDF, etc.

Sería una locura pretender crear acciones para cada una de las imágenes que se cargan en nuestro sitio. Para solucionar esto, nosotros contamos con la carpeta public, esta carpeta como su nombre lo indica contendrá todos los archivos públicos.

Para probar esto guardá la imagen que adjunto a continuación, dentro public -> images

 

 

 

 

 

Ahora, reinicia tu aplicación compilando el archivo app.js:

node app.js

Abrí el navegador y andá a

https://localhost:3000/images/manzana.jpg

Debería aparecer la imagen de nuestra manzana. Esto se da, porque como dije antes, esta carpeta public que contendrá los archivos que se accedan desde una url, sin la necesidad de crear acciones.

Sin embargo, aunque creo que está de más decirlo, es importante entender que dentro de esta carpeta debería ir aquellos archivos que no contengan lógica. Por ejemplo, aquí no deberíamos incluir módulos, ya que al ser públicos podrán ser accedidos por el usuario.

Si te has fijado bien, dentro de la carpeta public también habrá tres sub carpetas: imagesjavascriptsstylesheets. Esta es una forma de separar los distintos archivos, y así tener todo ordenado, pero vos podés trabajar como gustes.

Podríamos crear una nueva vista, dentro de nuestra carpeta views con el nombre manzana.jade, con el siguiente código:

extends layout
block content
  h1 Manzana
  div
    img#manzana(src="/images/manzana.jpg", alt="Manzana")

Y agregamos la acción que muestre esta vista dentro de app.js:

app.get('/manzana', function(req, res){
   res.render('manzana');
});

Bien, ahora podríamos agregar un poco más de vida con Css y Javascript. Así que primero vamos a ir a public -> stylesheets aquí debería haber un archivo Css ya creado llamado style.css, si no es así lo creamos. Y vamos a editarlo agregando en alguna parte estas líneas:

#manzana {
   opacity: 0.3;
}

Dentro de public -> javascripts guardaremos alguna librería de jquery, en mi caso yo trabajaré con la 1.10.2. Y también crearé un archivo Javascript al que llamaré manzana.js, con el siguiente código:

(function(){
   $("#manzana").hover(function(){
      $(this).animate({
         opacity: 1.0
      }, 1000);
   }, function(){
      $(this).animate({
         opacity: 0.3
      }, 500);
   });
}).call(this);

Nada del otro mundo, le agregamos una opacidad a la manzana con Css, y luego una acción con Javascript, dependiendo de si tiene o no el mouse encima.

Ahora, vamos a importar en este último archivo dentro de la vista manzana.jade. Entonces cambiaremos el código de éste:

extends layout
block content
  h1 Manzana
  div
    img#manzana(src="/images/manzana.jpg", alt="Manzana")
  script(type='text/javascript', src='/javascripts/manzana.js')

También deberíamos agregar la librería de Jquery, pero lo ideal sería que ésta se agregue dentro del head del html, para que se cargue al principio de la página, y además porque debería ser reutilizable por otras páginas. Para ello vamos a abrir el archivo layout.jade, dentro de views, y vamos a agregar debajo de:

link(rel='stylesheet', href='/stylesheets/style.css')

La librería de Jquery:

script(type='text/javascript', src='/javascripts/jquery-1.10.2.min.js')

 

Layout

La vista layout.jade que viene por defecto, es el archivo que contendrá el esqueleto del sitio, esto se debe a que entre página y página el contenido se repite. Por esto se utiliza este archivo, para definir todas las hojas de estilo, javascripts, cabeceras, pie de página, etc. Mientras que:

block content

Será el contenido central, osea lo que cambie entre página y página.

Por eso dentro del archivo manzana.jade incluimos las líneas:

extends layout
block content

Para importar el layout.

Esto es muy útil, para evitar la redundancia. Porque si de pronto nosotros necesitamos agregar un contenido que se modifique en todas las páginas, simplemente podemos abrir el layout, modificarlo, y estará disponible en todo el sitio.

Descargar ejemplo

Saludos!

Anterior: Introducción a Node.js, parte 9: Métodos GET y POST con express

Siguiente: Introducción a Node.js, parte 11: Crear un chat con socket.io

Redes sociables