Server side rendering

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.

Pug.js

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 !.

Mukhtar's Blog

Mukhtar's Blog

Server side rendering