Janine LaCroix Have His Carcase

Introduction to Pug

Pug, formerly known as Jade, is a template engine for Node.js and the browser. It allows developers to write cleaner and more readable HTML code, making the web development process more efficient. This tutorial will guide you through the steps of creating a simple webpage using Pug.

Setting Up Your Environment

Before diving into Pug, you will need to set up your development environment. Ensure that you have Node.js and npm installed on your system. You can download them from the official Node.js website. Once installed, open your terminal and create a new project folder by running:

mkdir pug-tutorial
cd pug-tutorial

Initialize a new Node.js project:

npm init -y

Finally, install Pug with the following command:

npm install pug --save

Creating a Pug Template

In your project folder, create a new directory called views and inside it, create a new file named index.pug. This file will contain your Pug template. Open index.pug and add the following code:

doctype html
html(lang="en")
head
title Pug Tutorial
body
h1 Hello, World!

This code sets up a basic HTML structure using Pug syntax. The doctype, html, head, and body tags are written without closing tags, thanks to Pug’s simplified syntax.

Rendering the Pug Template

To render the Pug template, you need to create a JavaScript file. Go back to your project folder and create an app.js file. Add the following code to set up a basic Express server that will render the Pug template:

const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});

Run the server using:

node app.js

Open your browser and navigate to http://localhost:3000. You should see the message “Hello, World!” displayed. Congratulations, you have successfully created a webpage using Pug!