Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Usando Pug como template engine

7/42

Aprenderemos a definir Pug como nuestro template engine por defecto.

En pug para asignar la variable el igual debe quedar pegado a la etiqueta de lo contrario no funciona

// Funciona
            p= team.country
 // No funciona
            p = team.league

Características básicas de PUG

-PUG es sensible a la identacion es decir para anidar etiquetas una dentro de otra se utilizan la identacion y no se cierran las etiquetas.

ul
      li Item A
      li Item B
  • Los atributos de las etiquetas van entre paréntesis
link(href='/css/styles.css', rel='stylesheet')
  • El texto en las etiquetas puede ser escrito en 3 formas diferentes
p  
  | Hola mundo
p.  
  Hola mundo
p Hola mundo
  • Las clases y ID’s utilizan la sintaxis de CSS
div.container
div#container
  • Las variables se crean de la siguiente forma
- let engine = "PUG"
  • Para escapar y traer una variable se usa
p El motor de vistas es #{engine}

Me hubiese gustado ver mas de Handlebars (u otro template engine) que sea mejor mantenido y más usado que Pug, estoy al tanto de que los dos hacen y cumplen el trabajo, pero es importante tambien tener en cuenta que los paquetes que usemos en nuestro proyecto deben ser contar con ese respaldo por parte de la comunidad y sobre todo de sus manteiners.

handlebars.png
pug.png

Hola donde puedo encontrar el branch de este proyecto? va demasiado rapido el tutor imposible seguirlo

pug.PNG

El framework con el logo mas divertido que en visto hasta ahora. Me encanta la cara del perrito jajajaja.

Es muy importante que los Pugs esten identados, de otra forma te dara un error.

¿esto es a lo que llaman server side render?

Entonces en lugar de usar pug, podría usar react o HTML puro???

El profesor va demasiado rápido en las explicaciones

porque estas creando todas esas carpetas y no usas en generate app de express con eso listo…?

express deprecated

res.send("products", { products });

formar correcta

res.status(200).send({ products });

pug es similar a blade de laravel?

Sin duda. Me gusta trabajar con Express y Laravel

const express = require('express')
// Modulo nativo para trabajar con rutas de directorioss 
const path = require('path')
const app = express()

// Requerir mis módulos de ruta
const productsRouter = require('./routes/products')

// Establecer el directorio de las vistas
app.set('views', path.join(__dirname, 'views'))
// Asociar al motor de plantillas los archivos con extensión .pug
app.set('view engine', 'pug')

// Registrar un router en express
app.use('/products', productsRouter)

const server = app.listen(3000, function () {
  console.log(`Server Listening in http://localhost:${server.address().port}`)
})

// Exportar mi instancia del servidor. Buenas Prácticas para testing o requerir en otros modulos.
module.exports = server

Me encanta pug, me minimiza muchísimo el código de Vue.JS en su template.
Lo recomiendo para anexarlos en su código.

const express = require('express');
const app = express();
const path = require('path');
const productRouter = require('./routes/productos');

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

app.use('/yo', productRouter);

app.listen(3001, function(){
    console.log('puerto 3001 levantado');
})

Alguien me puede ayudar con este error. Si bien dice que no puede ver view products en el directorio de views, lo cual no es asi. No se que otra cosa sera…

Error: Failed to lookup view “products” in views directory "/home/gerry/projects/expresJS/ecommerce/views"
at Function.render (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/application.js:580:17)
at ServerResponse.render (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/response.js:1012:7)
at /home/gerry/projects/expresJS/ecommerce/routes/products.js:16:9
at Layer.handle [as handle_request] (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/layer.js:95:5)
at next (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/layer.js:95:5)
at /home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/index.js:335:12)
at next (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/index.js:275:10)

Bien, vamos con toda

Excelente, gracias

Pero en todo caso que puedan tener problemas con pub pueden pasar a la documentacion y asi poder entender mas a profundo

Si le aparece este error

Error: Cannot find module 'pug'

solo instalen la libreria de pug

npm i -S pug

Han sido clases super retadoras, pero he aprendido muchisimo

