🛠️ Create a project directory named whatabyte -portal anywhere in your system and make it your current directory: mkdir whatabyte-portal If you need to install Node.js and npm, use any of the official Node.js installers provided for your operating system. We tested this tutorial using Node.js v12. You'll build a login portal for a restaurant named WHATABYTE using server-side rendering (SSR): Look for the 🛠️️ emoji if you'd like to skim through the content while focusing on the build steps. Let's start by creating an h1 that says 'Hello, Pug'.In this tutorial, you'll learn how to build a simple and clean Node.js server-side rendered application using the Express framework and Pug templates styled with CSS.Īs a bonus, you'll learn how to streamline your Node.js development workflow by using nodemon to restart the server and browser -sync to reload the browser whenever relevant source files change. Part of this is due to the fact that you don't have to worry about closing tags, which can help lead to much cleaner files. There are some other items that make it a little different when writing it, but the elements, attributes, and structure are all the same as standard HTML.Ĭreating markup for a webpage in Pug may feel a bit strange at first, but after a bit will start to feel pretty intuitive. The key to writing Pug is indentation because when Pug is compiled into HTML, the indentation is how it determines how to nest the elements. It has become a widely used templating engine for many websites, and for good reason: If you know how to write HTML, this will feel like a shorthand version of it. Pug, formerly known as Jade, released it's 1.0.0 version on Decemafter being in development for a few years.

Today I will be talking about one of the most popular templating languages for Node.js applications, Pug. These languages allow you to write HTML like structures while retaining the ability to insert variables and use logic within the structure.

The engines used in the aforementioned tools are Twig, Blade, and Edge, respectively. A templating engine is a tool that a framework can use to assist in scaffolding a front-end for a website or webapp.

If you've ever used something like Drupal, Laravel, or Adonis, you've likely encountered a template engine.

Pug template engine example