RENDER PUG TEMPLATE INSTALL
RENDER PUG TEMPLATE CODE

Then install the corresponding template engine npm package for example to install Pug:Įxpress-compliant template engines such as Jade and Pug export a function named _express(filePath, options, callback), which is called by the res.render() function to render the template code. For example, to use the Pug template engine: app.set(‘view engine’, ‘pug’).

view engine, the template engine to use.

This defaults to the views directory in the application root directory.

views, the directory where the template files are located.

To render template files, set the following application setting properties, set in app.js in the default app created by the generator: However if you want the latest updates to the template engine, you must replace Jade with Pug in your app. You can continue to use Jade in your app, and it will work just fine. You can further explore Pug at Pug.Jade has been renamed to Pug. However, those are out of the scope for this tutorial. Include can also be used to include plaintext, CSS and JavaScript. Go to localhost:3000/components, you should get the following output.

RENDER PUG TEMPLATE CODE

Following example shows how we can use an include −Ĭreate three views with the following code − header.pug Instead of copying that to every view, we can use an include. For example, if you see a news website, the header with logo and categories is always fixed. Pug provides a very intuitive way to create components for a web page. However, if we don’t pass any object or pass one with no user key, then we will get a Sign up link. It'll give a message displaying Hi, Ayush. When we render this using our routes, and if we pass an object like − To achieve this, we can define a simple template such as −

Consider this practical example, if a user is logged in we would want to display 'Hi, User' and if not, then we would want to show him a 'Login/Sign Up' link. We can use conditional statements and looping constructs as well. This method of using values is called interpolation. For example, in the above example, if we want to insert Greetings from TutorialsPoint, then we have to use the following code. To insert passed variables in between text of a tag, we use # syntax. We can also use these passed variables within the text. Open localhost:3000/dynamic in your browser and following should be the output. Then, create a new view file in the views directory, named dynamic.pug, using the following code. _.get('//dynamic_view', dynamicMessage) // Define routes

Create a new route handler with the following code.Īpp: app // equals to pug.use(app) and app.use(pug.middleware) When we render a Pug template, we can actually pass it a value from our route handler, which we can then use in our template. The following line of code covers defining attributes, classes, and id for a given html tag.ĭiv.#division(width = '100',height = '100') Class and ID attributes have special representations. To define attributes, we use a comma separated list of attributes, in parenthesis. These comments are converted to html comments(). Pug uses the same syntax as JavaScript(//) for creating comments. To put tags inside this block, simply enter tag in a new line and You can use '.' at the end of tag to denote block of text. There are three methods to put text inside of a tag −īut that gets tedious if you have a lot of text. As soon as Pug encounters the next tag on the same or the outer indentation level, it closes the tag for us. However, the tag was on the same indentation, thus it was a sibling of tag.

Like in the above example, was indented within the tag, so it was inside it. Tags are nested according to their indentation. Let’s explore some of these features of Pug. Pug is capable of doing much more than simplifying HTML markup. We don’t need to keep track of closing our tags, no need to use class and id keywords, rather use '.' and '#' to define them. What Pug does is, it converts this very simple looking markup to html. _.get('/hello', getMessage) // Define routes To run this page, add the following route to your app. Inside the directory, create a file named first_view.pug, and enter the following data in it. Now, create a new directory called views. Var _ = router() //Instantiate the routerĪpp.use(_.routes()) //Use the routes defined using the router Add the following code to your app.js file. Once pug is installed, set it as the templating engine for your app. To use Pug with Koa, we need to install it using the following command. There is a lot of ground to cover on this. Pug is a very powerful templating engine, which has a variety of features such as filters, includes, inheritance, interpolation, etc. Templating engines are used to remove the cluttering of our server code with HTML, concatenating strings wildly to existing HTML templates.

Render pug template