Preface

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

Consider continue with EJS example. This should be the easiest part, because official express example is using EJS.

Table of Content

  • Preface: Table of Content

  • EJS Case

  • What is Next ?

Official Documentation

Source Examples

You can obtain source examples here:


EJS Case

The EJS 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 EJS views.

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

5 directories, 14 files

EJS: 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": {
    "ejs": "^3.1.3",
    "express": "^4.17.1"
  }

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', 'ejs');
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.

EJS Template Specific Code

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

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

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.

  <div class="w3-sidebar w3-bar-block w3-card w3-animate-left" 
       style="display:none" id="mySidebar">
    <button class="w3-bar-item w3-button w3-large"
       id="closeNav" >Close &times;</button>
    <% pages.forEach(function(page){ %>
    <a class="w3-bar-item w3-button"
       href="<%= page.link %>"
      ><%= page.long %></a>
    <% }) %>
  </div>
    <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge"
              id="openNav">&#9776;</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
    </div>

    <div class="w3-bar w3-black">
    <% pages.forEach(function(page){ %>
      <a class="w3-bar-item w3-button"
         href="<%= page.link %>"
        ><%= page.short %></a>
    <% }) %>
    </div>

All you need to know is these lines:

    <% pages.forEach(function(page){ %>
      <a class="w3-bar-item w3-button"
         href="<%= page.link %>"
        ><%= page.short %></a>
    <% }) %>

Express: Loop in EJS

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


What’s Next?

We still have the last express example: handlebars. Consider continue reading [ Template - Express - Handlebars ].