

The above code is a regular HTML Page but written in Pug template specific syntax.Īs you can see that there are no tags when creating an element and the most important thing is when you open a tag you don’t have to close it, here is what you should consider: * index.pug */ html head title Hello World body h3 Welcome to Pug Template Engine Now go under your public folder or where ever you put your static served website asset (for me it is /dist) and create a new file name it index.pug.

You will notice that it makes HTML Pages creation much easier and simple and never complain about how the code is badly structured or why you can understand how things are actually connected. You can check the Official Pug website for frameworks support info.

If you want to follow along with the tutorial you can get the bare repository which has a simple Node.js Express Server with Pug from Github, otherwise, you can use your own project.įirst, you need to install pug I have a Node.js Express server project so I use NPM but depending on the framework you are using and technology you can get Pug and install it. Pug was named Jade before it changes its name to Pug template engine it is mostly supported by any framework or language you decided to develop your backend (server-side) with, and for its simple design and structure that’s why you should consider using it over other available engines. A Template Engine is so necessary when it comes to delivering complex user interfaces and having full control over your HTML pages which nowadays it is supported with most of the frameworks you work with, Pug is one of the best Template Engine when it comes to simplicity and features and how easy it is to get started with for anyone who has a basic knowledge about basic HTML Web page structure.
