Where to Discuss?

Local Group

Table of Content

Preface

Goal: Feeding Data in ExpressJS, and Process in a Loop with Pug.

How about making online site in localhost by request, instead of build local files for every changes? Yes, express is the right tools for beginner. The configuration is so simple, and you can have your site is ready to served in localhost.

Consider start with pug example.

Official Documentation

Source Examples

You can obtain source examples here:


Pug Case

The pug case is the same, with the one utilizing grunt in previous article with a few differences.

  • express configuration

  • Using data to provide hyperlink in both navbar and sidebar.

Directory Structure

Consider an express structure with pug views.

❯ tree
.
├── app.js
├── package.json
├── public
│   ├── css
│   │   └── w3.css
│   ├── favicon.ico
│   └── js
│       └── script.js
└── views
    ├── css.pug
    ├── html.pug
    ├── index.pug
    ├── javascript.pug
    ├── partials
    │   ├── head.pug
    │   ├── layout.pug
    │   ├── navbar.pug
    │   └── sidebar.pug
    └── php.pug

5 directories, 14 files

Pug: Example: Tree

The views structure is similar to previous case with grunt. I suggest that you have fast reading for this article first.

package.json

All you need to know is the devDependencies.

  "devDependencies": {
    "express": "^4.17.1",
    "pug": "^2.0.4"
  }

To begin with expressjs, you need to run npm install first.

app.js

You also need to a write a simple application in app.js.

// Basic Stuff
var express = require('express');
var path = require('path');
var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));
app.locals.pretty = true;

// Example Pages
var pages = [
  { link: '/',     short: 'Home', long: 'Home'  },
  { link: '/html', short: 'HTML', long: 'HTML Link' },
  { link: '/css',  short: 'CSS',  long: 'CSS Link' },
  { link: '/php',  short: 'PHP',  long: 'PHP Link' },
  { link: '/javascript', short: 'Javascript', long: 'Javascript Link' }
];

// Router
app.get('/', function(req, res) {
  res.render('index', { pages: pages });
  console.log("choice page is index");
});

const choices = ['index', 'html', 'css', 'php', 'javascript'];
app.get('/:page', function(req, res) {
  page = req.params.page;
  
  if (choices.includes(page)) {
    res.render(page, { pages: pages });
    console.log("choice page is " +page);
  } else {
    res.send('404: Page not Found', 404);
  }
});

// Run, Baby Run
app.listen(3000);
console.log('Express started on port 3000');

The application is short enough to be self explanatory.

Pug Template Specific Code

The only line we need to manage pug is this one below:

app.set('view engine', 'pug');

The same for every templates

To provide hyperlink in both navbar and sidebar, we need to setup the data in app.js as below:

var pages = [
  { link: '/',     short: 'Home', long: 'Home'  },
  { link: '/html', short: 'HTML', long: 'HTML Link' },
  { link: '/css',  short: 'CSS',  long: 'CSS Link' },
  { link: '/php',  short: 'PHP',  long: 'PHP Link' },
  { link: '/javascript', short: 'Javascript', long: 'Javascript Link' }
];

We will feed the data for each request.

app.get('/', function(req, res) {
  res.render('index', { pages: pages });
  console.log("choice page is index");
});

The sidebar will use long text, and the navbar will use short one.

Router

The same for every templates

For simplicity, I put all the routes in app.js.

app.get('/', function(req, res) {
  res.render('index', { pages: pages });
  console.log("choice page is index");
});

const choices = ['index', 'html', 'css', 'php', 'javascript'];
app.get('/:page', function(req, res) {
  page = req.params.page;
  
  if (choices.includes(page)) {
    res.render(page, { pages: pages });
    console.log("choice page is " +page);
  } else {
    res.send('404: Page not Found', 404);
  }
});

If the request does not contain any of the above page, express will send 404 error response.

Loop in Template

This time, consider alter a bit, both the sidebar and the navbar, so we can render each data in loop.

#mySidebar.w3-sidebar.w3-bar-block.w3-card.w3-animate-left(style='display:none')
  button#closeNav.w3-bar-item.w3-button.w3-large 
    | Close ×
  each page in pages
    a.w3-bar-item.w3-button(href=page.link)
      | #{page.long}
.w3-teal
  button#openNav.w3-button.w3-teal.w3-xlarge
    | ☰
  .w3-container
    h1 My Page
.w3-bar.w3-black
  each page in pages
    a.w3-bar-item.w3-button(href=page.link)
      | #{page.short}

All you need to know is these lines:

  each page in pages
    a.w3-bar-item.w3-button(href=page.link)
      | #{page.short}

Express: Loop in Pug

This will render a hyperlink, with result about the same with previous example.

Running Express

Running express is as easy as this command below.

$ node app.js

HTML: Hyperlink Example

Click any hyperlink on the example case, and you will get the response in console.log immediately.

Express: node app.js

You are ready to run a website, with expressjs backend, using pug.


What’s Next?

We still have three express example: nunjucks, EJS and handlebars. Consider continue reading [ Template - Express - Nunjucks ].