Setup EJS

Install EJS

npm install ejs
npm install express-ejs-layouts

Add EJS as view engine in app.js

import expressLayouts from 'express-ejs-layouts';
app.set('views', './src/views');
app.set('view engine', 'ejs');
app.use(expressLayouts);

Create the header partial

touch src/views/partials/header.ejs

Write the header partial

<header class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="/">Do Date</a>
    <nav class="navbar-nav">
      <a class="nav-link" href="/tasks">View Tasks</a>
      <a class="nav-link" href="/tasks/new">Add Task</a>
    </nav>
  </div>
</header>

Create the home page

touch src/views/pages/index.ejs

Write the home page content

<h1>Do Date</h1>
<p>Manage your tasks and do them on time!</p>

Add bootsrap

npm install bootsrap

Copy bootstrap files

mkdir -p public/css public/js && \
cp node_modules/bootstrap/dist/css/bootstrap.min.css public/css/ && \
cp node_modules/bootstrap/dist/css/bootstrap.min.css.map public/css/ && \
cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js public/js/ && \
cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map public/js/

Create the layout file

touch src/views/layout.ejs

Write the layout file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= title %></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <%- include("./partials/header") %>
    <main class="container my-4">
      <%- body %>
      <%- locals.script || '' %>
    </main>
  </body>
</html>

Create the index controller

touch src/controllers/index.js

Write the controller

const getIndex = (req, res) => {
  res.render("pages/index", {title: "home"});
};

export default {
  getIndex,
};

Create the index route

touch src/routes/index.js

Write the index route

import express from 'express';
import indexController from '../controllers/index.js';

const indexRouter = express.Router();

indexRouter.get('/', indexController.getIndex);

export default indexRouter;

Mount the router in app.js

import indexRouter from './routes/index.js';
app.use('/', indexRouter);

Test

npm run dev

Commit

git add .
git commit -m 'Adds view setup'
git push

Next:
Go to next section - Login Overview test