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>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis corporis dolorem optio culpa voluptates veritatis ipsa dolor incidunt qui debitis quibusdam rerum magni mollitia consequatur nisi assumenda possimus minus modi facilis, minima aperiam, aspernatur maiores! Eveniet, eligendi iure adipisci sunt, iste nulla error eum beatae aut voluptatem recusandae voluptatum veritatis aliquid corporis cumque dolor. Amet nihil ad architecto perspiciatis iusto nulla optio ab, vero corrupti, ipsa blanditiis fuga dicta hic! Dolor quidem exercitationem obcaecati autem ut explicabo cupiditate quibusdam unde, iure minus laudantium facilis! Maxime at, ipsum sed tempora quo quis ad, incidunt, eos non fugiat veritatis quos laboriosam! Modi.

    </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