‫Comencemos configurando nuestro motor de plantillas en
‫Express, que luego nos permitirá
‫renderizar sitios web usando plantillas simples como
‫hablamos antes.
‫Entonces, como ya sabrá,
‫en esta parte del curso, es
‫el momento de enviar un sitio web renderizado final al cliente que
‫contiene, por supuesto, todos los
‫datos con los que hemos estado
‫trabajando hasta este punto, como recorridos, usuarios y reseñas.
‫Ahora bien, ¿cómo construimos o renderizamos estos sitios web?
‫Bueno, usamos lo que se llama un motor
‫de plantillas que nos permitirá
‫crear una plantilla y luego llenarla fácilmente con nuestros datos.
‫Y el motor de plantillas
‫que usaremos en este curso se llama pug.
‫Hay un par de otros motores
‫de plantillas como manubrios o EGS para las personas a las que
‫no les gusta el pug, porque sé que hay algunas
‫opiniones sólidas sobre el pug, pero aún diría que
‫pug es en realidad el motor de plantillas más utilizado con Express.
‫Así que ahora, en este video, configuremos
‫pug y rendericemos nuestra primera página web usándolo.
‫El primer paso es decirle a
‫Express qué motor de plantilla vamos
‫a usar, y lo hacemos
‫diciendo justo al
‫principio de la aplicación, app. , así que básicamente esto
‫es como una configuración para el motor de vista, y luego lo configuramos en pug.
‫Y eso es.
‫Entonces Express admite automáticamente
‫los motores más comunes listos para usar
‫y, por supuesto, pug es uno de ellos.
‫Así que en realidad ni siquiera necesitamos instalar pug,
‫y tampoco necesitamos requerirlo en ningún lado.
‫Todo esto sucede
‫entre bastidores internamente en Express.
‫Así que definimos nuestro motor
‫de vistas, ahora también necesitamos definir dónde se
‫encuentran estas vistas en nuestro sistema de archivos.
‫Entonces, nuestras plantillas de pug en realidad se llaman vistas en Express.
‫Esto se debe a que estas plantillas son,
‫de hecho, las vistas en la arquitectura del controlador de vista
‫del modelo que hemos estado usando en este curso hasta este momento.
‫Como saben, ya tenemos los controladores y
‫las carpetas de modelos.
‫De hecho, cerremos estos.
‫Y ahora es el momento de crear la carpeta de vistas.
‫Con eso tenemos los tres componentes
‫de la arquitectura MVC.
‫Para definir ahora en qué carpeta se encuentran
‫realmente nuestras vistas, todo lo que tenemos que
‫hacer de nuevo es decir app. set, y esta vez
‫es la configuración de vista, o en realidad vistas, y luego
‫aquí el nombre de la ruta.
‫Ahora aquí podríamos poner algo como
‫esto, entonces / views, pero eso no es ideal.
‫Como ya sabe, la ruta que proporcionamos aquí
‫siempre es relativa al directorio desde donde
‫iniciamos la aplicación Note, y esa suele ser la
‫carpeta raíz del proyecto, pero puede que
‫no lo sea.
‫Por lo tanto, no deberíamos usar el
‫punto aquí, sino que deberíamos usar la variable de nombre de directorio.
‫Así que hagamos eso, y junto con un
‫buen truco que podemos usar con Note, que es usar el módulo de ruta.
‫Path es un módulo de notas incorporado, por lo que es un módulo central, que
‫se utiliza para manipular los nombres de las rutas, básicamente.
‫Por lo tanto, requiere la ruta, por lo que, por supuesto,
‫no tenemos que instalar nada.
‫Es solo un módulo integrado nativo.
‫Lo que podemos hacer ahora es el camino. unirse, y
‫luego el nombre del directorio, y luego vistas.
‫Esto luego, básicamente detrás de escena,
‫creará una ruta que une el nombre / vistas del directorio.
‫Ahora bien, aquí puede parecer un poco
‫exagerado usar esta ruta. La función de unión
‫aquí, pero no siempre sabemos si una
‫ruta que recibimos de algún lugar ya tiene una barra oblicua o no.
‫Entonces verá que esta función aquí se usa todo el
‫tiempo para evitar este tipo de error.
‫Porque de esta manera ni siquiera necesitamos
‫pensar en barras o
‫no, porque Note creará automáticamente una ruta correcta.
‫En realidad, también deberíamos
‫usar esto aquí donde creamos este middleware.
‫Aquí deberíamos usar exactamente lo mismo aquí.
‫Así que dupliquemos esto.
‫Así que path une y public.
‫De hecho, pongamos este aquí en
‫la parte superior, porque pertenece junto con estos aquí.
‫Sigue siendo un middleware, pero como verá en
‫uno de los siguientes videos, esto funciona en estrecha
‫colaboración con un motor de vistas.
‫Pero esto de aquí ahora hemos configurado nuestro motor pug.
‫Ahora es el momento de crear nuestra primera plantilla.
‫Así que aquí creemos nuestro primer archivo
‫pug llamado base. pug, y como verá,
‫vs code en realidad tiene su propio icono agradable para este tipo de archivo.
‫Todo lo que realmente quiero hacer
‫aquí por ahora es crear un elemento h1, por lo que un
‫encabezado principal simplemente con el nombre de alguna
‫gira, y la forma en que funciona con pug es así.
‫Entonces h1, y luego el contenido del elemento.
‫Digamos The Park Camper.
‫¡Y eso es todo!
‫Eso luego se traducirá a esto
‫aquí, h1 The Park Camper, y luego cerrará eso.
‫Entonces, en html tendríamos que escribir esto, pero la
‫sintaxis pug hace que sea mucho más
‫fácil escribir html como este.
‫Por supuesto, también
‫nos permitirá poner todo tipo de variables aquí,
‫de modo que realmente podamos inyectar nuestros datos en estas
‫plantillas, pero por ahora estoy realmente
‫interesado en publicar algo en el navegador.
‫Mucho más sobre cómo funciona realmente el pug
‫en las próximas conferencias.
‫Por ahora tenemos nuestra plantilla base aquí, y tengamos
‫ese nombre en mente.
‫Ahora podemos crear una nueva ruta desde la
‫cual accederemos a esa plantilla.
‫Así que hagámoslo aquí justo antes de la ruta de la API.
‫Entonces, app. get, que para representar páginas en un
‫navegador suele ser siempre el que
‫usamos, por lo que especificó la URL aquí, la ruta, y esa
‫es simplemente la raíz de nuestro sitio web.
‫Entonces, al igual que antes, por supuesto, necesitamos una
‫función de controlador, así que solicite, responda
‫y ahora para representar
‫nuestra plantilla como antes de usar el objeto
‫de respuesta, todavía establecemos el estado en 200 en este caso para ok.
‫Pero luego, en lugar de usar json, así, como siempre
‫lo hemos usado hasta este
‫punto, ahora es el momento de usar render.
‫Entonces render renderizará la plantilla con
‫el nombre que le pasamos,
‫y que en este caso es base.
‫Ni siquiera necesitamos especificar la extensión pug porque
‫Express sabrá automáticamente que este
‫es el archivo que estamos
‫buscando y, por supuesto, buscará este
‫archivo dentro de
‫la carpeta que se especificó al principio, así que esto uno.
‫Entrará en la carpeta de
‫vistas y allí buscará la plantilla con el nombre base.
‫Luego tomará esa plantilla y la renderizará,
‫y luego básicamente la enviará como respuesta al navegador.
‫Genial, probemos eso ahora.
‫Por lo tanto, creo que
‫nuestro servidor todavía se está ejecutando en el puerto de host local 3000.
‫Y eso nos da este
‫error, no podemos encontrar el módulo pug,
‫por lo que realmente necesitamos instalar el módulo pug.
‫Así que dije antes que no
‫lo hicimos, pero en realidad tenemos que hacerlo.
‫Express aún lo cargará detrás de escena automáticamente, pero
‫no viene con todos estos motores de
‫plantilla instalados de fábrica.
‫Entonces npm install pug.
‫Y aquí vamos,
‫intentémoslo de nuevo, y ahora
‫tenemos la caravana del parque.
‫Ese es nuestro elemento h1 que acabamos
‫de crear en la base. pug, y si ahora lo
‫inspeccionamos, verá que es un elemento h1 simple.
‫Por supuesto, no hay
‫estilo ni CSS en absoluto en este punto, pero
‫nos ocuparemos de
‫eso en las próximas conferencias.
‫Por ahora, lo que importa aquí
‫es que a medida que accedemos a nuestra raíz, enrutamos aquí en nuestro host, por
‫lo que tener esto es lo mismo que tener esto.
‫A medida que accedemos a esta ruta,
‫ahora obtenemos acceso a un sitio
‫web renderizado dinámicamente basado en nuestra base. plantilla de pug, genial.
‫Ese es el primer paso sobre cómo configurar pug,
‫y en las próximas
‫conferencias aprenderá a usar realmente este motor de plantillas para
‫crear sitios web dinámicos y sorprendentes.