EJS with Bootstrap Development

Published On - March 20, 2023

yawhuat News, Tutorial

EJS WITH BOOTSTRAP DEVELOPMENT

Ejs is the easiest templating engine for nodejs. Most developers use ejs for fast web development.

Step 1:
Here is one of the few ways you can integrate EJS with bootstrap. First, you may want to install express, ejs, and express-js-layouts.

Step2:
npm init

npm i express ejs express-js-layouts

Step 3:

Next, create a View folder along with partials folders and layout. ejs file. Look at the structure below for more information

Here are some explanations. 
pages folder: To keep all the files related to the web pages
partials folder:  To keep reusable HTML codes. 
layout.ejs: This will be the default layout for ejs. 

 

Step 4:
In the layout.ejs, please include the code. This would be the place you may want to include the bootstrap code.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>After SPM & IGCSE</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

</head>

<body>

    <%- include('../views/partials/navigation.ejs') %>

    <%- body %>

    <%- include('../views/partials/footer') %>




</body>

</html>

 

Ejs syntax to include the navigation, body and partials foooter
    <%- include(‘../views/partials/navigation.ejs’) %>
    <%- body %>
    <%- include(‘../views/partials/footer’) %>
navigation.ejs

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Logo</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="/">Home </a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="../shortcourses">Short Courses</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="../colleges-universities">Colleges & Universities</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

          Dropdown link

        </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Action</a>

          <a class="dropdown-item" href="#">Another action</a>

          <a class="dropdown-item" href="#">Something else here</a>

        </div>

      </li>

    </ul>

  </div>

</nav>

 



footer.ejs








<p class=”text-center text-muted”>&copy; Copyright 2023. Designed by <a href=”https://www.novawebbusiness.com”> Nova Web</a></p>






 


index.ejs (body)








<div class="container-fluid pt-3">

    <h1>HOME</h1>

    <p>

       EJS with Bootstrap Development

    </p>

</div>






 


Step 5:


Step up the server.js








const express = require('express');

const expressEjsLayouts = require('express-ejs-layouts');

const app = express();

const port = 3000;

//set the view js engine and templating engine

app.use(expressEjsLayouts);

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

app.get('/', (req, res) => {

    res.render('pages/index')});

app.get('/about', (req, res) => {

    res.render('pages/about')});

app.get('/shortcourses', (req, res) => {

    res.render('pages/shortcourses')});

app.get('/colleges-universities', (req, res) => {

    res.render('pages/colleges-universities')});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))






There you go. It is very simple to include ejs as your templating engine. Hope it helps