Node.js application that showcases the use of the Pug templating language.
Node.js application that showcases the use of the Pug templating language.
Complete Code Base for this Lab:
This example will render a basic webpage using Pug as the templating engine.
Step 1: Set Up the Project
1.1. Create a new folder for the project and navigate into it.
1.2. Initialize a new Node.js project by running npm init and following the prompts.
1.3. Install required dependencies:
bashCopy code
npm install express pug
Step 2: Create the Backend - Express Server with Pug Templating
2.1. Create an app.js file in your project's root directory.
2.2. Import the required modules and set up the Express server to use Pug as the templating engine.
// app.js
const express = require('express');
const app = express();
const port = 3000; // You can use any port number you prefer
// Set the 'views' directory as the location for Pug templates
app.set('views', './views');
app.set('view engine', 'pug');
// Define a route to render the Pug template
app.get('/', (req, res) => {
res.render('index', { title: 'Simple Pug Template' });
});
// Start the server
app.listen(port, () => {
console.log(`Server started on http://localhost:${port}`);
});
Step 3: Create the Pug Template
3.1. Create a new directory named views in your project's root directory. This is where your Pug template will be stored.
3.2. Create a Pug template named index.pug inside the views directory. This will be the simplest Pug template.
// views/index.pug
doctype html
html
head
title= title
body
h1 Hello, Pug Templating!
Step 4: Run the Application
4.1. Open a terminal and navigate to the project's root directory.
4.2. Run the application using Node.js:
node app.js
4.3. Open your web browser and visit http://localhost:3000. You should see a basic webpage with the text "Hello, Pug Templating!" rendered using Pug.
In this example, we set up a basic Node.js application using Express and the Pug templating engine.
The Pug template (index.pug) is a simple HTML file written using Pug's concise syntax.
The res.render() method in the backend renders the Pug template, and we pass the title variable as data to the template.
The value of title is set to "Simple Pug Template," and it gets interpolated into the HTML title element in the rendered page.
This demonstrates the most basic usage of Pug in a Node.js application.
Let's extend the simplest Node.js application lab to showcase ten progressively more detailed examples of adding HTML, forms, CSS, and other frontend web app building patterns using Pug and Express.
Step 1: Set Up the Project
1.1. Create a new folder for the project and navigate into it.
1.2. Initialize a new Node.js project by running npm init and following the prompts.
1.3. Install required dependencies:
npm install express pug
Step 2: Create the Backend - Express Server with Pug Templating
2.1. Create an app.js file in your project's root directory.
2.2. Import the required modules and set up the Express server to use Pug as the templating engine.
javascriptCopy code
// app.js
const express = require('express');
const app = express();
const port = 3000; // You can use any port number you prefer
// Set the 'views' directory as the location for Pug templates
app.set('views', './views');
app.set('view engine', 'pug');
// Define a route to render the Pug template
app.get('/', (req, res) => {
res.render('index', { title: 'Simple Pug Template' });
});
// Start the server
app.listen(port, () => {
console.log(`Server started on http://localhost:${port}`);
});
Step 3: Create the Pug Template
3.1. Create a new directory named views in your project's root directory. This is where your Pug templates will be stored.
3.2. Create a Pug template named index.pug inside the views directory. This will be the simplest Pug template.
pugCopy code
// views/index.pug
doctype html
html
head
title= title
body
h1 Hello, Pug Templating!
Step 4: Run the Application
4.1. Open a terminal and navigate to the project's root directory.
4.2. Run the application using Node.js:
bashCopy code
node app.js
4.3. Open your web browser and visit http://localhost:3000. You should see a basic webpage with the text "Hello, Pug Templating!" rendered using Pug.
Now let's add the progressive examples:
Example 1: Adding a Basic HTML Form
pugCopy code
// views/index.pug
doctype html
html
head
title= title
body
h1 Hello, Pug Templating!
form(action="/submit", method="POST")
label(for="name") Your Name:
input(type="text", name="name", required)
br
button(type="submit") Submit
Example 2: Processing Form Submission
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3011; // You can use any port number you prefer
// Set the 'views' directory as the location for Pug templates
app.set('views', './views');
app.set('view engine', 'pug');
// Body parser middleware
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// Define a route for the root URL and render the Pug template
app.get('/', (req, res) => {
res.render('index', { title: 'Simple Pug Template' });
});
// Define a route to render the Pug template with a form
app.get('/form', (req, res) => {
res.render('form', { title: 'Form Example' });
});
// Define a route to handle form submission
app.post('/submit', (req, res) => {
const name = req.body.name;
res.send(`Hello, ${name}! Your form was submitted successfully.`);
});
// Start the server
app.listen(port, () => {
console.log(`Server started on http://localhost:${port}`);
});
Let's add some interesting uses of jQuery to the index.pug template. We'll use jQuery to enhance the user experience by performing some interactive actions on the form.
To use jQuery, make sure you have included the jQuery library in your project. You can either download it and include it directly in your project or use a CDN (Content Delivery Network). For this example, we'll use a CDN to include jQuery.
Here's the updated index.pug template with some interesting jQuery features:
pug
Copy code
// views/index.pug
doctype html
html
head
title= title
link(rel="stylesheet", href="/styles.css")
// Include jQuery from the CDN
script(src="https://code.jquery.com/jquery-3.6.0.min.js")
// jQuery script for interactive form actions
script.
$(document).ready(function() {
// Hide the submit button initially
$('button[type="submit"]').hide();
// Show the submit button only when the input field is filled
$('input[name="name"]').on('input', function() {
if ($(this).val().trim() !== '') {
$('button[type="submit"]').show();
} else {
$('button[type="submit"]').hide();
}
});
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.