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
andsidebar
.
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
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');
Hyperlink Data
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}
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
Click any hyperlink on the example case,
and you will get the response in console.log
immediately.
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 ].