En pug para asignar la variable el igual debe quedar pegado a la etiqueta de lo contrario no funciona

// Funciona
            p= team.country
 // No funciona
            p = team.league

Características básicas de PUG

-PUG es sensible a la identacion es decir para anidar etiquetas una dentro de otra se utilizan la identacion y no se cierran las etiquetas.

ul
      li Item A
      li Item B
  • Los atributos de las etiquetas van entre paréntesis
link(href='/css/styles.css', rel='stylesheet')
  • El texto en las etiquetas puede ser escrito en 3 formas diferentes
p  
  | Hola mundo
p.  
  Hola mundo
p Hola mundo
  • Las clases y ID’s utilizan la sintaxis de CSS
div.container
div#container
  • Las variables se crean de la siguiente forma
- let engine = "PUG"
  • Para escapar y traer una variable se usa
p El motor de vistas es #{engine}

Me hubiese gustado ver mas de Handlebars (u otro template engine) que sea mejor mantenido y más usado que Pug, estoy al tanto de que los dos hacen y cumplen el trabajo, pero es importante tambien tener en cuenta que los paquetes que usemos en nuestro proyecto deben ser contar con ese respaldo por parte de la comunidad y sobre todo de sus manteiners.

handlebars.png
pug.png

Hola donde puedo encontrar el branch de este proyecto? va demasiado rapido el tutor imposible seguirlo

pug.PNG

El framework con el logo mas divertido que en visto hasta ahora. Me encanta la cara del perrito jajajaja.

Es muy importante que los Pugs esten identados, de otra forma te dara un error.

¿esto es a lo que llaman server side render?

Entonces en lugar de usar pug, podría usar react o HTML puro???

El profesor va demasiado rápido en las explicaciones

porque estas creando todas esas carpetas y no usas en generate app de express con eso listo…?

express deprecated

res.send("products", { products });

formar correcta

res.status(200).send({ products });

pug es similar a blade de laravel?

Sin duda. Me gusta trabajar con Express y Laravel

const express = require('express')
// Modulo nativo para trabajar con rutas de directorioss 
const path = require('path')
const app = express()

// Requerir mis módulos de ruta
const productsRouter = require('./routes/products')

// Establecer el directorio de las vistas
app.set('views', path.join(__dirname, 'views'))
// Asociar al motor de plantillas los archivos con extensión .pug
app.set('view engine', 'pug')

// Registrar un router en express
app.use('/products', productsRouter)

const server = app.listen(3000, function () {
  console.log(`Server Listening in http://localhost:${server.address().port}`)
})

// Exportar mi instancia del servidor. Buenas Prácticas para testing o requerir en otros modulos.
module.exports = server

Me encanta pug, me minimiza muchísimo el código de Vue.JS en su template.
Lo recomiendo para anexarlos en su código.

const express = require('express');
const app = express();
const path = require('path');
const productRouter = require('./routes/productos');

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

app.use('/yo', productRouter);

app.listen(3001, function(){
    console.log('puerto 3001 levantado');
})

Alguien me puede ayudar con este error. Si bien dice que no puede ver view products en el directorio de views, lo cual no es asi. No se que otra cosa sera…

Error: Failed to lookup view “products” in views directory "/home/gerry/projects/expresJS/ecommerce/views"
at Function.render (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/application.js:580:17)
at ServerResponse.render (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/response.js:1012:7)
at /home/gerry/projects/expresJS/ecommerce/routes/products.js:16:9
at Layer.handle [as handle_request] (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/layer.js:95:5)
at next (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/layer.js:95:5)
at /home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/index.js:335:12)
at next (/home/gerry/projects/expresJS/ecommerce/node_modules/express/lib/router/index.js:275:10)

Bien, vamos con toda

Excelente, gracias

Pero en todo caso que puedan tener problemas con pub pueden pasar a la documentacion y asi poder entender mas a profundo

Si le aparece este error

Error: Cannot find module 'pug'

solo instalen la libreria de pug

npm i -S pug

Han sido clases super retadoras, pero he aprendido muchisimo