At some points while doing server-side programming you may need to display responses from the server to the web page, this is where PUG comes handy, a templating engine which compiles your simple PUG code into HTML code.
To get started with PUG, you may need a package.json file to manage your dependencies and project.
npm init
Fill all what is needed in the terminal.
To install PUG, you can use NPM.
npm install pug
Here is a simple Example of a PUG code.
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
body
div
p Hello World
becomes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>Hello World</p>
</div>
</body>
</html>
check PUG for full Api.
Now Sending server response to PUG file, we'll need express.js, a Backend framework for Node.js, check Server on how to setup a server using express.
npm install express
You'll be sending 'Hello World' from the server to the PUG file, firstly create a folder where your PUG file will be, I'll name mine 'views'. To name your PUG file the extension is .pug and I'll name mine index.pug, your PUG code should look like this below. Where greeting will be the variable assigned to 'Hello world' in the server.
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
body
div
p #{greeting}, using PUG is awesome
Now in your server, you'll set a view engine and a path to the views folder this way.
const express = require('express')
const app = express()
const PORT = 8080
app.set('view engine', 'pug');
app.set('views', './views');
app.listen(PORT, () =>{
console.log(`server is running on ${PORT}`);
})
Now you'll set a variable for ' greeting ' in your server.
let greeting = 'Hello world'
Then to render this variable, you can set it to any part but here we'll be setting it to the root path '/', this means anytime the root path loads it'll be rendering a string from the server.
app.get('/', (req, res) =>{
res.render('index', {
greeting: greeting
});
})
What this means now is that it renders the PUG file whose name is index and then assigns the greeting variable in the PUG file to the greeting variable in the server.
Your complete server code should look like this.
const express = require('express')
const app = express()
const PORT = 8080
app.set('view engine', 'pug');
app.set('views', './views');
let greeting = 'Hello world';
app.get('/', (req, res) =>{
res.render('index', {
greeting: greeting
});
})
app.listen(PORT, () =>{
console.log(`server is running on ${PORT}`);
})
I hope you enjoyed this short article, your feedback is highly welcomed.
Thank you for reading !.